Обновить строку в WebGrid с помощью JQuery - PullRequest
Новая
       21

Обновить строку в WebGrid с помощью JQuery

0 голосов
/ 24 августа 2011

НАЙТИ ПРОБЛЕМУ: Просто нужно заменить row.replaceWith на row.parent().parent().replaceWith().

Я пытаюсь обновить строку WebGrid с помощью JQuery после того, как я нажал кнопку отправки в модальном режиме.диалоговое окно, но обновленные данные просто добавляют последний столбец, а не всю строку, как я хочу.

Допустим, я хочу, чтобы таблица выглядела так после обновления: 

ID - Name - Phone number

Нос моим кодом это выглядит после обновления: 

ID - Name - ID - Name - Phone number

, поскольку он просто заменяет последний столбец новой таблицей в последнем столбце обновленными данными.

Я получаюправильные данные в качестве вывода, но в неправильном месте в строке.

Пожалуйста, помогите!:)

Вот код Javascript: 

$(function () {
    $("#edit-event-dialog").dialog({
        resizable: false,
        height: 300,
        modal: true,
        autoOpen: false,
        open: function (event, ui) {
            var objectid = $(this).data('id');
            $('#edit-event-dialog').load("/Events/CreateEditPartial", { id: objectid });
        },
        buttons: {
            "Save": function () {
                var ai = {
                    EventID: $(this).data('id'),
                    Name: $("#Name").val(),
                    Phone: $("#Phone").val()
                };
                var json = $.toJSON(ai);
                var row = $(this).data('row');

                $.ajax({
                    url: $(this).data('url'),
                    type: 'POST',
                    dataType: 'json',
                    data: json,
                    contentType: 'application/json; charset=utf-8',
                    success: function (data) {
                        var grid = $(".pretty-table");
                        row.replaceWith('<tr><td>' + data.ev.EventID + '</td><td>' +
                        data.ev.Name + '</td><td>' + data.ev.Phone + '</td></tr>');
                    },
                    error: function (data) {
                        var data = data;
                        alert("Error");
                    }
                });
                $(this).dialog("close");
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });

    $("#event-edit-btn").live("click", function () {
        var url = $(this).attr('controller');
        var row = $(this);
        var id = $(this).attr('objectid');

        $("#edit-event-dialog")
            .data('id', id)
            .data('url', url)
            .data('row', row)
            .dialog('open');

        event.stopPropagation();
        return true;
    });

1 Ответ

1 голос
/ 24 августа 2011

Вы установили row на $(this), что соответствует вашему случаю $("#event-edit-btn") (кстати, я предлагаю использовать классы в качестве идентификаторов, но это не проблема). Позже вы замените свою фактическую кнопку новым набором <tr>, но на самом деле вам нужно перейти к tr родительскому элементу этой кнопки и заменить его.

Измените ваш живой обработчик на: 

$("#event-edit-btn").live("click", function () {

       var url = $(this).attr('controller');
       var row = $(this).closest('tr'); //or use some #id or .class assigned to that element
       var id = $(this).attr('objectid');

       $("#edit-event-dialog")
           .data('id', id)
           .data('url', url)
           .data('row', row )
           .dialog('open');

       event.stopPropagation();
       return true;


});
...