עוד מילה טובה על jQuery
קטע הקוד הבא עובד טוב ב Chrome, Firefox ו Edge וגם על מובייל לא עשה לי עדיין בעיות. רק IE צריך להיות מיוחד:
var form = document.querySelector('#myform');
var fd = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/submit');
xhr.send(fd);
זאת הדרך הסטנדרטית להגיש טופס ב Ajax. והיא כמעט תמיד עובדת. עד שהיא מפסיקה לעבוד.
וכך נראה טופס שעבורו הקוד הזה נכשל:
<form id="theform" action="/people" method="post">
Name: <input type="text" name="person[name]" value="John Appleseed">
<input type="radio" name="person[sex]" value="male"> Male
<input type="radio" name="person[sex]" value="female"> Female
<input type="radio" name="person[sex]" value="not_specified"> (Not Specified)
<input type="submit" name="commit" value="Create Person">
</form>
מה שמיוחד כאן זה שיש Radio Button בתור האלמנט האחרון בטופס. וברגע שהבנתם את זה ה"תיקון" קל מאוד - פשוט תוסיפו לטופס שדה input נוסף אחרי ה Radio Button. הטופס הזה למשל עובר בכל הדפדפנים:
<form id="theform" action="/people" method="post">
Name: <input type="text" name="person[name]" value="John Appleseed">
<input type="radio" name="person[sex]" value="male"> Male
<input type="radio" name="person[sex]" value="female"> Female
<input type="radio" name="person[sex]" value="not_specified"> (Not Specified)
<input type="hidden" name="dontcare" value="dontcare" />
<input type="submit" name="commit" value="Create Person">
</form>
אנשים עדיין מתפלאים כשאני בוחר לשלב jQuery בקוד ולהשתמש בו במקום ב APIs המתוחכמים של ה DOM שיש היום. יש איזה סטראוטיפ כאילו האינטרנט כל כך טוב היום שכבר לא צריך jQuery. המציאות היא ש IE11 עדיין לא נעלם, ובאגים מסוג זה אלה דברים שמתגלים רק כשהמערכת כבר מגיעה ללקוחות.
שימוש ב jQuery.serialize היה מונע את הבאג וחוסך לי את המחקר, הגילוי העצוב וה Work Around שלא בטוח שמכסה את כל המקרים. אז כן, גם ב 2018, אם אתם יכולים להרשות לעצמכם - שימו jQuery.
אגב תיעוד של הבאג קיים ברשת כבר מ 2014 למשל בקישור הזה: https://blog.yorkxin.org/2014/02/06/ajax-with-formdata-is-broken-on-ie10-ie11.html