JQuery 回调并返回第一次调用？

Question

我用这个函数来加载外部页面。从 DIV id 获取页面 URL。

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

页面已加载，获得了数据表，因此我将其添加到回调中。

$('.datatable').dataTable( {

在数据表内部，我有一个编辑器按钮，因此我使用数据表回调函数来调用编辑器，而无需刷新页面:

"fnDrawCallback": function(){

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

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

在这个阶段，内容编辑器的加载方式与我加载包含数据表的页面的方式相同。 (通过按钮 ID 传递的页面 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
                          });
                      });
                  });
              }});
          });  
  

Answer 1

要提交表单，请使用 $.post()以及$(form).serialize() 。然后，在 $.post() 的成功处理程序中，再次使用 .load()。

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

或者，如果提交表单返回的内容是您想要在 .contentArea 中显示的 html，您可以省去对 .load() 的额外调用只需使用 .contentArea 中返回的 html:

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

我将其分解为可能太多的单独函数，但重点是不要过度使用匿名函数，尤其是当您想要重用功能时。