JQuery callback and return to the first call?

Question

I for this function to load an external page. Page URL grab from DIV id.

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

The page loaded, got a datatable so I added it to the callback.

$('.datatable').dataTable( {

Inside the datatable, I got an editor button, so I used the datatable callback function to call the editor without page refresh:

"fnDrawCallback": function(){

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

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

On this stange, content editor was loaded using the same way I used to load the page containing the datatable. (Page URL passed on the button ID).

I got stuck now. On this editor, I need submit the form, I want it submitted using jquery load so the page don't get refreshed, after the form is submitted, I want send the surfer back to the datatable page (the one that was first loaded when the page was loaded). And I will perform the action necessary to update the edited content. Any help? Thanks.

Im using datatable server side ajax load. That is why I used the callback.

    $(".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
                        });
                    });
                });
            }});
        });

gilly3 · Accepted Answer · 2011-09-24T00:16:50.290

To submit the form, use $.post() along with $(form).serialize(). Then, in the success handler of $.post(), use .load() again.

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

Or, if the content returned from submitting the form is the html you want to display in .contentArea, you can save yourself the extra call to .load() by just using the returned html in .contentArea:

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

Edit: Create functions to handle the different tasks. By the way, don't use id to store the url. Create a custom attribute... maybe 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();

I've broken it down into perhaps too many individual functions, but the point is just not to over-use anonymous functions, especially when you want to re-use functionality.

If I use load again on a new div, I loose all the callbacks. contentArea -> callback datatable -> callback editor. If I post, the post gonna be defined inside the editor call back, and than, a new load inside the editor callback. But If I do that I will loose all the datatable callback. Seems Im digging into an infinity callback. How can I set the surfer back to the first callback? — Henrique, Sep 23 '11 at 23:46
Thanks, I will play with that, just realized I can accomplish what I need writing a function to avoid code repetition. — Henrique, Sep 23 '11 at 23:59

JQuery callback and return to the first call?

1 Answers1