किसी अन्य फ़ंक्शन को कॉल करने से पहले div से लोड करने के लिए कैसे प्रतीक्षा करें?

Question

<script> 
var href; 

    $(function(){ 
     $("a.load").click(function (e) { 
      e.preventDefault(); 
      href = this; 

      // cover all bookmarks 
      $("."+($(this).attr("class"))).css('border-bottom', 'solid 1px black'); 
      $("."+($(this).attr("class"))).css('background-color', '#F5F5F5'); 

      // uncover chosen bookmark 
      $("#"+($(this).attr("id"))).css('border-bottom', 'solid 2px white'); 
      $("#"+($(this).attr("id"))).css('background-color', 'white'); 

      $("#tempMain").load($(this).attr("href")); // load content to temp div 

      setTimeout(function() {resizeDivs();}, 500); // synchronize size of #main and #rightColumn 
     }); 

    }); 

    function resizeDivs() { 
     var heightNew = $("#tempMain").css("height"); 
     $("#rightColumn").css('height',heightNew); 
     $("#main").css('height',heightNew); 
     // $('#main').load($(href).attr('href')); 
     $("#main").html($("#tempMain").html()); // is faster than loading again 
    } 
</script> 

मैं एक jQuery फ़ंक्शन द्वारा अपने मुख्य पृष्ठ के किसी चयनित div में उपपृष्ठ लोड कर रहा हूं। मुख्य div और दाएं स्तंभ की ऊंचाई को सिंक्रनाइज़ करने के लिए मैं jQuery की .css() विधि का उपयोग कर रहा हूं। मैं चाहता था कि आसानी से दिखने का आकार बदल रहा हो, इसलिए मैंने इसे निम्नलिखित चरणों का पालन करने के लिए हल किया है:
1. एक अदृश्य टेम्पल div में उपपृष्ठ की सामग्री लोड करें।
2. उस temp div की ऊंचाई की गणना करें।
3. उस divp div की ऊंचाई पर मुख्य div और दाएं कॉलम की ऊंचाई बदलें।
4. मुख्य उप से उपपृष्ठ की सामग्री लोड करें। मैं $(document).ready उपयोग करने की कोशिश, लेकिन कोई भाग्य के साथ किया है -

हालांकि, मुझे पता है कि मेरी यह कर की वर्तमान रास्ता बहुत क्योंकि लोड करने के लिए सामग्री के लिए इंतजार का एक कामचलाऊ व्यवस्था के रूप में setTimeout() का उपयोग करने का लंगड़ा कर रहा हूँ। एक वैश्विक चर (var href) का उपयोग करने से लीज आर्टिस भी प्रतीत नहीं होता है, लेकिन this$("a.load").click के apply() द्वारा संचालित कार्यकर्ता या तो काम नहीं करता है।

इसे "सही" तरीका कैसे करें?

Answer 1

लोड का प्रयोग करें कॉलबैक

$("#tempMain").load($(this).attr("href"),function(){ 
    resizeDivs(); 
    // do other stuff load is completed 
}); 

Answer 2

आप jQuery load समारोह में एक कॉलबैक संलग्न कर सकते हैं:

$("#tempMain").load($(this).attr("href"), resizeDivs); 

देखें: http://api.jquery.com/load/

Answer 3

jQuery के साथ

function waitForElement(elementPath, callBack){ 
    window.setTimeout(function(){ 
    if($(elementPath).length){ 
     callBack(elementPath, $(elementPath)); 
    }else{ 
     waitForElement(elementPath, callBack); 
    } 
    },500) 
} 

उदा। उपयोग करने के लिए:

waitForElement("#myDiv",function(){ 
    console.log("done"); 
}); 

यहाँ jQuery

function waitForElement(elementId, callBack){ 
    window.setTimeout(function(){ 
    var element = document.getElementById(elementId); 
    if(element){ 
     callBack(elementId, element); 
    }else{ 
     waitForElement(elementId, callBack); 
    } 
    },500) 
} 

जैसे बिना है उपयोग करने के लिए:

waitForElement("yourId",function(){ 
    console.log("done"); 
}); 

की