एक div की सामग्री तक पहुँचने जब उस सामग्री को एक अजाक्स कॉल से आया है समस्या

वोट
0

यहाँ एक बहुत ही सरल प्रोटोटाइप उदाहरण है।

सभी यह होता है खिड़की लोड, एक ajax कॉल जो एक div में कुछ html चिपक पर, है।

<html>
    <head>
        <script type=text/javascript src=scriptaculous/lib/prototype.js></script>
        <script type=text/javascript>
            Event.observe(window, 'load', function(){
                new Ajax.Request('get-table.php', {
                    method:  'get',
                    onSuccess:  function(response){
                        $('content').innerHTML = response.responseText;
                        //At this call, the div has HTML in it
                        click1();
                    },
                    onFailure:  function(){
                        alert('Fail!');
                    }
                });
                //At this call, the div is empty
                click1();
            });

            function click1(){if($('content').innerHTML){alert('Found content');}else{alert('Empty div');}}
        </script>
    </head>
    <body><div id=content></div></body>
</html>

बात यह है कि भ्रामक है संदर्भ प्रोटोटाइप समझता है, जिसमें div वास्तव में यह में सामान होता है।

आप ajax कॉल के onSuccess भाग को देखें, तो आप उस बिंदु $ ( 'सामग्री') पर है कि देखेंगे। innerHTML उस में सामान है।

लेकिन जब मैं ajax कॉल के बाद $ ( 'सामग्री')। InnerHTML सही जाँच, यह खाली प्रतीत होता है।

यह मेरी ओर से कुछ मौलिक गलतफहमी हो गया है। किसी को भी मेरे लिए यह समझाने के लिए परवाह?


संपादित करें
मैं सिर्फ कुछ स्पष्ट करना चाहते हैं। मुझे लगता है कि अजाक्स कॉल अतुल्यकालिक है।

यहाँ वास्तविक आदेश है कि चीजें निष्पादित किया जा रहा है और यही कारण है कि यह मेरे लिए भ्रामक है:

  1. पृष्ठ लोड।
  2. Ajax अनुरोध मिल-table.php किया जाता है।
  3. click1 करने के लिए कॉल () अंदर onSuccess होता है। मैं एक चेतावनी है कि div सामग्री है देखते हैं।
  4. कॉल click1 करने के लिए () अजाक्स कॉल के बाद होता है। मैं एक चेतावनी है कि div खाली है देखते हैं।

तो यह कोड की तरह है ताकि इसे लिखा है में क्रियान्वित किया जाता है लेकिन डोम उसी क्रम में अपडेट नहीं हो रहा है।


संपादित 2 तो संक्षिप्त उत्तर है कि onSuccess में कोड डाल सही जगह है।

एक और मामले पर विचार करने के लिए एक है जहाँ आप एक अजाक्स कॉल करते हैं और उसके बाद इस तरह पहली कॉल की onSuccess से दूसरे अजाक्स कॉल करते हैं:

new Ajax.Request('foo.php',{
  method:  'get',
  onSuccess:  function(response){
    doAnotherAjaxCall();
  }
  });

function doAnotherAjaxCall(){
  new Ajax.Request('foo.php',{
    method:  'get',
    onSuccess:  function(response){
      //Anything that needs to happen AFTER the call to doAnotherAjaxCall() above
      //needs to happen here!
    }
  });
}

});

16/09/2008 को 17:04
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


4 जवाब

वोट
5

AJAX के पहले अक्षर "अतुल्यकालिक" के लिए खड़ा है। इसका मतलब यह है कि AJAX कॉल, यानी AJAX अनुरोध कॉल पृष्ठभूमि में किया जाता है तुरंत वापस लौट । इसका मतलब है कि कोड के तुरंत बाद यह सामान्य रूप से वास्तव में क्रियान्वित किया जाता है इससे पहले कि onSuccess हैंडलर कहा जाता हो जाता है (और इससे पहले कि AJAX अनुरोध भी समाप्त होता है)।

खाते में अपने संपादित सवाल उठाते हुए: कुछ ब्राउज़रों (जैसे फ़ायरफ़ॉक्स) में, चेतावनी बक्से के रूप में मॉडल के रूप में आप सोच सकते हैं नहीं कर रहे हैं। अतुल्यकालिक कोड एक चेतावनी बॉक्स पॉप अप कर सकते हैं, भले ही एक दूसरे को पहले से ही खुला है। उस मामले में, नए चेतावनी बॉक्स (अतुल्यकालिक कोड से एक) पुराने एक के शीर्ष पर प्रदर्शित किया जाता है। यह भ्रम है कि अतुल्यकालिक कोड पहले मार डाला गया बनाता है।

16/09/2008 को 17:08
का स्रोत उपयोगकर्ता

वोट
0

अपने कोड की कोशिश की बिना: AJAX कॉल एसिंक्रोनस रूप से निष्पादित किया जाता है। अपने Ajax.Request आग है कि मतलब है, तो click1 () कॉल जो आपको बताता है div खाली है पर चला जाता है। के बाद कि Ajax अनुरोध समाप्त हो गया है और सामग्री वास्तव में div में डाल दिया है कुछ बिंदु पर। इस बिंदु पर onSuccess समारोह निष्पादित किया जाता है और आप सामग्री आप की उम्मीद हो।

16/09/2008 को 17:09
का स्रोत उपयोगकर्ता

वोट
0

यह अजाक्स कॉल, जो अतुल्यकालिक है। इसका मतलब है कि सही होने के बाद उस अनुरोध कॉल, प्रतिक्रिया वापस अभी तक नहीं आया है, क्यों $ ( 'सामग्री') अभी भी रिक्त है कि है।

16/09/2008 को 17:11
का स्रोत उपयोगकर्ता

वोट
0

समारोह के onSuccess तत्व कहते हैं आप AJAX कॉल बार जब आप get-table.php से कोई जवाब पर निष्पादित किया जाता है संभाल करने के लिए कर रहे हैं। यह एक अलग जावास्क्रिप्ट समारोह जो आप कह रहे हैं ब्राउज़र कॉल करने के लिए जब आप get-table.php से एक जवाब मिलता है। अपने Ajax.Request कॉल नीचे कोड जैसे ही Ajax.Request कॉल किया जाता है पहुँचा जा सकता है, लेकिन जरूरी नहीं कि पहले नहीं मिल-table.php कहा जाता है। तो हाँ मुझे लगता है कि कैसे AJAX के कारण विवरणों को छिपाना एक पुस्तकालय का उपयोग करने के काम करता है, संभावना का एक मूलभूत गलतफहमी का एक सा है।

16/09/2008 को 17:31
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more