Jquery post () - невозможно добавить возвращаемые данные - PullRequest
0 голосов
/ 29 ноября 2011

Я впервые использую 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, я не уверен, что он ligal, потому что я видел только 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 с помощью firebug, таблица является структурно правильной, однако она не отображается в виде правильной строки таблицы, все данные «сжаты» влево.

Затем я подумал, что HTML-код передается неправильно, поэтому я использовал метод jquery html () следующим образом

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

где 'mydivwrapper' - это div, помещенный вокруг tr, который также входит через возвращаемые «данные». Это тоже была плохая идея.

Пожалуйста, помогите.

EDIT:

Я немного изменил свой сценарий. Вот это

                        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' );
                    }
                }
            }); 
        });
    }

1 Ответ

0 голосов
/ 29 ноября 2011

Данные не могут быть как структурно правильными при проверке в firebug, так и быть искаженными.Например, вы, возможно, проверяли, что все открывающие теги имеют закрывающие теги, которые совпадают, что все <td> на самом деле находятся внутри <tr> и т. Д. ... но вы проверяли, что строка возвращенной таблицы имеет одинаковое числостолбцов в качестве таблицы, к которой он добавляется?Существуют ли какие-либо стили, применяемые к таблице до того, как ajax добавляет ее в строки?(например: сетка jQuery, где она добавляет кучу классов CSS, чтобы сделать таблицу красивой).Если это не поможет вам сразу, скопируйте html таблицы из firebug до и после добавления строки и опубликуйте код в своем вопросе в качестве правки.

Также вы можете позвонить.dialog ('close') перед уничтожением (или даже вместо уничтожения в зависимости от того, планируете ли вы снова использовать диалог позже).Close закроет диалог, используя любые настроенные эффекты jQuery и запустив все необходимые обработчики событий.Destroy фактически удалит стили и обработчики событий из DOM (без их использования).

РЕДАКТИРОВАТЬ: Вот jsfiddle для вас, чтобы сначала проверить, что ваш код, который добавляет строки в таблицу, работает какожидается.Это работает для меня, так что посмотрите: http://jsfiddle.net/BenSwayne/ADsxU/

Можете ли вы установить точку останова на $( "#paymentplantable table tbody" ).append( data ); в вашем обработчике успеха?Это поможет вам убедиться, что данные возвращаются в том формате, который вы хотите.(Это "xml" и не содержится внутри свойства внутри объекта данных?)

...