Jquery post() - 无法附加返回数据

发布于 2024-12-18 19:41:10 字数 4315 浏览 2 评论 0原文

我是第一次使用 jquery post()，我不能简单地附加返回的数据。就我而言，数据只是我的操作调用的页面中的一个表行。我有这个

                        $.post(mysaveurl , $("#installment_form").serialize(), "html")
                            .success(function(data){                                            
                                $( "#paymentplantable table tbody" ).append( data );
                                $dialog.dialog( 'destroy' );
                            }).error(function(){
                                alert("Please ensure that all fields are populated.");
                            });

我的数据正在访问数据库，但对话框不会破坏。这意味着我要附加的行会杀死流程。 注意：上面我使用了“html”参数，我不确定它是否合法，因为我只看到示例中使用了 xml 和 json。然后我将其修改为这个它

                        $.post(mysaveurl , $("#installment_form").serialize())
                            .success(function(data){
                                $dialog.dialog( 'destroy' );
                                var content = $( data ).find( 'tr' );          
                                $( "#paymentplantable table tbody" ).append( content );
                            }).error(function(){
                                alert("Please ensure that all fields are populated.");
                            });

的工作原理是我正在获取数据，但是当我将表行附加到现有表时，单元格格式错误。如果我用 firebug 检查 DOM，该表在结构上是正确的，但是它没有显示为正确的表行，所有数据都被“挤压”到左侧。

然后我认为 HTML 没有正确传递，所以我使用了 jquery html() 方法，如下所示

var content = $( data ).find( 'mydivwrapper' ).html();

，其中“mydivwrapper”是放置在 tr 周围的 div，也通过返回的“数据”进入。这也是一个坏主意。

请帮忙。

编辑：

我稍微改变了我的脚本。解决

                        dataString = $("#installment_form").serialize();
                        $.ajax({
                            type: "POST",
                            url: mysaveurl,
                            data: dataString,
                            dataType: "text",
                            success: function(data) {                                                                       
                                alert(data);
                            }
                      });

当我提醒返回的数据时，我得到了这个

<?xml version="1.0" encoding="UTF-8"?>
<html><tr><td>31</td><td>147.0</td><td>Monday 14 November, 2011</td><td style="height:20px; width:20px;" class="edit_in_table"/><td style="height:20px; width:20px;" class="remove" id="/starburst/invoices/removeInstallment/14/31"/></tr></html>

方案：我在操作中构造了表行并将标记作为字符串返回。不确定为什么会发生上述行为。

另外，为了阅读这篇文章的人的利益，我在 jquery 对话框中发布表单时遇到了很大的困难。你看，我动态创建了对话框，但它不在 DOM 中，我必须调用 $("#mydialig").remove();让我的日期选择器每次都显示并防止表单提交以前的值。希望它有帮助，这是最终的代码。

    function addInstallment(){
        $("#newinstallment").live("click", function(){
            var $dialog = $('<div></div>');
            var mysaveurl = $(this).attr("saveurl");
            $dialog.load($(this).attr("formurl"), function(){
                $( "#mydatepicker" ).datepicker();
            }).dialog({
                title: 'Add new payment item',
                width: 450,
                modal: true,
                buttons: {
                    Save: function() {
                        dataString = $("#installment_form").serialize();
                        $.ajax({
                            type: "POST",
                            url: mysaveurl,
                            data: dataString,
                            dataType: "text",
                            context: $(this),
                            success: function(data) {
                                $( "#paymentplantable table tbody" ).append(data);
                                var newremoveurl = "${removeinsturlNoIds}"+$("#paymentplantable tr:last td:last").attr("id");
                                $("#paymentplantable tr:last td:last").attr("id", newremoveurl);
                                $( this ).remove();
                            }
                      });
                    },
                    Cancel: function() {
                        $( this ).dialog( 'destroy' );
                    }
                }
            }); 
        });
    }

原文

I am using the jquery post() for the first time and I can't simply append the returned data. In my case the data is simply a table row from the page which my action calls. I have this

                        $.post(mysaveurl , $("#installment_form").serialize(), "html")
                            .success(function(data){                                            
                                $( "#paymentplantable table tbody" ).append( data );
                                $dialog.dialog( 'destroy' );
                            }).error(function(){
                                alert("Please ensure that all fields are populated.");
                            });

