הוספת JavaScript לטופס בדרופל 6 מול דרופל 7

כך מוסיפים JavaScript לטופס בצורה חכמה ואלגנטית בדרופל 6 ובדרופל 7

הנה משהו קצר ושימושי להפליא לכל מתכנתי הדרופל – הוספת JavaScript באמצעות form_alter.

לפעמים אנחנו צריכים להוסיף JavaScript לטופס זה או אחר. הטפסים הם בדרך כלל המקום שבו המשתמשים שלנו "נופלים" באופן הקשה ביותר והסקריפטים בצד הלקוח יכולים לעזור לנו להפוך אותם ליותר ידידותיים. לפיכך בלא מעט פעמים אנחנו רוצים להוסיף לטפסים שלנו סקריפטים שונים. באופן מפתיע משהו, לא מעט מתכנתים נוהגים לעשות את זה באמצעות הפקודה drupal_add_js דווקא ב-hook_form_alter.

אך יש בעיה אחת מרכזית וטיפשית עם הנוהג הזה – בשל מדיניות ה-caching של הטפסים, אם המשתמש שגה ולא מילא שדה נדרש, קובץ הסקריפט לא יוצמד אל הטופס בפעם השניה שדרופל מציגה אותו בפני המשתמש, עם הערות האזהרה והכל.

מה עושים? אם אנחנו משתמשים בדרופל 6, משתמשים בדרך אחרת, קצת עקומה. במקום:


hook_form_alter(&$form, &$form_state, $form_id) {
drupal_add_js(drupal_get_path('module', 'my_module').'/js/my_js.js', array('type' => 'file', 'scope' => 'footer'));
}

אנו נשתמש בתכונת ה-after_build! התכונה הזו, שקיימת כמעט בכל אלמנט בטופס, מאפשרת לנו להריץ פונקציות PHP בכל רינדור של הטופס – גם מה-cache. איך עושים את זה? פשוט מאד!


hook_form_alter(&$form, &$form_state, $form_id) {
$form['some_field']['#after_build'] = array('_load_add_form_javascript');
}

function _load_add_form_javascript () {
drupal_add_js(drupal_get_path('module', 'my_module').'/js/my_js.js', array('type' => 'file', 'scope' => 'footer'));
}

הדרך הזו היא קצת עקומה, אבל היא הטובה ביותר בדרופל 6, בדרופל 7, אפשר להשתמש בדרך הזו:


hook_form_alter(&$form, &$form_state, $form_id) {
$form['#attached']['js'][] = drupal_get_path('module', 'my_module').'/js/my_js.js'
}

השימוש ב-attached מאפשר לנו גם להצמיד CSS, אבל אני משתמש בו כל הזמן על מנת להוסיף JavaScript ולהיות בטוח שהוא יתווסף בכל פעם. באופן עקרוני, אפשר להוסיף את ה-JS לטופס באמצעות פונקצית Theme, אבל זה כבר מאמר אחר.

פוסטים נוספים שכדאי לקרוא

עבודה בהיי טק

איך מראיינים סניורים?

השיטה שלי לבדיקת התאמה טכנית למתכנתות ולמתכנתים בכירים עם כמה שנות ניסיון.

צילום מסך של סוואגר
יסודות בתכנות

openAPI

שימוש בתשתית הפופולרית למיפוי ותיעוד של API וגם הסבר בסיסי על מה זה API

פתרונות ומאמרים על פיתוח אינטרנט

נגישות טכנית – פודקאסט ומבוא

פרק בפודקאסטעל נגישות בעברית שצולל לכלים האוטומטיים ולפן המאד מאד טכני של הנגישות.

גלילה לראש העמוד