modal with bootstrap: בעיה בסגירה שלו לאחר שליחת טופס

[avr416]

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

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

תודה רבה לכל העוזרים והמסייעים, תבורכו מן השמים!!

פורסם במקור בפורום CODE613 ב23/02/2016 10:42 (+02:00)

[dovid]

הדוגמה שלך נראית עובדת לגמרי.
לא רואה שום בעיה ואני לא יכול לדמות פעול שרת במחיקה.
לקריאות ולדמות מס' אנשים ערכתי את הדוגמה: http://codepen.io/avrahamAhituv/pen/jWgbeQ?editors=1010

לא הבנתי מה תפקיד האטריביוט הזה data-href.

ואברהם, אני מתקנא ברמה. אני ממש לא שמה בweb.

פורסם במקור בפורום CODE613 ב23/02/2016 22:19 (+02:00)

[מנצפך 0]

ר' אברהם (הלוי)!
אולי תתן קצת הסבר מה רצית לעשות שם איך ולמה וכמה.
לטובת אלה (אני) שלא בעניינים.
ומה זה השירות הזה בדיוק? (codepen)
תודה.

פורסם במקור בפורום CODE613 ב23/02/2016 22:26 (+02:00)

[ארכיטקט]

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

פורסם במקור בפורום CODE613 ב24/02/2016 01:42 (+02:00)

[dovid]

טעיתי בלינק, http://codepen.io/anon/pen/adewWg?editors=1010
וארכיטקט זה לא עושה כלום כי זה לא מצליח לעשות submit (אין לו את הצד שרת).

פורסם במקור בפורום CODE613 ב24/02/2016 10:47 (+02:00)

[avr416]

תודה לכולם על ההיענות והתשובות!!
@דוד ל.ט.

הדוגמה שלך נראית עובדת לגמרי.
לא רואה שום בעיה ואני לא יכול לדמות פעול שרת במחיקה.

גם אני לא.. אבל משום מה זה עדיין לא עובד, ואין לי מושג למה?
אולי בגלל שיש לי טבלת אנשי קשר, ולכל איש קשר יש קישור למחיקה שפותח את אותו מודל, ורק מציב בו ערכים שונים ע"י הJS, לכן בפעם הראשונה שאני לוחץ עליו זה עובד טוב. אולם אח"כ כשאני רוצה למחוק איש קשר נוסף, אז הוא לא יודע את מה לסגור, כי הוא חושב שאני מתכוון לקודם?
למרות שזה לא כ"כ הגיוני שהרי הוא סגר אותו וחיסל אותו, לא? וממילא אובייקט המודל הקודם כבר לא קיים בכלל.. או שאולי עדיין יש לו בזכרון הפניות אליו ולכן הוא מתבלבל??

@דוד ל.ט.

לא הבנתי מה תפקיד האטריביוט הזה data-href.
ואברהם, אני מתקנא ברמה. אני ממש לא שמה בweb.

קודם כל, תודה על המחמאה, אבל הלוואי שהייתי בweb מתקרב לרמה שלך :lol:
האטריביוט הזה אכן מיותר, בהתחלה השתמשתי בו כי בהתחלה חשבתי שהלחיצה על כפתור אישור תפעיל אירוע ששולח בקשה לכתובת הזאת ישירות, אולם משום מה לא הצלחתי, (בשלב ההוא עוד השתמשתי ב Jquery-ui modal), כי הוא לא זיהה את הכפתור שמופיע במודל, וממילא לא יכלתי לשתול בו את הקישור בצורה דינמית.
אח"כ חשבתי על הרעיון שהמודל יכיל טופס פשוט (שבסה"כ מחזיק את הID של האיש קשר) ושלוחצים על אישור בעצם מפעילים submit לקישור המבוקש.
השאלה שלי היא האם ישנה דרך פשוטה יותר בלא שימוש בsubmit, אלא שהלחיצה על אישור פשוט תיתן אור ירוק לביצוע הפעולה הראשונית? כגון, יש קישור למחיקה, ברגע שלוחצים עליו זה פותח את המודל, ובמידה והאדם לחץ על אישור זה יפעיל את הקישור, ובמידה ולא - יבטל את הפעולה.
ראיתי שיש את הפקודה

confirm שהיא דומה לalert ובעצם עושה את מה שאני מחפש, אלא שבהתחלה לא ידעתי על קיומה, וכיון שכך אני כבר מחפש לדעת איך לעשות זאת ע"י modal.

@םןץףך

ר' אברהם (הלוי)!
אולי תתן קצת הסבר מה רצית לעשות שם איך ולמה וכמה.
לטובת אלה (אני) שלא בעניינים.
ומה זה השירות הזה בדיוק? (codepen)
תודה.

