Перезагрузка jqGrid из пользовательского editFunc не работает

Question

У меня есть код для jqGrid с пользовательским «editFunc», который открывает мою собственную панель jQuery-UI для редактирования данных.

Сохраняет данные без проблем, но я не могу автоматически обновить jqGrid новыми данными, используя "$ (" # blog-posts "). Trigger (" reloadGrid ");"Это не работает от "editFunc".Код ниже.Не уверен, как это исправить.Что я здесь не так делаю?

Другой способ, о котором я подумал, - не делать полную перезагрузку jqGrid, а обновлять только отредактированные данные.Как обновить успешно отредактированную строку jqGrid с успешно измененными данными записи «вручную» из editFunc, без перезагрузки всех записей?

Вот моя конфигурация jqGrid:

<table id="blog-posts">
</table>
<div id="blog-posts-nav">
</div>
<div id="edit-blog-post">
</div>
<script type="text/javascript">

    function wireUpForm(dialog, updateTargetId, updateUrl) {
        $('form', dialog).submit(function () {
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    // Check whether the post was successful
                    if (result.success) {
                        // Close the dialog
                        $(dialog).dialog('close');
                        // reload doesn't work if called from here
                        $("#blog-posts").trigger("reloadGrid");
                    } else {
                        // Reload the dialog to show model errors
                        $(dialog).html(result);
                        // Setup the ajax submit logic
                        wireUpForm(dialog, updateTargetId, updateUrl);
                    }
                }
            });
            return false;
        });
    }

    $('#blog-posts').jqGrid({
        url: 'http://localhost:24533/Admin/BlogPosts',
        datatype: "json",
        colModel: [
        { name: 'id', index: 'id', label: 'Post ID', width: 55 },
        { name: 'enabled', index: 'enabled', label: 'Enabled', width: 60, editable: true, edittype: "checkbox", editoptions: { value: "Yes:No"} },
        { name: 'slug', index: 'slug', label: 'Slug', width: 300, editable: true, editoptions: { style: "width:300px;"} },
        { name: 'header', index: 'header', label: 'Header', width: 300, editable: true },
        { name: 'HtmlTitle', index: 'HtmlTitle', label: 'HTML Title', width: 300, editable: true },
        {name: 'created', index: 'created', label: 'Created', width: 100, editable: true },
        { name: 'lastUpdate', index: 'lastUpdate', label: 'Last Update', width: 100 }
    ],
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: '#blog-posts-nav',
        sortname: 'id',
        viewrecords: true,
        sortorder: "desc",
        caption: "Blog Posts",
        height: 210,
    });
    $('#blog-posts').jqGrid('navGrid', '#blog-posts-nav',
        {
           editfunc: function (rowid) {
                var element = $(this);
                // Retrieve values from the HTML5 data attributes of the link
                var dialogId = '#edit-blog-post';
                var dialogTitle = 'Dialog Title';
                var updateTargetId = '#container-to-update';
                var updateUrl = 'http://localhost:24533/Admin/BlogPostEdit/';
                // Load the form into the dialog div
                $(dialogId).load('http://localhost:24533/Admin/BlogPostEdit?id=' + rowid, function () {
                    $(this).dialog({
                        modal: false,
                        resizable: true,
                        minWidth: 650,
                        minHeight: 300,
                        height: $(window).height() * 0.95,
                        title: dialogTitle,
                        buttons: {
                            "Save": function () {
                                // Manually submit the form
                                var form = $('form', this);
                                //alert('1');
                                $(form).submit();
                                $("#blog-posts").trigger("reloadGrid");
                                //alert('2');
                            },
                            "Cancel": function () {
                                //alert($("#blog-posts"));
                                //$("#blog-posts").trigger("reloadGrid");
                                //alert($("#blog-posts").getCell(2,2));
                                //alert($("#blog-posts").getGridParam('caption'));
                                $("#blog-posts").trigger("reloadGrid");
                                //alert(element.serialize());
                                //element.trigger("reloadGrid");
                                //alert(element.attr('id'));
                                //$(this).dialog('close');
                            }
                        }
                    });

                    wireUpForm(this, updateTargetId, updateUrl);
                });

                return false;
            },

        { height: 280, reloadAfterSubmit: true }, // edit options
        {width: 600, reloadAfterSubmit: true, top: 100, left: 300, addCaption: 'Add Blog Post' }, // add options
        {reloadAfterSubmit: true }, // del options
        {} // search options
    );


    $('.wysiwyg').livequery(function () {
        $(this).wysiwyg();
    });

</script>

ОБНОВЛЕНИЕ: Проблемная строка кода:

 $(dialogId).load('http://localhost:24533/Admin/BlogPostEdit?id=' + rowid, function () {

После того, как вы выполните jQuery.load() программный вызов привязки перезагрузки jqGrid trigger("reloadGrid") больше не работает.Единственный способ перезагрузить данные, которые работают после того, как вы выполните jQuery.load(), - это кнопка перезагрузки на панели инструментов.Я до сих пор не знаю, как это исправить.

UPDATE2 (решение): Проблема была в HTML, возвращенном из jQuery.ajax (), это была полная HTML-страница с заголовком HTML итеги тела.После того, как сторона сервера начала возвращать, только форма jqGrid перезагрузка начала работать.

Answer 1

Я думаю, что проблема существует, потому что вы используете $(form).submit(). Что вы, вероятно, хотите сделать, это отправить данные из формы на сервер и обновить данные в сетке после того, как сервер обработал отправку формы .

$(form).submit() будет использоваться в том случае, если ваша страница состоит в основном из формы. В случае, если вы предоставите данные и страница будет обновлена ​​. Что вы, вероятно, действительно хотите сделать, вы можете реализовать в отношении $. Ajax с параметром type: 'POST' или в упрощенном виде $. Post . Вы можете установить обработчик события submit (или обработчик click, если вы переименуете тип кнопки), а внутри обработчика вы можете отправлять данные на сервер за $.ajax вручную. В этом случае вы можете использовать обработчик success для перезагрузки сетки. Внутри обработчика событий submit вы можете получить данные формы с помощью $ (form) .serialize () , и вы должны вернуть false, чтобы предотвратить стандартную отправку формы. См. здесь пример. Не забудьте указать атрибут name для всех полей формы, которую вы хотите отправить на сервер (см. здесь ).

Я не знаю точно, какое отношение имеет форма к данным сетки, но у вас есть еще один возможный вариант - использовать параметр postData в jqGrid. См. здесь для получения более подробной информации.