Question

我有一个页面，其中包含从数据库生成的许多不同表单。每个表单底部都有一个div来加载数据。它们具有动态id：tempdiv_1 tempdiv_2等。

我试图让jquery基于像this.input.val这样的东西来更新div，这是一个带有节ID的隐藏输入。

代码：

<script type="text/javascript">
$('#formdataAddForm').live('submit' , function() { // catch the form's submit event
   $.ajax({ // create an AJAX call...
        data: $(this).serialize(), // get the form data
        type: $(this).attr('method'), // GET or POST
        url: $(this).attr('action'), // the file to call
        success: function(response,data) { // on success..
            $.fancybox({
            maxWidth    : 800,
            maxHeight   : 200,
            fitToView   : false,
            width       : '70%',
            height      : '70%',
            autoSize    : false,
            closeClick  : false,
            openEffect  : 'none',
            closeEffect : 'none',
            content     : response
        });
        $('#tempdiv_'+(('input[id="formdataSection"]', form).val())).load('/page/list.php');
    }
});
return false; // cancel original event to prevent form submitting
});
</script>

我无法开展工作的一点是：

 $('#tempdiv_'+(('input[id="formdataSection"]', form).val())).load('/page/list.php');

如何让jquery更新动态div？表单都具有相同的ID，因此我无法调用表单ID。

Answer 1

试试这段代码：

 <script type="text/javascript">
   $('#formdataAddForm').live('submit' , function() { // catch the form's submit event
   var form = $(this)
   $.ajax({ // create an AJAX call...
        data: $(this).serialize(), // get the form data
        type: $(this).attr('method'), // GET or POST
        url: $(this).attr('action'), // the file to call
        success: function(response,data) { // on success..
            $.fancybox({
            maxWidth    : 800,
            maxHeight   : 200,
            fitToView   : false,
            width       : '70%',
            height      : '70%',
            autoSize    : false,
            closeClick  : false,
            openEffect  : 'none',
            closeEffect : 'none',
            content     : response
        });
        $('#tempdiv_'+($('input[id="formdataSection"]', form).val())).load('/page/list.php');
    }
});
return false; // cancel original event to prevent form submitting
});
</script>

如果您提出的问题中的代码与您尝试运行的代码相同 - 这应该会有所帮助。在您的代码表单中，未定义变量，并且您在此行中错过了$：$('#tempdiv_'+($('input[id="formdataSection"]', form).val())).load('/page/list.php');

此外，如果您使用name属性而不是id来存储div id的输入，那将会更好。 ID必须唯一且名称 - 否。假设表单上下文（$('input[id="formdataSection"]', form)中的第二个参数）应该有助于找到正确的值（我记得，我一直在努力尝试这样的事情），但名称更可靠和有效。

Jquery .ajax成功更新动态div

代码：

1 个答案: