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回調遇到問題

回答

相關問題