عرض مصدر Rails/working with javascript in rails

<noinclude>{{DISPLAYTITLE:العمل مع JavaScript في ريلز}}</noinclude>
[[تصنيف:Rails]]
يغطي هذا الدليل وظيفة Ajax/JavaScript المضمّنة في ريلز (والمزيد)؛ وسوف يمكنك من إنشاء تطبيقات Ajax غنية وديناميكية بكل سهولة!

ستتعلم بعد قراءة هذا الدليل:
* أساسيات Ajax.
* [[JavaScript|جافاسكربت]] الواضحة (Unobtrusive JavaScript).
* كيف يساعدك مساعدو ريلز المدمجون (built-in helpers).
* كيفية التعامل مع Ajax من طرف الخادم.
* الجوهرة Turbolinks.

== مقدمة لفهم Ajax ==
لفهم أجاكس، يجب أولًا فهم ما يفعله متصفّح الويب بشكل طبيعي.

عندما تكتب <nowiki>http://localhost:3000</nowiki> في شريط عنوان المتصفّح وتضغط على "Go" ، يقدّم المتصفح ("العميل") طلبًا للخادم، ويفرز الاستجابة ثم يجلب جميع الأصول المرتبطة، مثل ملفّات JavaScript وأوراق الأنماط والصور ثم يُجمّع الصفحة. ستحصل نفس العملية إذا نقرت على أحد الروابط: جلب الصفحة، وجلب الأصول، ووضعها معًا ثم عرض النتائج. وهذا ما يسمى "دورة استجابة الطلب" (request response cycle).

يمكن لجافاسكربت أيضًا تقديم طلبات إلى الخادم وفرز الاستجابة. كما أن لديها القدرة على تحديث المعلومات على الصفحة. بدمج هاتين الميزتين يستطيع كاتب JavaScript إنشاء صفحة ويب تستطيع تحديث أجزاء فقط من نفسها، دون الحاجة للحصول على بيانات الصفحة الكاملة من الخادم. هذه تقنية قوية نسميها Ajax.

تشحن ريلز مع CoffeeScript افتراضيًّا، لذا ستكون بقية الأمثلة في هذا الدليل مكتوبة في CoffeeScript. تنطبق كل هذه الدروس طبعًا على [[JavaScript]] العادي أيضًا.

إليك الشيفرة التالية المكتوبة بلغة CoffeeScript التي تقدّم طلب Ajax باستخدام مكتبة [[jQuery]]:<syntaxhighlight lang="coffeescript">
$.ajax(url: "/test").done (html) ->
  $("#results").append html
</syntaxhighlight>تجلب هذه الشيفرة البيانات من "test/" ثم تضيف النتيجة إلى <code>[[HTML/div|div]]</code> ذي المعرِّف <code>results</code>.

توفّر ريلز قليلًا من الدعم المضمّن لبناء صفحات ويب باستخدام هذه التقنية. نادرًا ما تضطر إلى كتابة مثل هذه الشيفرات بنفسك. سيوضّح لك باقي هذا الدليل كيف تستطيع ريلز أن تساعدك في كتابة مواقع الويب بهذه الطريقة، ولكن كل ذلك مبني على هذه التقنية البسيطة إلى حد ما.

== جافاسكربت الواضحة ==
تستخدم ريلز تقنية تسمى "جافاسكربت الواضحة" ([[wikipedia:Unobtrusive_JavaScript|Unobtrusive JavaScript]]) للتعامل مع ربط جافاسكربت بـ DOM. يعتبر ذلك عادةً أفضل الممارسات داخل مجتمع الواجهات الأماميّة، ولكن قد تقرأ أحيانًا دروسًا تعرض طرقًا أخرى.

إليك أبسط طريقة لكتابة جافاسكربت. قد تراه يشار إليه باسم "جافاسكربت السطرية" (inline JavaScript):<syntaxhighlight lang="html">
<a href="#" onclick="this.style.backgroundColor='#990000'">Paint it red</a>
</syntaxhighlight>عند النقر على العنصر، ستتلوّن خلفية الرابط بالأحمر. إليك المشكلة: ماذا يحدث عندما يكون لدينا الكثير من JavaScript الذي نرغب في تنفيذها بنقرة واحدة؟<syntaxhighlight lang="html">
<a href="#" onclick="this.style.backgroundColor='#009900';this.style.color='#FFFFFF';">Paint it green</a>
</syntaxhighlight>غريب، أليس كذلك؟ يمكننا سحب تعريف الدالّة (function) من معالج النقر وتحويله إلى CoffeeScript:<syntaxhighlight lang="coffeescript">
@paintIt = (element, backgroundColor, textColor) ->
  element.style.backgroundColor = backgroundColor
  if textColor?
    element.style.color = textColor
