1

我在 Jquery 中动态创建一个表单，这个表单需要使用 AJAX 提交。我可能在做一些愚蠢的事情，所以非常感谢您的帮助。

单击链接时，我正在动态创建表单：

$('.edit_item').click(function(){
    $(this).closest('table').wrap("<form id='update_project' name='update_project' method='POST'>");
    var input_name = $(this).closest('tr').find("td:eq(0)");
    var input_submit = $(this).closest('tr').find("td:eq(1)");
    input_name.html("<input type='text' id='update_name' name='update[]' value='"+input_name.text()+"' />");
    input_submit.html("<input type='submit' value='update' id='update_submit' name='update_submit' />");
});

提交表单时：

$('#update_project').live("submit", function(e){      
    e.preventDefault();        
    $.post('project/update', $(this).serialize(), function(data){
        $('#complete_msg').html(data);
    });
    $('.update_submit').css('background', '#c9c9c9');
});

不幸的是，页面正在刷新（它不应该），并且没有返回。

谢谢！

4

2 回答 2

2

我会将提交更改为按钮：

 input_submit.html("<input type='button' value='update' id='update_submit' name='update_submit' />

和事件， live 被贬值（http://api.jquery.com/live/）：

$('#update_submit').click(function(e){      
    $.post('project/update', $('#update_project').serialize(), function(data){
        $('#complete_msg').html(data);
    });
    $('.update_submit').css('background', '#c9c9c9');
});
于 2013-07-02T17:54:59.097 回答
0

如果我的回答太基本，请原谅我 - 你的编码非常先进，但你错过了几件事。对我来说最好过于迂腐，而不是没有提供足够的信息来立即解决您的问题。

当用户单击update按钮时页面正在刷新，因为您使用的是 .submit 方法。如果您不想刷新表单，请使用上面斯蒂芬金的回答：

  • 将<input>类型更改为type="button"，然后
  • 使用该("#yourbuttonID").click()事件 $.post 您的表单数据。

同样如 SK 上面所说，请注意.live()已弃用，因此只需切换为.on()

试试这个：

$('.edit_item').click(function(){
    $(this).closest('table').wrap("<form id='update_project' name='update_project' method='POST'>");
    var input_name = $(this).closest('tr').find("td:eq(0)");
    var input_submit = $(this).closest('tr').find("td:eq(1)");
    input_name.html("<input type='text' id='update_name' name='update[]' value='"+input_name.text()+"' />");
    input_submit.html("<input type='button' value='update' id='update_submit' name='update_submit' />");
});

$(document).on("click", "#update_submit", function(e){
    $.post('your_processor_filename.php', $(this).closest('form').serialize(), function(data){
        $('#complete_msg').html(data);
    });
    $('.update_submit').css('background', '#c9c9c9');
});

请注意，您需要.closest('form')选择器来序列化表单数据。

我也会$(document).on('click'...用来确保找到您注入的按钮。

我不熟悉您要向其发送表单数据进行处理的文件类型，但project/update对我来说不是熟悉的文件类型。确保它是可以处理您的数据的代码页面，例如 .PHP 文件。见我上面的例子——或者，更好的是......

例如，创建一个名为“your_processor_filename.php”的.PHP 文件（即我在上面键入的代码中引用的文件名）。将其放在同一个文件夹中并在顶部键入以下内容：

//echo 'Got to the PHP side';

echo '<pre>';
print_r($_POST);
echo '</pre>';
die();

这将回显您发送的内容，并允许您查看数据并确认 AJAX 正在工作。

请注意，您的 HTML 必须包含带有 ID 的 divcomplete_msg才能看到返回消息，例如：

<div id="complete_msg"></div>
于 2013-07-02T18:51:08.137 回答