الفرق بين المراجعتين لصفحة: «jQuery/ajaxComplete»

من موسوعة حسوب
طلا ملخص تعديل
 
(5 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:التابع <code>‎‎.ajaxComplete()‎‎</code>‎ في jQuery}}</noinclude>
<noinclude>{{DISPLAYTITLE:التابع <code>‎‎.ajaxComplete()‎‎</code>‎ في jQuery}}</noinclude>
== <code>‎.ajaxComplete( handler )‎</code> ==
== <code>‎.ajaxComplete( handler )‎</code> ==


سطر 7: سطر 6:


=== الوصف ===
=== الوصف ===
يُستخدَم التّابع ‎<code>.ajaxComplete()‎</code> لتسجيل مُعالِج الأحداث (Event handler) لاستدعائه عند اكتمال طلبات Ajax. يُعدُّ هذا التّابع حدثًا من [[jQuery/Ajax Events|أحداث Ajax]].
يُستخدَم التّابع ‎<code>.ajaxComplete()‎</code> لتسجيل مُعالِج الأحداث (Event handler) لاستدعائه عند اكتمال طلبات Ajax. يُعدُّ هذا التّابع حدثًا من [[jQuery/ajax events|أحداث Ajax]].


=== <code>‎.ajaxComplete( handler )‎</code> ===
=== <code>‎.ajaxComplete( handler )‎</code> ===
أضيفت في الإصدار: 1.0
أضيفت في الإصدار: 1.0.


==== <code>handler</code> ====
==== <code>handler</code> ====
دالة على الشكل ‎<code>[[JavaScript/Function|Function]]( [[JavaScript/Event|Event]] event, [[jQuery/jqXHR|jqXHR]] jqXHR, [[JavaScript/Object|PlainObject]] ajaxOptions )‎</code>،وهي الدالة التي ستُستدعى.
دالة على الشكل ‎<code>[[JavaScript/Function|Function]]( [[JavaScript/Event|Event]] event, jqXHR jqXHR, [[JavaScript/Object|PlainObject]] ajaxOptions )‎</code>،وهي الدالة التي ستُستدعى.


حالما يكتمل تنفيذ طلب Ajax، تُحفِّز jQuery الحدث <code>ajaxComplete</code>، وتُنفَّذ عندها كافّة مُعالجات الأحداث المُسجَّلة مع التّابع‎<code>.ajaxComplete()</code> ‎.
حالما يكتمل تنفيذ طلب Ajax، تُطلَق jQuery الحدث <code>ajaxComplete</code>، وتُنفَّذ عندها كافّة مُعالجات الأحداث المُسجَّلة مع التّابع‎<code>.ajaxComplete()</code> ‎.


لمشاهدة مثال عملي عن هذا التّابع نُجهِّز طلب بسيط لتحميل Ajax:<syntaxhighlight lang="html">
لمشاهدة مثال عملي عن هذا التّابع نُجهِّز طلب بسيط لتحميل Ajax:<syntaxhighlight lang="html">
<div class="trigger">Trigger</div>
<button class="trigger">إطلاق مُعالِج الحدث</button>
 
<div class="result"></div> <!--تُعرَض هنا النتيجة-->
<div class="result"></div>
<div class="log"></div> <!--تُعرَض هنا رسالة السّجل-->
 
<div class="log"></div>
 


</syntaxhighlight>أرفِق مُعالِج الحدث (event handler) إلى المستند:<syntaxhighlight lang="javascript">
</syntaxhighlight>أرفِق مُعالِج الحدث (event handler) إلى المستند:<syntaxhighlight lang="javascript">
$( document ).ajaxComplete(function() {
$( document ).ajaxComplete(function() {
 
  $( ".log" ).text( ".‏ajaxComplete‏أُطلِق مُعالِج الحدث ‏" );
 $( ".log" ).text( "Triggered ajaxComplete handler." );
 
});
});


</syntaxhighlight>نفذ الآن طلب Ajax باستخدام أي تابع jQuery:<syntaxhighlight lang="javascript">
</syntaxhighlight>نفذ الآن طلب Ajax باستخدام أي تابع jQuery:<syntaxhighlight lang="javascript">
$( ".trigger" ).click(function() {
$( ".trigger" ).click(function() {
 
  $( ".result" ).load( "ajax/test.html" );
 $( ".result" ).load( "ajax/test.html" );
 
});
});


</syntaxhighlight>عندما يضغط المستخدم على العنصر الذي يمتلك الصنف <code>trigger</code> ويكتمل تنفيذ طلب Ajax، ستُعرَض رسالة السّجل.
</syntaxhighlight>عندما يضغط المستخدم على العنصر الذي يمتلك الصنف <code>trigger</code> ويكتمل تنفيذ طلب Ajax، ستُعرَض رسالة السّجل.
سطر 45: سطر 35:
تُستدعَى كافة مُعالِجات الحدث <code>ajaxComplete</code> عند اكتمال تنفيذ أي طلب Ajax، إن كنت تريد التفريق بين الطلبات فاستخدم المعاملات الممررة لمُعالِج الأحداث، ففي كل مرة يُنفَّذ فيها مُعالِج الحدث <code>ajaxComplete</code> يُمرِّر كائن الحدث، والكائن <code>XMLHttpRequest</code>، وكائن الإعدادات الذي استُخدِم في إنشاء الطّلب. بإمكاننا على سبيل المثال حصر الاستدعاء فقط من أجل الأحداث التي تتعامل مع روابط معينة:<syntaxhighlight lang="javascript">
تُستدعَى كافة مُعالِجات الحدث <code>ajaxComplete</code> عند اكتمال تنفيذ أي طلب Ajax، إن كنت تريد التفريق بين الطلبات فاستخدم المعاملات الممررة لمُعالِج الأحداث، ففي كل مرة يُنفَّذ فيها مُعالِج الحدث <code>ajaxComplete</code> يُمرِّر كائن الحدث، والكائن <code>XMLHttpRequest</code>، وكائن الإعدادات الذي استُخدِم في إنشاء الطّلب. بإمكاننا على سبيل المثال حصر الاستدعاء فقط من أجل الأحداث التي تتعامل مع روابط معينة:<syntaxhighlight lang="javascript">
$( document ).ajaxComplete(function( event, xhr, settings ) {
$( document ).ajaxComplete(function( event, xhr, settings ) {
 
  if ( settings.url === "ajax/test.html" ) {
 if ( settings.url === "ajax/test.html" ) {
    $( ".log" ).text( "أطلق معالج الحدث ajaxComplete. والنتيجة هي: " +
 
      xhr.responseText );
   $( ".log" ).text( "Triggered ajaxComplete handler. The result is " +
  }
 
     xhr.responseText );
 
 }
 
});
});


</syntaxhighlight>'''ملاحظة:''' بإمكاننا الحصول على محتوى Ajax المُعاد عن طريق <code>xhr.responseText</code>.
</syntaxhighlight>'''ملاحظة:''' بإمكاننا الحصول على محتوى Ajax المُعاد عن طريق <code>xhr.responseText</code>.


ملاحظات إضافية
=== ملاحظات إضافية ===
 
بدءًا من إصدار jQuery 1.9 أصبح إرفاق مُعالِجات الأحداث لأحداث Ajax العامة (jQuery global Ajax events) بالمستند إجباريًّا، بما في ذلك مُعالِجات الأحداث المُضافة عن طريق التّابع <code>‎.ajaxComplete()‎</code>.
بدءًا من إصدار jQuery 1.9 أصبح إرفاق مُعالِجات الأحداث لأحداث Ajax العامة (jQuery global Ajax events) بالمستند إجباريًّا، بما في ذلك مُعالِجات الأحداث المُضافة عن طريق التّابع <code>‎.ajaxComplete()‎</code>.


إن استدعينا التابع ‎<code>$.ajax()</code>‎ أو ‎<code>$.ajaxSetup()</code>‎ مع تعيين الخيار <code>global</code> إلى القيمة <code>false</code>، فلن يُنفَّذ التّابع ‎<code>.ajaxComplete()</code>‎.
إن استدعينا التابع ‎<code>[[jQuery/jQuery/ajax|$.ajax()]]</code>‎ أو ‎<code>[[jQuery/jQuery/ajaxSetup|$.ajaxSetup()]]</code>‎ مع تعيين الخيار <code>global</code> إلى القيمة <code>false</code>، فلن يُنفَّذ التّابع ‎<code>.ajaxComplete()</code>‎.
 
أمثلة


=== أمثلة ===
إظهار رسالة عند اكتمال طلب Ajax:<syntaxhighlight lang="javascript">
إظهار رسالة عند اكتمال طلب Ajax:<syntaxhighlight lang="javascript">
$( document ).ajaxComplete(function( event, request, settings ) {
$( document ).ajaxComplete(function( event, request, settings ) {
 
  $( "#msg" ).append( "<li>اكتمل الطلب.</li>" );
 $( "#msg" ).append( "<li>Request Complete.</li>" );
 
});
});


</syntaxhighlight>
</syntaxhighlight>


== مصادر ==
== مصادر ==
<span> </span>
* <span> </span>[http://api.jquery.com/ajaxComplete/ صفحة التابع ‎‎.ajaxComplete()‎ في توثيق jQuery الرسمي].
* [http://api.jquery.com/ajaxComplete/ صفحة التابع ‎‎.ajaxComplete()‎ في توثيق jQuery الرسمي].
[[تصنيف:jQuery]]
[[تصنيف:jQuery Method]]
[[تصنيف:jQuery Ajax]]

المراجعة الحالية بتاريخ 13:21، 1 يوليو 2018

‎.ajaxComplete( handler )‎

القيمة المعادة

كائن jQuery.

الوصف

يُستخدَم التّابع ‎.ajaxComplete()‎ لتسجيل مُعالِج الأحداث (Event handler) لاستدعائه عند اكتمال طلبات Ajax. يُعدُّ هذا التّابع حدثًا من أحداث Ajax.

‎.ajaxComplete( handler )‎

أضيفت في الإصدار: 1.0.

handler

دالة على الشكل ‎Function( Event event, jqXHR jqXHR, PlainObject ajaxOptions )‎،وهي الدالة التي ستُستدعى.

حالما يكتمل تنفيذ طلب Ajax، تُطلَق jQuery الحدث ajaxComplete، وتُنفَّذ عندها كافّة مُعالجات الأحداث المُسجَّلة مع التّابع‎.ajaxComplete() ‎.

لمشاهدة مثال عملي عن هذا التّابع نُجهِّز طلب بسيط لتحميل Ajax:

<button class="trigger">إطلاق مُعالِج الحدث</button>
<div class="result"></div> <!--تُعرَض هنا النتيجة-->
<div class="log"></div> <!--تُعرَض هنا رسالة السّجل-->

أرفِق مُعالِج الحدث (event handler) إلى المستند:

$( document ).ajaxComplete(function() {
  $( ".log" ).text( ".‏ajaxComplete‏أُطلِق مُعالِج الحدث ‏" );
});

نفذ الآن طلب Ajax باستخدام أي تابع jQuery:

$( ".trigger" ).click(function() {
  $( ".result" ).load( "ajax/test.html" );
});

عندما يضغط المستخدم على العنصر الذي يمتلك الصنف trigger ويكتمل تنفيذ طلب Ajax، ستُعرَض رسالة السّجل. تُستدعَى كافة مُعالِجات الحدث ajaxComplete عند اكتمال تنفيذ أي طلب Ajax، إن كنت تريد التفريق بين الطلبات فاستخدم المعاملات الممررة لمُعالِج الأحداث، ففي كل مرة يُنفَّذ فيها مُعالِج الحدث ajaxComplete يُمرِّر كائن الحدث، والكائن XMLHttpRequest، وكائن الإعدادات الذي استُخدِم في إنشاء الطّلب. بإمكاننا على سبيل المثال حصر الاستدعاء فقط من أجل الأحداث التي تتعامل مع روابط معينة:

$( document ).ajaxComplete(function( event, xhr, settings ) {
  if ( settings.url === "ajax/test.html" ) {
    $( ".log" ).text( "أطلق معالج الحدث ajaxComplete. والنتيجة هي: " +
      xhr.responseText );
  }
});

ملاحظة: بإمكاننا الحصول على محتوى Ajax المُعاد عن طريق xhr.responseText.

ملاحظات إضافية

بدءًا من إصدار jQuery 1.9 أصبح إرفاق مُعالِجات الأحداث لأحداث Ajax العامة (jQuery global Ajax events) بالمستند إجباريًّا، بما في ذلك مُعالِجات الأحداث المُضافة عن طريق التّابع ‎.ajaxComplete()‎.

إن استدعينا التابع ‎$.ajax()‎ أو ‎$.ajaxSetup()‎ مع تعيين الخيار global إلى القيمة false، فلن يُنفَّذ التّابع ‎.ajaxComplete()‎.

أمثلة

إظهار رسالة عند اكتمال طلب Ajax:

$( document ).ajaxComplete(function( event, request, settings ) {
  $( "#msg" ).append( "<li>اكتمل الطلب.</li>" );
});

مصادر