עזרה ב-javascript + שגיאה מוזרה ב-format של time

היי כולם,
אני בטיקט האחרון שלי ויש לי 2 דברים שתוקעים אותי,

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

נראה כך:

יש ברשימה אפשרות לסמן משימה כבוצעה ויש כפתור עריכה
כפתור העריכה מתקשר ל-javascript בעזרתו הוא פותח את המודל טופס של העריכה:

כדי לאפשר את הפונקציונליות הזו של פתיחת המודל + שמירת עריכת הנתונים ב-DB אני משתמשת בספרייה jQuery ששימשה לי תחליף נוח מאוד ל-js.

הקוד של הכפתור:

הקוד jQuery

קיבלתי הערה לא להשתמש בספרייה זו אלא להמיר הכל ל-javascript בעזרת bootstrap.
אין לי רקע ב-javascript ואני מתקשה להתאים את הקוד שלי לבקשה.

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

הקוד של הטסט

השגיאה

אשמח לעזרה בפתרון הבעיות, רוב תודות לעוזרים.

בנוגע לבעיה השנייה – שימי לב שאת בוחרת פעמיים את task מה־DB.
הגיוני שיהיה להם אותו title, לא?
(יש מצב שאני מפספס משהו טריוויאלי)

אני בוחרת פעם אחת בשביל לעדכן את הנתונים, ופעם שניה בשביל לראות שהנתונים השתנו

ניסית לשמור הכותרת של המשימה לפני השינוי, על משתנה נפרד, לפני שאת שולחת את ה־POST?

ניסיתי והכותרת עדיין נשארת זהה

קצת סדר בעניין ה־JavaScript שכדאי לעשות:

מה זה jQuery

חשוב להתחיל בזה ש־jQuery היא לא תחליף ל־JavaScript – היא ממש JavaScript. היא ספרייה (כמו מודול) ישנה שנוצרה לפני שנים רבות כדי “לחפות” על זה ש־JavaScript הייתה בעייתית:

1. היו חסרים הרבה פיצ’רים שימושיים מאוד.
2. הייתה חוסר תאימות בין דפדפנים, וכל דפדפן הכיל פיצ’רים שונים.

מבחינה טכנולוגית, jQuery כתובה ב־JavaScript ובאה להרחיב את היכולות שלנו ב־JavaScript.

היום יש לה פחות אוהדים כיוון שהיא שוקלת הרבה (כלומר – מאטה את טעינת הדף) ולא מספקת פיצ’רים חדשים מעבר לאלו שכבר קיימים ב־JavaScript.
למעשה, יש חלופה טובה ב־JavaScript לרוב המוחלט של הדברים ש־jQuery מספקת, כפי שניתן לראות באתר YouMightNotNeedJQuery.com.
עבורי זה חבל – כי הכרתי את jQuery ממש טוב , אבל בעולם הזה דברים משתנים בקצב די תדיר ומתרגלים.

---

מה זה Bootstrap

קצת בדומה ל־jQuery, ‏Bootstrap הוא מודול שאחראי יותר על CSS ועיצוב. הוא מפותח בידי צוות ב־Twitter.
בגדול הוא אחראי בעיקר על CSS, אבל כמו בכל דבר שרוצים לעשות דינאמית מבחינה עיצובית הוא משתמש (בחלק מהדברים) ב־JavaScript.

אנחנו משתמשים ב־Bootstrap לאורכו של הפרויקט, והוא שם בלתי תלות בפיצ’ר שלך.
למזלנו הרב, Bootstrap, כחלק מהחשיבה שלהם על עיצוב האתר, עיצבו פיצ’ר נחמד של Modal (שזה, כמו שמוסבר בקישור שהבאת, חלון חביב ש"עולה" ויזואלית על תוכן הדף).
יש יתרון בלהשתמש ב־Bootstrap בפיצ’ר כיוון שהוא גם ככה באתר, ולא יוסיף מודול גדול כמו jQuery שאין לנו שימוש בו חוץ מלצורך הספציפי הזה.

---

ידע מקדים ב־JavaScript

