2010-06-15 66 views
0

我正在使用ajax通過循環插入一系列信息塊。每個塊都有一個標題,並在其中默認隱藏長描述。它們像手風琴一樣運作,只在所有的區塊中一次顯示一個描述。操縱由Ajax插入的內容,而不使用回調

問題是打開第一個塊的描述。我真的想用 javascript來完成這個工作。是否有可能操縱 創建ajax調用而不使用回調的元素?

<!-- example code--> 
<style> 
    .placeholder, .long_description{ 
    display:none;} 
</style> 
</head><body> 
<script> /* yes, this script is in the body, dont know if it matters */ 
$(document).ready(function() { 
    $(".placeholder").each(function(){ // Use the divs to get the blocks 
     var blockname = $(this).html(); // the contents if the div is the ID for the ajax POST 
     $.post("/service_app/dyn_block",'form='+blockname, function(data){ 
      var divname = '#div_' + blockname; 
      $(divname).after(data); 
      $(this).setupAccrdFnctly(); //not the actual code 
     }); 
    }); 

    /* THIS LINE IS THE PROBLEM LINE, is it possible to reference the code ajax inserted */ 
    /* Display the long description in the first dyn_block */ 
    $(".dyn_block").first().find(".long_description").addClass('active').slideDown('fast'); 
}); 
</script> 
<!-- These lines are generated by PHP --> 
<!-- It is POSSIBLE to display the dyn_blocks --> 
<!-- here but I would really rather not --> 
<div id="div_servicetype" class="placeholder">servicetype</div>  
<div id="div_custtype" class="placeholder">custtype</div>   
<div id="div_custinfo" class="placeholder">custinfo</div>   
<div id="div_businfo" class="placeholder">businfo</div> 
</body> 
+0

你必須使用回調...這是ap rime的例子,爲什麼它在那裏:) – 2010-06-15 00:27:04

回答

0

的問題是,隨着AJAX是asynchronus(默認)

$(".dyn_block").first().find(".long_description").addClass('active').slideDown('fast'); 

之前有任何數據都將執行。所以你不能避免回調。

代替投票。如果你想了slideDown第一個當所有的處理完成後,你可以定義下面的函數

var amount = $(".placeholder").size(); 
function ajaxDone() { 
amount--: 
if(amount == 0) { 
    $(".dyn_block").first().find(".long_description").addClass('active').slideDown('fast'); 
} 
} 

所以劇本是這樣的

<script> /* yes, this script is in the body, dont know if it matters */ 

    var amount = $(".placeholder").size(); 
    function ajaxDone() { 
     amount--: 
     if(amount == 0) { 
     $(".dyn_block").first().find(".long_description").addClass('active').slideDown('fast'); 
     } 
    } 


     $(document).ready(function() { 
      $(".placeholder").each(function(){ // Use the divs to get the blocks 
       var blockname = $(this).html(); // the contents if the div is the ID for the ajax POST 
       $.post("/service_app/dyn_block",'form='+blockname, function(data){ 
        var divname = '#div_' + blockname; 
        $(divname).after(data); 
        $(this).setupAccrdFnctly(); //not the actual code 
       }); 
      }); 

      /* THIS LINE IS THE PROBLEM LINE, is it possible to reference the code ajax inserted */ 
      /* Display the long description in the first dyn_block */ 

     }); 
     </script> 

編輯:關於你對不知道羯羊它的問題還是不知道你對HTML JavaScript註釋,檢查this SO question

尼克建議有更好的方法來實現相同的事情(而不是使用ajaxDone函數)

$(document).ajaxStop(function() { 
    $(".dyn_block").first().find(".long_description").addClass('active').slideDown('fast'); 
    $(this).unbind('ajaxStop'); 
}); 
+0

有一個*多*更簡單的方式來做到這一點:)像這樣:'$(文件).ajaxStop(函數(){$( 「dyn_block:第一.long_description」。)addClass( '主動')了slideDown(」快'); $(this).unbind('ajaxStop');});' – 2010-06-15 00:48:53

+0

你是對的!感謝您指出,我將編輯答案 – Lombo 2010-06-15 00:52:16

+0

$(文檔).ajaxStop像冠軍一樣工作!非常感謝你們! – Cody 2010-06-15 15:11:42

0

AJAX的本質是「異步」。這意味着在異步請求發出後執行繼續快樂;在AJAX調用完成之前,您希望存在的內容將不會存在。所以當你嘗試訪問內容時,你不會得到任何東西。

當你需要使用回調,因爲當操作完成,你永遠無法知道異步操作處理。我不確定爲什麼你反對使用回調 - 這就是它的原因 - 幫助你處理異步操作。

編輯

如果你async屬性設置爲false您可以SJAX(同步JAX)。因此,可以按照您的建議進行操作,但是在請求完成之前您將鎖定瀏覽器。

+0

更正在這裏,它*是*可能的。你甚至可以鎖定瀏覽器,這正是'async:false;'所做的。 – 2010-06-15 00:31:24

+0

@Nick Craver確實如此。忘了那個。我很少打擾'async:false'。將編輯修復。 – 2010-06-15 00:32:16