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.");
                            });

它的工作原理是我正在获取我的数据,但是当我将表格行附加到现有表格时,单元格格式错误。如果我用萤火虫检查 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' );
                    }
                }
            }); 
        });
    }
4

1 回答 1

0

在萤火虫中检查时,数据不能在结构上正确且格式不正确。例如,您可能一直在检查所有开始标签是否都有匹配的结束标签,所有<td>s 实际上都在 a 内<tr>,等等...但是您是否检查了返回的表行与它的表具有相同的列数被附加到?在 ajax 附加行之前,是否有任何样式应用于表?(例如:一个 jQuery 网格,它添加了一堆 CSS 类以使表格更漂亮)。如果这不能帮助您立即获得它,请在附加行之前和之后从 firebug 中复制表格 html,并将代码作为编辑发布在您的问题中。

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

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

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

于 2011-11-28T20:45:48.143 回答