קודם נתחיל בזה שאני לא ר' ולא לוי :lol:
את ההסבר כתבתי בהודעה הראשונה, אבל נחזור בקצרה, אני רוצה לעשות משהו בדומה ל - message.show() רק בווב, דהיינו הודעה קופצת שתוודא שאכן המשתמש מודע ומאשר את מה שהוא עושה (בד"כ לפני ביצוע פעולות משמעותיות שאין אחריהם דרך חזרה.. כגון מחיקה, תשלום וכדו').
לשם כך, יש בJS אפשרות להשתמש בפקודה alert שהיא מקפיצה למשתמש חלון עם הודעה, אלא ששם אני לא יכול (או לא יודע..) להוסיף כפתורים כעין "אישור / ביטול", ולכן צריך לעשות הודעה מותאמת אישית.
לשם כך (ולעוד דברים, כמובן) יש ב - bootstrap (שהיא ספרית עיצוב, ובדומה לה jquery-ui) דבר שנקרא "modal" שהוא מקפיץ חלון על המסך, שמאחוריו יש רקע שחור חצי שקוף, ובו אתה יכול להציב טופס שלם, או סתם הודעה עם כפתורי אישור וביטול וכו'.
הענין הוא, שאצלי לאחר הלחיצה על אישור זה מסתיר את ההודעה, אך לא את הרקע השחור, וממילא א"א לחזור למסך עצמו בדפדפן, אא"כ נרפרש את הדף מחדש.
codepen זהו עורך טקסט חינמי (html,css,js) וובי, שדרכו אפשר לשתף דוגמאות קוד, כאשר רוצים לשאול שאלות או להראות דוגמ' וכדו' באופן מקוון. יש גם את jsfiddle המוכר, ואת JS Bin

וארכיטקט, הפקודה היא:

function closeModal() {      
        $('.modal').modal('hide');
    };

ובאובייקט אני מגדיר שהוא יקרא לה לפני ביצוע הsubmit:

var options = {      
        beforeSubmit: closeModal, 
        success: showData
    };

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

פורסם במקור בפורום CODE613 ב24/02/2016 10:50 (+02:00)

[dovid]

לדעתי איך שעשית זה הכי טוב.
כי confirm יחזיר רק כן/לא, ויחייב את השולח לעשות post. מה יש? זה אומר שאחד מהשתיים: או תכתוב קוד לשרשור הפרמטרים (ויתור על רעיון הform שזה בעצם הצהרת פרמטרים במקום קידוד, שזה קריא וקל לתחזוקה. זה נכון שבמקרה מחיקה יש רק ID, אבל מה עם עדכון ופעולות אחרות?) או שתכתוב form מסביב לכל איש קשר (הגדלת הדף בכמה אלפי תווים על לא דבר).
זה שזה לא עובד, לא משנה את העובדה שעשית הכי טוב.

פורסם במקור בפורום CODE613 ב24/02/2016 11:13 (+02:00)

[softs]

אני לא רואה בעיה, הקישור שהבאת עובד אחרי הוספה ידנית של הקובץ JS של AjaxForm ל resources, ומסתיר את ההודעה יפה מאוד.
אם אתה מביא fiddle חשוב שתוודא שהוא באמת יציג את הבעיה ושיהיה מוגדר קישור לכל קבצי ה JS.

פורסם במקור בפורום CODE613 ב24/02/2016 16:10 (+02:00)

[dovid]

חיפשתי שרת לטסט ולמדתי על האתר httpbin.org (שמקוה שייפתח אוטוטו בנטפרי ובינתיים ניסיתי ממחשב אחר)
הנה דוגמה מעודכנת: http://codepen.io/dlt/pen/yemGOd?editors=1010
שיניתי הרבה בקוד לטעמי, חשבתי שחייבים הכל לעשות בready. האובייקט המודל לא משוכפל אז שמרתי במשתנים את האלמנטים שצריכים עדכון במקום לטעון אותם כל פעם. בגלל שהפונקציה בתוך הסקופ שלהם הם "נלכדים" וזמינים גם מאוחר יותר.

(הוספתי קוד JS לעיצוב הJSON לקוח מהתשובה הזו: http://stackoverflow.com/a/7220510/1271037).

אברהם שוב תודה!

פורסם במקור בפורום CODE613 ב24/02/2016 16:12 (+02:00)

[avr416]

תודה על כל העצות וההשקעה בעזרה ובניסיון לפתור את הבעיה.
@softs

אם אתה מביא fiddle חשוב שתוודא שהוא באמת יציג את הבעיה ושיהיה מוגדר קישור לכל קבצי ה JS.

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

בכל אופן, ניסיתי לעשות כמו שדוד עשה וזה אכן עובד לו - אולם אצלי זה לא עובד. אולי הבעיה אצלי בספריות שמתנגשות אחת עם השניה, אני אנסה לבדוק זאת. אחרת - אין לי שמץ של מושג למה זה לא עובד.. (עכשיו אפי' בפעם הראשונה שאני מריץ זה לא עובד..)

@דוד ל.ט.

מה יש? זה אומר שאחד מהשתיים: או תכתוב קוד לשרשור הפרמטרים (ויתור על רעיון הform שזה בעצם הצהרת פרמטרים במקום קידוד, שזה קריא וקל לתחזוקה. זה נכון שבמקרה מחיקה יש רק ID, אבל מה עם עדכון ופעולות אחרות?) או שתכתוב form מסביב לכל איש קשר (הגדלת הדף בכמה אלפי תווים על לא דבר).

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

דוד, תודה על החידושים שהבאת לנו לגבי השרת לבדיקות, והעדכונים שעשית בקוד, אכן כך הקוד הרבה יותר יעיל!!

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

פורסם במקור בפורום CODE613 ב24/02/2016 21:13 (+02:00)

[avr416]

ניסיתי לנטרל ספריות אחרות ולבדוק אם זה עובד - אבל זה עדיין נתקע.

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

לא יודע מה לעשות

פורסם במקור בפורום CODE613 ב24/02/2016 23:09 (+02:00)