مشكلة الوصول إلى محتوى div عند هذا المحتوى من اياكس الاتصال

https://stackoverflow.com/questions/75181

09-06-2019
|

سؤال

هنا هو بسيط جدا النموذج المثال.

كل ما يفعله هو على نافذة تحميل اياكس الاتصال الذي العصي بعض 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 فعلا وقد الاشياء في ذلك.

إذا نظرتم إلى onSuccess جزء من اياكس الاتصال, سترى أن في تلك المرحلة $("المحتوى").innerHTML وقد الاشياء في ذلك.

ومع ذلك عندما تحقق $("المحتوى").innerHTML بعد اياكس الاتصال, يبدو أن تكون فارغة.

هذا يجب أن يكون هناك سوء فهم أساسي من جهتي.أي أن تشرح لي ؟

تحرير
أنا فقط أريد أن أوضح شيئا.وأنا أدرك أن Ajax استدعاء غير متزامن.

وهنا الفعلي من أجل أن الأمور التي أعدم لماذا الأمر محير بالنسبة لي:

تحميل الصفحة.
Ajax طلب get-table.php مصنوع.
الدعوة إلى click1() داخل onSuccess يحدث.أرى تنبيه على أن شعبة قد المحتوى.
الدعوة إلى click1() بعد اياكس الاتصال يحدث.أرى تنبيه أن div فارغة.

لذلك فمن مثل رمز المنفذة في الأمر هو مكتوب ولكن دوم لا يتم تحديثها في نفس الترتيب.

تحرير 2 لذلك الجواب القصير هو أن وضع التعليمات البرمجية في onSuccess هو المكان الصحيح.

حالة أخرى للنظر هو واحد حيث كنت لا Ajax الاتصال ومن ثم القيام آخر اياكس الاتصال من 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!
    }
  });
}

});

المحلول

الحرف الأول من اياكس تقف على "غير المتزامن".وهذا يعني أن المكالمات اياكس تتم في الخلفية ، أيطلب اياكس الاتصال يعود فورا.وهذا يعني أن قانون مباشرة بعد ذلك يتم عادة تنفيذ في الواقع قبل على onSuccess معالج يحصل تسمى (و قبل طلب اياكس حتى انتهى).

مع الأخذ بعين الاعتبار تحرير المسألة:في بعض المتصفحات (مثلفايرفوكس), مربعات التنبيه ليست مشروط كما قد تظن.رمز غير متزامن قد يطفو على السطح مربع تنبيه حتى إذا كان آخر واحد مفتوح بالفعل.في هذه الحالة, أحدث مربع التنبيه (واحد من الشفرة غير المتزامنة) يحصل على عرض على رأس واحد من كبار السن.وهذا يخلق الوهم بأن الشفرة غير المتزامنة يجب تنفيذها أولا.

نصائح أخرى

دون أن يحاكم الكود الخاص بك:AJAX الاتصال يتم تنفيذها بشكل متزامن.وهذا يعني أن اياكس.طلب الحرائق ، ثم يذهب إلى click1() استدعاء تخبرك div فارغة.في بعض نقطة بعد أن طلب اياكس الانتهاء من والمحتوى هو في الواقع وضعت في شعبة.عند هذه النقطة onSuccess يتم تنفيذ الدالة و الحصول على المحتوى الذي من المتوقع.

إنه اياكس الاتصال, الذي هو غير متزامن.يعني بعد أن طلب استدعاء الاستجابة لم يعود حتى الآن ، لهذا $("المحتوى") لا تزال فارغة.

على onSuccess عنصر من استدعاء دالة كنت صنع للتعامل مع اياكس الاتصال يتم تنفيذها في الوقت تتلقى ردا من get-table.php.هذا هو منفصل وظيفة جافا سكريبت الذي كنت تقول المتصفح الاتصال عندما تحصل على جواب من get-table.php.رمز أدناه اياكس الخاص بك.الطلب هو الوصول إليها في أقرب وقت اياكس.طلب استدعاء ، ولكن ليس بالضرورة قبل get-table.php ويسمى.لذلك نعم أعتقد أن هناك نوعا من سوء فهم أساسي لكيفية AJAX يعمل على الأرجح بسبب استخدام المكتبة إلى إخفاء تفاصيل.

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow