jquery回调遇到问题

我在html中有一个手风琴，头文件onclick调用函数initTable。jquery回调遇到问题

<script type="text/javascript"> 
    $(document).ready(function() 
    { 
    $('.accordion ul li h1').click(function() 
    {     
     document.getElementById('processing').innerHTML = "Processing..."; 
     document.body.style.cursor = 'Wait'; 
     $(this).parent().parent().find('.ac:visible').slideToggle().parent().removeClass('active'); 

     if ($(this).next().is(':hidden')) 
     { 
     $(this).next().slideToggle().parent().addClass('active'); 
     } 
    }); 
    }); 
    </script> 
</head> 
<body> 
    <div id=processing></div> 
    <div class="wrapper"> 
    <div class="accordion"> 
     <ul> 
     <li> 
      <h1 onclick=initTable("Anticoag")>Anticoag</h1> 
      <div class="ac"> 
      <div id="AnticoagTable" width="100%">Loading...</div> 
      </div> 
     </li>

initTable命中服务器以获取数据并创建一个DataTable，这需要几秒钟的时间。

我想要做的是在发生initTable调用之前，将我的div id ='processing'设置为“正在处理...”。

眼下发生的事情是，它等待表数据回来，那显示“正在处理......”

我试图改变我的H1到的onclick = TEST1（类别），与此代码。但由于某种原因，我的initTable函数甚至没有被调用。不知道它是语法还是我完全错误地使用它。

function test1(category) 
{ 
    test2(category, function() 
    { 
    initTable(category); 
    }); 
} 

function test2(category) 
{ 
    alert("test2"); 
    document.getElementById('processing').innerHTML = "Processing..."; 
    document.body.style.cursor = 'Wait'; 
}

通过请求加入initTable功能功能initTable（类别）{ 如果（gsCategory === “”）gsCategory =类别; else if（gsCategory == category）gbToggle =！gbToggle; else gbToggle = false;

gsCategory = category; 

    if (gbToggle === false) { 
     gsCategory = category; 

     var select = document.forms[0].selFacility; 
     var facility = select.options[select.selectedIndex].value; 

     var patJson = getJson(facility, category); 
     document.getElementById('processing').innerHTML = "Done..."; 
     document.body.style.cursor = 'Default'; 
     var anOpen = []; 
     var sImageUrl = "../images/"; 
     makeTable(category); 

     var oTable = $('#' + category).dataTable({ 
      "bProcessing": false, 
       "bDestroy": true, 
       "aaData": patJson, 
       "bAutoWidth": false, 
       "aoColumns": [{ 
       "mDataProp": null, 
        "sClass": "control center", 
        "sDefaultContent": '<img src="' + sImageUrl + 'details_open.png' + '">', 
        "sWidth": "5%" 
      }, { 
       "mDataProp": "S_PAT_NAME", 
        "sWidth": "30%" 
      }, { 
       "mDataProp": "S_AGE", 
        "sWidth": "15%" 
      }, { 
       "mDataProp": "S_FIN", 
        "sWidth": "30%" 
      }, { 
       "mDataProp": "S_ROOM_BED", 
        "sWidth": "20%" 
      }] 
     }); 

     $('#' + category + ' td.control').live('click', function() { 
      var nTr = this.parentNode; 
      var i = $.inArray(nTr, anOpen); 

      if (i === -1) { 
       $('img', this).attr('src', sImageUrl + "details_close.png"); 
       var nDetailsRow = oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details'); 
       $('div.innerDetails', nDetailsRow).slideDown(); 
       anOpen.push(nTr); 
      } else { 
       $('img', this).attr('src', sImageUrl + "details_open.png"); 
       $('div.innerDetails', $(nTr).next()[0]).slideUp(function() { 
        oTable.fnClose(nTr); 
        anOpen.splice(i, 1); 
       }); 
      } 
     }); 
    } //gbToggle = false 
}

来源

2013-02-10 southfanning

你的'initTable'函数是什么样的？ – YoannM 2013-02-10 20:11:37

您的initTable(category)永远不会被调用。

test2应该是：

function test2(category,cb){ 
    alert("test2"); 
    document.getElementById('processing').innerHTML = "Processing..."; 
    document.body.style.cursor = 'Wait'; 
    //Calling the call-back 
    cb(category); 
}

这对你的实际代码。但是你可以简单地在你test1

function test1(category) 
{ 
    test2(category); 

    //asynchronous call to initTable(). 
    setTimeout(function(){ 
     initTable(category); 
    },0); 
}

来源

2013-02-10 19:41:57 YoannM

不幸的是，直到initTable回来之后，它仍然没有改变div。它可能与文档中的代码有关）.ready？我试过以上两个版本。 – southfanning 2013-02-10 20:00:02

把'initTable'call放在'setTimeout'中怎么样？查看我的更新。 – YoannM 2013-02-10 20:46:30

是的！那工作。现在的问题是 - 为什么这会起作用？我可以标记两个正确的答案:)你们两个都帮了很多忙。 – southfanning 2013-02-10 21:10:16

您已经分配的功能，点击使用jQuery做，你不需要和不应该使用onclick属性

只要把initTable呼的一下里面处理函数。为了识别被点击你可以使用data-something属性

$(document).ready(function() { 
    $('.accordion ul li h1').click(function() { 
    var category = $(this).attr('data-category'); 

    $('#processing')..text("Processing..."); 
    ... 
    initTable(category); 



<h1 data-category="Anticoag">Anticoag</h1>

您还需要：

知道，在JavaScript是不正确的把{在新线
得到一些理解当你将内联函数传递给其他函数时发生了什么，因为你做了

test2（category，function（） { initTable（category）; }）;

而你甚至没有在test2函数定义中声明第二个参数。

来源

2013-02-10 19:47:21 naugtur

对不起，{习惯改变我的功能和h1标签，正如你所建议的那样，它将div设置为“Processing”，但仍然只有在initTable已经返回之后才能回复 – southfanning 2013-02-10 20:22:02

，在某些情况下它不会正确地工作:) 看着你的代码更新，我看到你正在同步下载数据，我只是没有想到。如果你使用jQuery的anywat，只需使用它来获取数据。在你当前的情况下，在显示'processing ...'的部分之后移动initTable调用。更新我的答案 – naugtur 2013-02-10 20:34:34

我必须调用getJson中的某些专有功能。 getJson调用一个数据库查询脚本（专有部分），它返回我的json字符串。所以很遗憾，我不能直接使用jquery来抓取它。我希望我可以，它会使dataTable更容易使用。 – southfanning 2013-02-10 20:45:50

jquery回调遇到问题

回答

相关问题