הוספת 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, אבל זה כבר מאמר אחר.

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

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