Обратный вызов JQuery и возврат к первому вызову? - PullRequest
Новая
       19

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

2 голосов
/ 24 сентября 2011

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

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

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

$('.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 Ответ

1 голос
/ 24 сентября 2011

Чтобы отправить форму, используйте $.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();

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

...