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

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

יסודות בתכנות

הסבר קל ופשוט על Reinforcement Learning

הסבר פשוט למתכנתים שמסביר על איך למידה מחוזקת עובדת – הרבה יותר פשוט ממה שחשבתם ואפשר גם בג׳אווהסקריפט!

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

מדרך מעשי לכתיבת קוד עם AI Agents

טכניקות בדוקות שנבדקו במוצרים אמיתיים לכתוב קוד טוב יותר עם LLM Agent. פוסט מיוחד למתכנתים מנוסים.

בינה מלאכותית

בעיות אמיתיות של אבטחה באייג׳נטים

אייג׳נטים יכולים להיות תמימים להחריד, בפוסט הזה שמלווה פרק מיוחד בפודקאסט עמוק ב-Bots, אנחנו נראה הגנות והתקפות על אייג׳נטים.

בינה מלאכותית

hooks של LLMים שעורכים קוד

הסבר על הוקים: הפעלה אוטומטית של פקודות שקיימת בכל האייג׳נטים שעורכים קוד (כלומר קורסור, קלוד קוד, קודקס וחבריהם) שיכולה מאד לסייע בפיתוח.

בינה מלאכותית

שימוש ב-Plan Mode באופן חכם

כך נמנעי את קריאות השבר של "מה האייג'נט עשה?!" שיטת Plan mode: שיטה קריטית לעבודה יעילה, המייצרת תוכנית עבודה מפורטת (DoD) עוד לפני כתיבת שורת קוד אחת.

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