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
                          });
                      });
                  });
              }});
          });  
  

Answer 1

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.