Обратный вызов JQuery и возврат к первому вызову?

Я для этой функции загружаю внешнюю страницу. Захват URL страницы из идентификатора DIV.

$(".contentArea").load($('.contentArea').attr('id'), function(){

Страница загружена, получила данные, поэтому я добавил ее к обратному вызову.

$('.datatable').dataTable( {

Внутри datatable я получил кнопку редактора, поэтому я использовал функцию обратного вызова datatable для вызова редактора без обновления страницы:

"fnDrawCallback": function(){

    $(".contentEditor").click(function() {

        $(".contentArea").load($('.contentEditor').attr('id'), function(){

В этом разделе редактор контента загружался так же, как я использовал для загрузки страницы, содержащей данные. (URL страницы передается по идентификатору кнопки).

Я застрял сейчас. В этом редакторе мне нужно отправить форму, я хочу, чтобы она была отправлена ​​с использованием jquery load, чтобы страница не обновлялась, после отправки формы я хочу отправить серфера обратно на страницу с данными (ту, которая была впервые загружена при страница была загружена). И я выполню действие, необходимое для обновления отредактированного контента. Любая помощь? Благодарю.

  • Я использую датированную серверную загрузку ajax. Вот почему я использовал обратный вызов.

        $(".contentArea").load($('.contentArea').attr('id'), function(){
        $('.datatable').dataTable( {
            "bJQueryUI": true,
            "sScrollX": "",
            "bSortClasses": false,
            "aaSorting": [[0,'asc']],
            "bAutoWidth": true,
            "bInfo": true,
            "sScrollY": "100%", 
            "sScrollX": "100%",
            "bScrollCollapse": true,
            "sPaginationType": "full_numbers",
            "bRetrieve": true,
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": $('.datatable').attr('id'),
            "fnDrawCallback": function(){
                $(".contentEditor").click(function() {
                    $(".contentArea").load($('.contentEditor').attr('id'), function(){
                        $( "select, input:checkbox, input:radio, input:file").uniform(),
                        $( ".datepicker" ).datepicker({dateFormat: 'yy-mm-dd' }),
                        $("#validation").validationEngine(),
                        $('input[title]').tipsy(),
                        $('textarea.tinymce').tinymce({
                             // Location of TinyMCE script
                            script_url : '../scripts/tinyeditor/tiny_mce.js',

                            // General options
                            theme : "advanced",
                            plugins : "table,advhr,advimage,advlink,inlinepopups,preview,media,paste,fullscreen,visualchars,xhtmlxtras",

                            // Theme options
                            theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,cut,copy,paste,pastetext,pasteword,|,bullist,numlist,|,outdent,indent,blockquote,|,forecolor,backcolor",
                            theme_advanced_buttons2 : "formatselect,fontselect,fontsizeselect,|,removeformat,|,hr,|,undo,redo,|,sub,sup,|,charmap,|,cite",
                            theme_advanced_buttons3 : "tablecontrols,|,link,unlink,anchor,|,image,preview,media,|,cleanup,code,fullscreen",
                            theme_advanced_toolbar_location : "top",
                            theme_advanced_toolbar_align : "left",
                            theme_advanced_statusbar_location : "bottom",
                            theme_advanced_resizing : true
                        });
                    });
                });
            }});
        });
Источник

1 ответ

Решение

Чтобы отправить форму, используйте $.post() вместе с $(form).serialize(), Затем в обработчике успеха $.post() использовать .load() снова.

$.post(url, $("#myForm").serialize(), function(data) {
    $(".contentArea").load(...);
});

Или, если содержимое, возвращаемое при отправке формы, является HTML, который вы хотите отобразить в .contentArea Вы можете сэкономить дополнительный вызов .load() просто используя возвращенный HTML в .contentArea:

$.post(url, $("#myForm").serialize(), function(data) {
    $(".contentArea").html(data);
});

Редактировать: создавать функции для решения различных задач. Кстати, не используйте id хранить URL. Создать собственный атрибут... возможно contentUrl,

var contentArea = $(".contentArea");
function loadContent(url, success) {
    contentArea.load(url, success);
}
function loadDataTable() {
    loadContent(contentArea.attr("contentUrl"), initDataTable);
}
function initDataTable() {
    $(".datatable").dataTable({
        ...,
        fnDrawCallback: bindContentEditor
    });
}
function bindContentEditor() {
    $(".contentEditor").click(contentEditorClick);
}
function contentEditorClick(e) {
    loadContent($(".contentEditor").attr("contentUrl"), initContentEditor);
}
function initContentEditor() {
    ...
    $(".submitBtn").click(postContentEditor);
}
function postContentEditor() {
    $.post("/postUrl", $(".contentArea form").serialize(), loadDataTable);
}
loadDataTable();

Я разбил его на, пожалуй, слишком много отдельных функций, но суть не в том, чтобы чрезмерно использовать анонимные функции, особенно когда вы хотите повторно использовать функциональность.

Источник
Другие вопросы по тегам