יצרתי טופס העלאת קבצים מרובים, וניתן להוסיף input של file בלחיצה על כפתור "הוסף קובץ".
ובאותה מידה ליד כל input יש כפתור remove.

זאת החתיכה הבעייתית בפונקציה "הוסף קובץ":

קוד:

		var fieldset = document.getElementById("inp");
		var div = document.createElement("div");
			div.className = "fileElement";
			div.id = "file[" +index+ "]";
		var input = document.createElement("input");
			input.type = "file";
			//input.onchange = function() {check(input)};	//Doesn't work at all
			input.setAttribute("onchange", "check(this)"); //Works only in FF
			input.className = "login";
			input.name = "files[]";
		var remove = document.createElement("input");
			remove.type = "button";
			remove.value = "Remove";
			remove.className = "removeFileElement";
			//remove.onclick = function() {remove(index)};	//Doesn't work at all
			remove.setAttribute("onclick", "remove(" +index+ ")");	//Works only in FF

מישהו יכול לעזור לי עם השורות הבעייתיות כדי שיעבדו בכל הדפדפנים?

תשתמש ב- jQuery...

קוד ה-JS הזה כתוב בתוך פונקציה?
אם כן, זאת בעיה של variable scope, ראה באשכול FAQ למטה.
הפיתרון הוא להוריד את מילת המפתח var מהמשתנה input או remove, אבל שים לב שבמקרים אלה המשתנים האלו יהיו זמינים בכל המקומות בסקריפט ה-JS.

אם אשתמש ב jQuery לעולם לא אדע JS כמו שצריך...

ולגבי variable scope, ניסיתי להוריד את var, זה לא שינה דבר... אני די מבין את הבעיה אבל קשה לי להסביר אותה.

setAttribute כביכול מעביר מחרוזת לתוך הevent, ואחרי שתיבת ההעלאה נוצרת הפעולה שקולה לכתיבת

קוד:

 onclick="func(this)"

אבל כשמשתמשים בשיטה obj.onclick=function(){} הקוד שנכנס לevent נמצא ב context של הפונקציה. ואי אפשר למשל להשתמש ב this וכו'...

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

ציטוט:

אם אשתמש ב jQuery לעולם לא אדע JS כמו שצריך...

צודק 100%

אה עכשיו שמתי לב שלא ביצעת append של האלמנט למסמך Oo

סתכל בעמוד הזה: http://www.quirksmode.org/dom/w3c_core.html
ותחפש append
הרבה זמן עבר מאז שהתעסקתי בדברים האלה, אבל אני חושב שתצטרך להשתמש ב- appendChild.

בוודאי שהשתמשתי פשוט זה לא היה רלוונטי לבעיה אז לא כללתי את זה.

זה הקוד:

קוד:

function add()
{
	if (c < max_files)
	{
		fieldset = document.getElementById("inp");
		div = document.createElement("div");
			div.className = "fileElement";
			div.id = "file[" +index+ "]";
		input = document.createElement("input");
			input.type = "file";
			input.onchange = function() {check(input)};	//Doesn't work at all
			//input.setAttribute("onchange", "check(this)"); //Works only in FF
			input.className = "login";
			input.name = "files[]";
		remove = document.createElement("input");
			remove.type = "button";
			remove.value = "Remove";
			remove.className = "removeFileElement";
			remove.onclick = function() {remove(index)};	//Doesn't work at all
			//remove.setAttribute("onclick", "remove(" +index+ ")");	//Works only in FF
			
		div.appendChild(remove);
		div.appendChild(input);
		fieldset.appendChild(div);
		++index;
		++c;
	}
	else
	{
		alert("You can not upload any more files.");
	}
}

ניסית לבצע את פעולות ה-append בצורה הפוכה?

כך:

קוד:

		fieldset.appendChild(div);
		div.appendChild(remove);
		div.appendChild(input);