</syntaxhighlight>ثم على صفحتنا:<syntaxhighlight lang="html">
<a href="#" onclick="paintIt(this, '#990000')">Paint it red</a>

</syntaxhighlight>هذا أفضل قليلًا، ولكن ماذا عن الروابط المتعددة التي لها نفس التأثير؟<syntaxhighlight lang="html">
<a href="#" onclick="paintIt(this, '#990000')">Paint it red</a>
<a href="#" onclick="paintIt(this, '#009900', '#FFFFFF')">Paint it green</a>
<a href="#" onclick="paintIt(this, '#000099', '#FFFFFF')">Paint it blue</a>
</syntaxhighlight>يمكننا إصلاح هذا باستخدام الأحداث بدلًا من ذلك. سنضيف خاصية <code>*-data</code> إلى رابطنا، ثم نربط معالجًا بحدث النقر لكل رابط يحتوي على هذه الخاصية:<syntaxhighlight lang="coffeescript">
@paintIt = (element, backgroundColor, textColor) ->
  element.style.backgroundColor = backgroundColor
  if textColor?
    element.style.color = textColor
 
$ ->
  $("a[data-background-color]").click (e) ->
    e.preventDefault()
 
    backgroundColor = $(this).data("background-color")
    textColor = $(this).data("text-color")
    paintIt(this, backgroundColor, textColor)
</syntaxhighlight><syntaxhighlight lang="html">
<a href="#" data-background-color="#990000">Paint it red</a>
<a href="#" data-background-color="#009900" data-text-color="#FFFFFF">Paint it green</a>
<a href="#" data-background-color="#000099" data-text-color="#FFFFFF">Paint it blue</a>
</syntaxhighlight>نسمي هذا جافاسكربت "الواضحة" لأننا لم نعد نمزج JavaScript في HTML. لقد فصلنا مخاوفنا بشكل صحيح، مما يجعل التغيير المستقبلي سهلًا. يمكننا تشغيل كل شفراتنا المكتوبة بلغة JavaScript من خلال وحدة تصغير (minimizer) وتجميع (concatenator). يمكننا تقديم حزمة JavaScript بالكامل في كل صفحة، مما يعني أنها ستُسلّم على تحميل الصفحة الأولى ثم تُخزّن مؤقتًا في كل صفحة بعد ذلك. الكثير من الفوائد الصغيرة تتراكم حقًّا هناك.

يشجعك فريق ريلز بشدّة على كتابة الـ CoffeeScript (و JavaScript) في هذا النمط ويمكنك أن تتوّقع أن العديد من المكتبات سوف تتبع هذا النمط أيضًا.

== مساعدون مدمجون ==

=== العناصر البعيدة ===
توفّر ريلز مجموعة من توابع مساعدي العرض (view helper) مكتوبة في [[Ruby|روبي]] لمساعدتك في إنشاء HTML. قد ترغب أحيانًا في إضافة القليل من Ajax لتلك العناصر؛ ريلز موجود لمساعدتك في تلك الحالات.

بسبب جافاسكربت الواضحة،  "مساعدات Ajax " في ريلز هنَّ في الواقع جزءان: نصف JavaScript

ونصف روبي.