1. צריך לדעת שאפשר לייצג את ה־HTML שכתבנו בצורת עץ של תגיות. נניח, בראש העץ יש את התגית HTML, ובתוכו יש 2 תגיות: head ו־body. בתוך ה־head יש גם הרבה תגיות. כיוון שבתוך כל תגית יש תגיות “בנות” שלה, אפשר לייצג כל תגית כ"בת" בעץ (רמה אחת מתחת) של התגית שמכילה אותה. העץ הזה נקרא DOM Tree.
2. בעזרת JavaScript אנחנו יכולים לגשת לאלמנטים בתוך העץ הזה, לקרוא מהם מידע, לערוך אותם ולבצע עליהם פעולות. אפשר ממש לערוך את ה־DOM Tree הזה. זה מה שכיף ב־JavaScript.
3. כשאנחנו רוצים לשמור מידע על ה־DOM Tree ש־JavaScript יוכל לגשת אליו, אנחנו משתמשים ב־data attributes. לדוגמה, אם יש לי כפתור שקשור ל־task, ול־task יש id, אני יכול לתת לו attribute שנקרא data-task-id שערכו יהיה מספר ה־task. זה יראה ככה: <button type="submit" id="our-button" class="btn btn-success" data-type-id="5">.
4. לשמחתינו, JavaScript יכולה לגשת בקלות לאלמנטים בדף – נניח ל־our-button אפשר לגשת בעזרת document.getElementById('our-button').
5. אפשר לגשת ל־attributes של אותו אלמנט בצורה הזו. ספציפית ל־attributes שמתחילים במילה data אפשר לגשת בעזרת .dataset, לדוגמה, אם שמרנו את הכפתור שתפסנו בסעיף הקודם תחת שם המשתנה ourButton, אפשר לעשות: ourButton.dataset.typeId
6. לכל אלמנט בדף, כולל document או window, אפשר לעשות addEventListener. זה מאפשר לנו להוסיף פונקציה ש־JavaScript יקרא לה באופן אוטומטי כשאירוע מסוים יקרה. לדוגמה, על כפתור מסוים נוכל לבצע:
   button.addEventListener('click', function() { console.log('hi'); })
   כלומר, להוסיף event listener שמאזין ללחיצות על הכפתור (האירוע נקרא “click”) וזה ידפיס לנו hi כל פעם שמישהו ילחץ על הכפתור.

---

מה צריך לעשות

1. להוריד את jQuery מה־<script>־ים בתחתית האתר
2. ליצור modal ב־HTML שמייצג את רשימת ה־TODO (עדיף ב־HTML נפרד ולעשות {% include %}, כדי שלא יהיה בלאגן)
3. ליצור modal ב־HTML שמייצג את עריכת ה־Task (עדיף ב־HTML נפרד ולעשות {% include %}, כדי שלא יהיה בלאגן)
4. לדאוג שהכפתורים יפתחו את ה־modal־ים – בלי JavaScript בכלל (גם בלי onclick בכפתורים). חשוב שהשלב הזה יבוא לפני הוספת ה־JavaScript כדי לוודא שהכל פועל אחלה באופן בלתי תלוי גם בלי ה־JavaScript.
5. עכשיו רוצים לגרום לזה שה־modal יתמלא בפרטים הרלוונטיים. יש דוגמה לזה פה. את צריכה שלכפתור יהיה attribute שמתחיל במילים data-bs- ואז השם של ה־field שאת רוצה למלא ב־modal, נניח data-bs-task-id. הקטע הזה של data-attributes זו שיטה נפוצה להחזיק מידע בתוך ה־HTML כדי שיהיה נוח להגיע אליו ב־JavaScript. השלב הזה ידאג שהמידע על ה־task־ים יישב במקום שנוכל להגיע אליו.
6. להוסיף JavaScript שמחכה לכך שהעמוד ייטען (עם DOMContentLoaded).
7. בתוכו, מצאי את האלמנט ה־HTML־י של ה־modal שאת רוצה למלא בפרטים בעזרת document.getElementById.
8. כשיש לך משתנה שמכיל את האלמנט הזה, את יכולה להוסיף לו addEventListener לאירוע show.bs.modal (כלומר: מה יקרה כשה־modal נפתח)
9. בתוכו, את יכולה להשתמש בדוגמה שיש פה כדי לתפוס את הכפתור שלחצו עליו, ולקחת ממנו את כל המידע שנמצא על ה־data-attributes ולהכניס אותם לשדות טקסט הרלוונטיים ב־modal.

אז הכפתור submit שלי בעריכה צריך להכיל בתוכו את כל הנתונים של השדות או שהכפתור שפותח את המודל של העריכה צריך להכיל בתוכו את הנתונים הקודמים כדי שישמרו על השדות שרוצים לערוך?

וגם כל נתון צריך להיות data-bs-time, data-bs-title, data-bs-descriptions וכן הלאה?

כמו פה:

ובהתאמה ניסיתי לכתוב את הפונקציה הזו:

והיא עדיין לא עובדת