אני חושב שמנוע ה-DOM של הדפדפן לא יכול לזהות אלמנט לפני שהוסיפו אותו למסמך. ולכן אי אפשר להוסיף אלמנטים לאלמנט שעדיין לא קיים בתוך המסמך (או ש-IE6 פשוט ישן מידי).

ניסיתי, לא שינה כלום.

השגיאה שIE רושם לי:

ציטוט:

האובייקט אינו תומך במאפיין או בפעולת שירות אלה

ולפי מה שהבנתי הוא מדבר על השורה הזאת:

קוד:

remove.onclick = function() {remove(index)};

אני כלכך שונא את IE, שונא!!!!!!!

אני חושב שהפעולות האלה לא מתאימות ל-events

ראה כאן: http://www.google.co.il/search?hl=i...&meta=&aq=f&oq=

(זה לא סתם חיפוש בגוגל, אלא באתר הספציפי http://www.quirksmode.org )

אמור להיות שם פיתרון עד כמה שאני זוכר.

קראתי די הרבה בנושא, וראיתי כמה שיטות לעשות את זה, ואף אחת מהן לא עונה על מה שאני צריך.

הבעיה היא כמו שרשמתי בהתחלה, הפונקציה remove מוחקת את ההעלאה שהid שלה הוא המשתנה index הנוכחי, ולא index שהיה קיים בזמן יצירת ההעלאה הנוספת.
ז"א, לא משנה על איזה כפתור remove אני לוחץ, קופצת לי הודעה קבועה (למשל "Execeuted 5").

מה שאני מחפש זה שלכל כפתור remove תהיה פונקציה מותאמת משלו. (מה שעבד נפלא עם setAttribute).

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

הקוד שלי עכשיו נראה ככה:

קוד:

removeb.onclick = function(){remove(index)};

והפונקציה למחיקה:

קוד:

function remove(idNum) {
alert("Executed "+idNum);
	if(c > 1)
	{
		fileNode = document.getElementById("file["+idNum+"]");
		fileNode.parentNode.removeChild(fileNode);
		--c; // Note that Index does not decreasing it's value - to avoid duplicated ids....
	}
}

עריכה:
העלתי את הקובץ כדי שיהיה קל יותר להבין:

https://2009-uploaded.fresh.co.il/2...6/49418637.html

זה לא נכון שאם תשתמש בחבילה אז לעולם לא תדע JS... זה אפילו לא קשור אחד לשני.

למה לא?

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

ולמה הוא צריך לדעת להתאים את הקוד?
ז"א, זה כמו שאני אגיד לך שאתה צריך לכתוב תוכנית בC שתתאים לכל הקומפיילרים - אם יש כלי שממסך לך את זה, למה לא להשתמש בו?

זה לא כאילו שהכלי הזה יעשה את כל הפעולות שהוא ביצע עכשיו, הוא עדיין יצטרך לעשות אותן.

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

מסכים לגמרי אבל זה לא ייגרע מהיידע של המפתח.
אני אוסיף ואומר ששימוש בתשתית כזו או אחרת בJS תוסיף ליידע של המפתח כי היא תכיר לו צורות עבודה שונות.

גם נכון

כדי להירשם לevent אתה צריך להשתמש ב addEventListern ו attachEvent

http://v3.thewatchmakerproject.com/...and-attachevent

!!אזהרה!!

ההודעה עלולה להכיל שברי אגוזים ו/או איברי דגים כלשהם

!!אזהרה!!

ציטוט:

There is no current IE version supporting addEventListener which is a method defined in the W3C DOM Level 2 Events module which IE doesn't support.

בכל מקרה, הצלחתי בסופו של דבר

תודה רבה לדור ולך...

למי שמעוניין לראות איך יצא:
https://2009-uploaded.fresh.co.il/2...6/33502712.html

אחד הכלים שהכי עזר לי במציאת הפיתרון הוא התוסף FireBug - פשוט מצויין אין מילים.

כל הכבוד, עובד 10