ما لم تعطّل "[[Rails/asset pipeline|أنابيب الأصول]]"، توفّر [https://github.com/rails/rails/tree/master/actionview/app/assets/javascripts rails-ujs] نصف JavaScript، وتضيف مساعدات واجهة [[Ruby|روبي]] العاديّة الوسوم المناسبة إلى DOM.

يمكنك أن تقرأ أدناه حول الأحداث المختلفة التي تُطلق للتعامل مع العناصر البعيدة داخل تطبيقك.

==== <code>form_with</code> ====
المساعد <code>form_with</code> يساعد بكتابة [[HTML/form|النماذج]]. يفترض <code>form_with</code> أن نموذجك سيستخدم Ajax افتراضيًّا. يمكنك إلغاء هذا السلوك عبر تمرير الخيار <code>local:</code> إلى <code>form_with</code>.<syntaxhighlight lang="rails">
<%= form_with(model: @article) do |f| %>
  ...
<% end %>
</syntaxhighlight>سيؤدي هذا لإنشاء شيفرة [[HTML]] التالي:<syntaxhighlight lang="html">
<form action="/articles" accept-charset="UTF-8" method="post" data-remote="true">
  ...
</form>
</syntaxhighlight>لاحظ وجود الخاصية <code>"data-remote="true</code>. سيُرسل النموذج الآن من قبل Ajax بدلاً من آليّة الإرسال العادية للمتصفّح.

لكن قد لا تريد أن تجلس بخمول مع <code>[[HTML/form|<form>]]</code> مملوءة. قد تريد أن تفعل شيئًا ما عند نجاح التسليم. لفعل هذا، اربط تابعًا بالحدث <code>ajax:success</code>. عند الفشل، استخدم <code>ajax:error</code>. ألق نظرة هنا:<syntaxhighlight lang="jquery">
$(document).ready ->
  $("#new_article").on("ajax:success", (event) ->
    [data, status, xhr] = event.detail
    $("#new_article").append xhr.responseText
  ).on "ajax:error", (event) ->
    $("#new_article").append "<p>ERROR</p>"
</syntaxhighlight>من البديهي أنك سترغب بشيء أكثر تطوّرًا من هذا ولكنها مجرد بداية.

اعتبارًا من الإصدار 5.1 لريلز و rails-ujs الجديدة، جُمعت المعاملات data, و status, و xhr في <code>event.detail</code>. لمزيد من المعلومات حول jquery-ujs المستخدمة سابقًا في الإصدار 5 من ريلز والإصدارات الأقدم، اطلع على  [https://github.com/rails/jquery-ujs/wiki/ajax هذه] الصفحة.

==== <code>link_to</code> ====
المساعد <code>link_to</code> يساعد في توليد الروابط. يحتوي على الخيار <code>remote:</code> يمكنك استخدامه على النحو التالي:<syntaxhighlight lang="rails">
<%= link_to "an article", @article, remote: true %>
</syntaxhighlight>الذي يولّد:<syntaxhighlight lang="html">
<a href="/articles/1" data-remote="true">an article</a>
</syntaxhighlight>يمكنك الربط بنفس أحداث Ajax كـ <code>form_with</code>. وهنا مثال على ذلك. فلنفترض أن لدينا قائمة بالمقالات التي يمكن حذفها بنقرة واحدة فقط. سنولّد بعض HTML بهذا الشكل:<syntaxhighlight lang="rails">
<%= link_to "an article", @article, remote: true %>
</syntaxhighlight>واكتب بعض شفرات CoffeeScript مثل:<syntaxhighlight lang="coffeescript">
$ ->
  $("a[data-remote]").on "ajax:success", (event) ->
    alert "The article was deleted."
</syntaxhighlight>

==== <code>button_to</code> ====
المساعد <code>button_to</code> يساعدك على إنشاء الأزرار. يحتوي على الخيار <code>remote:</code> الذي يمكنك استدعائه على النحو التالي:<syntaxhighlight lang="rails">
<%= button_to "An article", @article, remote: true %>
</syntaxhighlight>هذا يولّد:<syntaxhighlight lang="html">
<form action="/articles/1" class="button_to" data-remote="true" method="post">
  <input type="submit" value="An article" />
</form>
</syntaxhighlight>جميع المعلومات الواردة في <code>form_with</code> تنطبق أيضًا نظرًا لأنه مجرد <code>[[HTML/form|<form>]]</code>.

=== تخصيص العناصر عن بعد ===
من الممكن تخصيص سلوك العناصر ذات الخاصية <code>data-remote</code> بدون كتابة سطر [[JavaScript]] واحد. يمكنك تحديد خاصيات إضافية من الشكل <code>-data</code> لتحقيق ذلك.

==== <code>data-method</code> ====
يؤدي تنشيط الارتباطات التشعبية (hyperlinks) دائمًا في طلب HTTP GET. لكن إن كان تطبيقك ‎،RESTful بعض الروابط هي حقيقة إجراءات تغيّر البيانات على الخادم ويجب تنفيذها بطلبات غير GET. تسمح هذه الخاصية بوضع علامات على هذه الروابط بطريقة واضحة مثل "post" أو "put" أو "delete".

ينشأ الرابط عند تنشيطه نموذجًا مخفيًّا في المستند مع الخاصية "action" المقابلة لقيمة "href" للرابط، والتابع المطابق لقيمة <code>data-method</code>، ثم يرسل ذلك النموذج.

نظرًا لعدم دعم إرسال نماذج باستخدام توابع HTTP عدا GET و POST على نطاق واسع عبر المتصفّحات، تُرسَل كل توابع HTTP الأخرى عبر POST باستخدام التابع المناسب المذكور في المعامل <code>method_</code>.  تكتشف ريلز هذا تلقائيًّا وتعوّض عنه.

==== <code>data-url</code> و <code>data-params</code> ====
لا تشير عناصر معينة من صفحتك فعليًا إلى أي عنوان URL ولكن قد ترغب أن يشغّلوا استدعاءات Ajax. سيؤدي تحديد الخاصية <code>data-url</code> مع الخاصية <code>data-remote</code> إلى اطلاق استدعاء Ajax إلى العنوان URL المحدّد. يمكنك أيضًا تحديد معاملات إضافية من خلال الخاصية <code>data-params</code>.

يمكن أن يفيدك هذا في بدء إجراء على مربعات اختيار مثلًا:<syntaxhighlight lang="html">
<input type="checkbox" data-remote="true"
    data-url="/update" data-params="id=10" data-method="put">
</syntaxhighlight>

==== <code>data-type</code> ====
ومن الممكن أيضا لتحديد dataType في Ajax بشكل صريح أثناء أداء طلبات للعناصر <code>data-remote</code> عبر الخاصية <code>data-type</code>.

=== التأكيدات ===
يمكنك طلب تأكيد إضافي من المستخدم عبر إضافة الخاصية <code>data-confirm</code> على الروابط والنماذج. سيظهر للمستخدم مربّع حوار‏ ()‏confirm الذي يخص‏‏ JavaScript يحتوي على نص الخاصية. إن اختار المستخدم الإلغاء، فلن يقع الإجراء.

ستؤدّي إضافة هذه الخاصية إلى الروابط إلى تشغيل مربّع الحوار عند النقر وستؤدي إضافته في النماذج إلى تشغيله عند الإرسال. على سبيل المثال:<syntaxhighlight lang="rails">
<%= link_to "Dangerous zone", dangerous_zone_path,

</syntaxhighlight>يولّد هذا:<syntaxhighlight lang="rails">
<a href="..." data-confirm="Are you sure?">Dangerous zone</a>
</syntaxhighlight>تُسمَح بهذه الخاصية أيضًا في أزرار إرسال النموذج. يتيح لك ذلك تخصيص رسالة التحذير بناءً على الزر الذي فُعّل. في هذه الحالة يجب ألّا يكون لديك <code>data-confirm</code> في النموذج ذاته.

يستخدم التأكيد الافتراضي مربّع حوار تأكيد JavaScript ، ولكن يمكنك تخصيصه عن طريق الاستماع إلى الحدث <code>confirm</code>، الذي يُطلق قبل ظهور نافذة التأكيد للمستخدم. اطلب من معالج التأكيد إرجاع القيمة <code>false</code> لإلغاء هذا التأكيد الافتراضي.

=== التعطيل التلقائي ===
من الممكن أيضًا تعطيل أحد المدخلات تلقائيًا أثناء إرسال النموذج باستخدام الخاصية <code>data-disable-with</code>. وذلك لمنع النقرات المزدوجة العرضيّة من المستخدم مما قد ينتج طلبات HTTP مكرّرة قد لا تكتشفها الواجهة الخلفية على هذا النحو. قيمة الخاصية هي النص الذي سيصبح القيمة الجديدة للزر في حالته المعطّلة.

ينطبق هذا أيضًا على الروابط ذات الخاصية <code>data-method</code>.

على سبيل المثال:<syntaxhighlight lang="rails">
<%= form_with(model: @article.new) do |f| %>
  <%= f.submit data: { "disable-with": "Saving..." } %>
<%= end %>
</syntaxhighlight>يولّد هذا النموذج مع:<syntaxhighlight lang="html">
<input data-disable-with="Saving..." type="submit">
</syntaxhighlight>

=== معالجات الحدث Rails-ujs ===
وفرَّت ريلز في الإصدار 5.1 المعالجات rails-ujs وأهملت [[jQuery]] كإعتماديّة (dependency). أعيدت كتابة برنامج JavaScript الواضحة (UJS) نتيجة لذلك ليعمل بدون [[jQuery]]. تؤدّي هذه التقديمات إلى تغييرات صغيرة في الأحداث المخصّصة (custom events) المطلقة أثناء الطلب:

غُيّر التوقيع على النداءات إلى معالجات الأحداث في UJS. ترد كل الأحداث المخصّصة معاملة واحدة فقط: <code>event</code> بخلاف الإصدار مع jQuery. في هذه المعاملة هناك الخاصية الإضافيّة <code>detail</code> التي تحتوي على مصفوفة من المعاملات الإضافية.
{| class="wikitable"
!اسم الحدث
!المعاملات الإضافية (event.detail)
!يُطلَق
|-
|<code>ajax:before</code>
|
|قبل العمل مع ajax
|-
|<code>ajax:beforeSend</code>
|[xhr, options]
|قبل إرسال الطلب
|-
|<code>ajax:send</code>
|[xhr]
|عند إرسال الطلب
|-
|<code>ajax:stopped</code>
|
|عند ايقاف الطلب
|-
|<code>ajax:success</code>
|[response, status, xhr]
|بعد الانتهاء إن كانت الاستجابة ناجحة.
|-
|<code>ajax:error</code>
|[response, status, xhr]
|بعد الانتهاء إن كانت الاستجابة خطأ.
|-
|<code>ajax:complete</code>
|[xhr, status]
|بعد الانتهاء من الطلب بغض النظر عن النتيجة.
|}
مثال عملي يشرح ما سبق:<syntaxhighlight lang="javascript">
document.body.addEventListener('ajax:success', function(event) {
  var detail = event.detail;
  var data = detail[0], status = detail[1], xhr = detail[2];
})
</syntaxhighlight>اعتبارًا من الإصدار 5.1 في ريلز و rails-ujs الجديدة، جُمعت المعاملات <code>data</code>، و <code>status</code>، و <code>xhr</code> في <code>event.detail</code>. لمزيد من المعلومات حول <code>jquery-ujs</code> المستخدمة سابقًا في الإصدار 5 والإصدارات الأقدم، اطلع على [https://github.com/rails/jquery-ujs/wiki/ajax هذه] الصفحة.

=== الأحداث القابلة للإيقاف ===
يمكنك إيقاف تنفيذ طلب Ajax بتشغيل <code>event.preventDefault()‎</code> من توابع المعالجات <code>ajax:before</code> أو <code>ajax:beforeSend</code>. يستطيع الحدث <code>ajax:before</code> معالجة بيانات النموذج قبل التسلسل، والحدث <code>ajax:beforeSend</code> مفيد بإضافة ترويسات طلبات مخصصّة.

إن أوقفت حدث <code>ajax:aborted:file</code>، سيُلغى السلوك الافتراضي الذي يسمح للمتصفّح بإرسال الاستمارة عبر الوسائل العادية (أي إرسال غير Ajax) ولن تُقدّم الاستمارة على الإطلاق. الفائدة من هذا السلوك هي تعريف استخدام حل شخصي لتحميل ملف Ajax.

'''ملاحظة''': عليك استخدام <code>return false</code> لمنع الحدث <code>jquery-ujs</code> و <code>e.preventDefault()</code>‎ لـ rails-ujs.

== مخاوف من طرف الخادم ==
Ajax ليس فقط من طرف العميل، بل تحتاج للعمل من طرف الخادم أيضًا لدعمه. كثيرًا ما يفضّل الأشخاص أن ترد طلباتهم Ajax ملف JSON بدل HTML. فلنناقش ما يلزم لتحقيق ذلك.

=== مثال بسيط ===
تخيّل أن لديك سلسلة من المستخدمين الراغبين في عرض وتقديم نموذج بنفس الصفحة لإنشاء مستخدم جديد. يشبه إجراء (action) فهرس وحدة تحكّمك ما يلي:<syntaxhighlight lang="rails">
class UsersController < ApplicationController
  def index
    @users = User.all
    @user = User.new
  end
  # ...
</syntaxhighlight>يحتوي عرض الفهرس (app/views/users/index.html.erb) على:<syntaxhighlight lang="rails">
<b>Users</b>
 
<ul id="users">
<%= render @users %>
</ul>
 
<br>
 
<%= form_with(model: @user) do |f| %>
  <%= f.label :name %><br>
  <%= f.text_field :name %>
  <%= f.submit %>
<% end %>
</syntaxhighlight>يحتوي app/views/users/_user.html.erb الجزئي على ما يلي:<syntaxhighlight lang="rails">
<li><%= user.name %></li>
</syntaxhighlight>يعرض الجزء العلوي من صفحة الفهرس المستخدمين. يوفّر الجزء السفلي نموذجًا لإنشاء مستخدم جديد.

سيستدعي النموذج السفلي الإجراء <code>create</code> على <code>UsersController</code>. بما أن خيار النموذج البعيد مضبوط إلى "true"، سيُنشر الطلب إلى <code>UsersController</code> كطلب Ajax يبحث عن JavaScript. سيبدو إجراء وحدة التحكم <code>create</code> كما يلي لتلبية هذا الطلب:<syntaxhighlight lang="rails">
# app/controllers/users_controller.rb
# ......
def create
  @user = User.new(params[:user])
 
  respond_to do |format|
    if @user.save
      format.html { redirect_to @user, notice: 'User was successfully created.' }
      format.js
      format.json { render json: @user, status: :created, location: @user }
    else
      format.html { render action: "new" }
      format.json { render json: @user.errors, status: :unprocessable_entity }
    end
  end
end
</syntaxhighlight>لاحظ format.js في البنية respond_to block: يسمح هذا لوحدة التحكّم بالرد على طلبك Ajax. يصبح لديك عندئذٍ ملف واجهة app/views/users/create.js.erb يُولّد شفرة JavaScript فعليّة ستُرسل وتُنفّذ على جانب العميل.<syntaxhighlight lang="jquery">
$("<%= escape_javascript(render @user) %>").appendTo("#users");
</syntaxhighlight>

== المكتبة Turbolinks ==
تشحن ريلز مع [https://github.com/turbolinks/turbolinks المكتبة Turbolinks] التي تستخدم Ajax لتسريع تقديم الصفحة في معظم التطبيقات.

=== كيف تعمل Turbolinks ===
ترفق Turbolinks معالج نقر بجميع الوسوم <code>[[HTML/a|<a>]]</code> على الصفحة. ستطلب Turbolinks طلب Ajax من الصفحة ثم يحلّل الاستجابة ويستبدل <code>[[HTML/body|<body>]]</code> الصفحة مع <code>[[HTML/body|<body>]]</code> للاستجابة إن دعم متصفّحك [https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history#The_pushState%28%29_method PushState]. سيستخدم بعدها PushState لتغيير عنوان URL إلى العنوان الصحيح مع الحفاظ على دلالات التحديث (refresh semantics) وإعطائك عناوين URL جميلة.

كل ما عليك فعله لتفعيل Turbolinks هو وجوده في ملفك Gemfile ووضع ‎<code>//= require turbolinks</code> في بيانك JavaScript والذي عادة ما يكون في app/assets/javascripts/application.js.

إن أردت تعطيل Turbolinks لروابط معينة أضف الخاصية <code>"data-turbolinks="false</code> إلى الوسم:<syntaxhighlight lang="html">
<a href="..." data-turbolinks="false">No turbolinks here</a>.
</syntaxhighlight>

=== أحداث تغيير الصفحة ===
ستحتاج عند كتابة CoffeeScript لإجراء نوع من المعالجة عند تحميل الصفحة. ستكتب شيئًا مشابهًا لما يلي مع [[jQuery]]:<syntaxhighlight lang="jquery">
$(document).ready ->
  alert "page has loaded!"
</syntaxhighlight>ولكن لن يشتغل الحدث الذي تعتمد عليه لأن Turbolinks تستبدل (overrides) عملية تحميل الصفحة العادية. عليك تغيير شيفرتك إن شابهت المثال أعلاه لما يلي تقريبًا:<syntaxhighlight lang="jquery">
$(document).on "turbolinks:load", ->
  alert "page has loaded!"
</syntaxhighlight>لمزيد من التفاصيل بما في ذلك الأحداث الأخرى التي يمكنك ربطها، اطلع على <code>[https://github.com/turbolinks/turbolinks/blob/master/README.md Turbolinks README]</code>.

== مصادر أخرى ==
إليك بعض الروابط المفيدة لمساعدتك على معرفة المزيد:
* [https://github.com/rails/jquery-ujs/wiki jquery-ujs wiki]
* [https://github.com/rails/jquery-ujs/wiki/External-articles jquery-ujs قائمة المقالات الخارجية]
* [http://www.alfajango.com/blog/rails-3-remote-links-and-forms/ Rails 3 روابط ونماذج عن بعد: الدليل النهائي]
* [http://railscasts.com/episodes/205-unobtrusive-javascript Railscasts: جافاسكربت الواضحة]
* [http://railscasts.com/episodes/390-turbolinks Railscasts: Turbolinks]

== مصادر ==
* [https://guides.rubyonrails.org/working_with_javascript_in_rails.html#remote-elements4 صفحة Working with JavaScript in Rails في توثيق Ruby On Rails الرّسمي.]