My data is hiting the database, but the dialog does not destroy. This meens that the line where i am appending kills the flow. NOTE: above i used the 'html' paramiter, I am not sure if its ligal because i only saw xml and json being used in the examples. I then modified it to this

                        $.post(mysaveurl , $("#installment_form").serialize())
                            .success(function(data){
                                $dialog.dialog( 'destroy' );
                                var content = $( data ).find( 'tr' );          
                                $( "#paymentplantable table tbody" ).append( content );
                            }).error(function(){
                                alert("Please ensure that all fields are populated.");
                            });

It worked in that I am gething my data, however when I append the table row to an existing table, the cells are mal formed. If I inspect the DOM with firebug, the table is strucurally correct, however its is not showing up as a proper table row, all the data is "squeezed" to the left.

I then thaught that the HTML is not being passed correctly, so i used the jquery html() method as follows

var content = $( data ).find( 'mydivwrapper' ).html();

where 'mydivwrapper' is a div placed around the tr and also comes in via the returning "data". This also was a bad idea.

Please help.

EDIT:

I changed my script a little. Se this

                        dataString = $("#installment_form").serialize();
                        $.ajax({
                            type: "POST",
                            url: mysaveurl,
                            data: dataString,
                            dataType: "text",
                            success: function(data) {                                                                       
                                alert(data);
                            }
                      });

when i alert the returned data I get this

<?xml version="1.0" encoding="UTF-8"?>
<html><tr><td>31</td><td>147.0</td><td>Monday 14 November, 2011</td><td style="height:20px; width:20px;" class="edit_in_table"/><td style="height:20px; width:20px;" class="remove" id="/starburst/invoices/removeInstallment/14/31"/></tr></html>

SOLVED:
I constructed the table row in my action and returned the mark up as a string. Not sure whay the above behavior occured.

Additionally for the benefit of anyone reading this post, I was haveing great difficulty posting my form in a jquery dialog. You see, I dynamically created the dialog and it was not in the DOM, I had to call $("#mydialig").remove(); to get my datepicker to show up each time as well as prevent the form form submiting previous values. Hope it helps, here is the final code.

    function addInstallment(){
        $("#newinstallment").live("click", function(){
            var $dialog = $('<div></div>');
            var mysaveurl = $(this).attr("saveurl");
            $dialog.load($(this).attr("formurl"), function(){
                $( "#mydatepicker" ).datepicker();
            }).dialog({
                title: 'Add new payment item',
                width: 450,
                modal: true,
                buttons: {
                    Save: function() {
                        dataString = $("#installment_form").serialize();
                        $.ajax({
                            type: "POST",
                            url: mysaveurl,
                            data: dataString,
                            dataType: "text",
                            context: $(this),
                            success: function(data) {
                                $( "#paymentplantable table tbody" ).append(data);
                                var newremoveurl = "${removeinsturlNoIds}"+$("#paymentplantable tr:last td:last").attr("id");
                                $("#paymentplantable tr:last td:last").attr("id", newremoveurl);
                                $( this ).remove();
                            }
                      });
                    },
                    Cancel: function() {
                        $( this ).dialog( 'destroy' );
                    }
                }
            }); 
        });
    }

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

身边 2024-12-25 19:41:10

在 Firebug 中检查时，数据不可能既结构正确又格式错误。例如，您可能一直在检查所有开始标记是否都有匹配的结束标记，所有实际上都在内，等等...但是您是否检查过返回的表行与要附加到的表的列数相同？在 ajax 追加行之前，是否有任何样式应用于表格？（例如：有时会在 jQuery 网格中添加一堆 CSS 类以使表格变得漂亮）。如果这不能帮助您立即获得它，请在附加行之前和之后从 firebug 中复制表格 html，并将代码作为编辑发布在您的问题中。

另外，您可能想在销毁之前调用 .dialog('close') （或者甚至不是销毁，具体取决于您是否打算稍后重用对话框）。 Close 将使用任何配置的 jQuery 效果以可视方式关闭对话框并触发任何必要的事件处理程序。 Destroy 实际上会从 DOM 中删除样式和事件处理程序（而不使用它们）。

编辑：这是一个jsfiddle，供您首先检查向表添加行的代码是否按预期工作。它对我有用，所以看看： http://jsfiddle.net/BenSwayne/ADsxU/

可以您在 $( "# paymentplantable table tbody" ).append( data ); 上设置断点
在你的成功处理程序中？这将帮助您检查返回的数据是否采用您想要的格式。（它是“xml”并且不包含在数据对象内的属性内吗？）