SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist NokX's Avatar
    Join Date
    Feb 2003
    Location
    Knoxville, TN
    Posts
    529
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    appendChild, createElement, setAttribute in IE

    this works perfectly in firefox - but in internet explorer it just creates the first lable and the input field, although it creates the input field as a regular text field instead of for files. the caption label and text field aren't created at all. any ideas?

    Code:
    function addphoto() {
    	var photos = document.getElementById("photos"); // the element that containts the fields
    	
    	// create a label for the file field
    	var title = photos.appendChild(document.createElement("strong"));
    	title.innerHTML = "Photo " + count.value;
    	
    	// create the file input field
    	var file = photos.appendChild(document.createElement("input"));
    	file.setAttribute("type", "file");
    	file.setAttribute("size", 70);
    	file.setAttribute("name", "filPhotos[]");
    	
    	// create a label for the text field
    	var caption = photos.appendChild(document.createElement("strong"));
    	caption.innerHTML = "Caption " + count.value;
    	
    	// create the text field
    	var text = photos.appendChild(document.createElement("input"));
    	text.setAttribute("type", "text");
    	text.setAttribute("name", "txtCaptions[]");
    }

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    See post lower down

    Hey there,

    I had exactly the same problem as you. AppendChild seems to be fine, the problem is setAttribute. Take a look at the suggestion someone else gave me in a post about 3-4 below yours.

    Instead of setAttribute use the html tag name.

    Ie:

    Code:
    document.setAttribute('id', 'doggy');
    becomes

    Code:
    document.id = 'doggy';
    Note that for setting the class attribute, you actually use className (I guess since class is a restricted word in Javascript).

  3. #3
    SitePoint Evangelist NokX's Avatar
    Join Date
    Feb 2003
    Location
    Knoxville, TN
    Posts
    529
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    your suggestion makes sense... and it, again, works perfect in firefox - but it's still doing the same thing in IE.

    here's what i did differently...

    Code:
    function addphoto() {
    	var count = document.getElementById("hidCount");
    	
    	var photos = document.getElementById("photos");
    	
    	photos.appendChild(document.createElement("hr"));
    	
    	var title = photos.appendChild(document.createElement("strong"));
    	title.innerHTML = "Photo " + count.value;
    	
    	var file = photos.appendChild(document.createElement("input"));
    	file.type = "file";
    	file.size = 70;
    	file.name = "filPhotos[]";
    	/*file.setAttribute("type", "file");
    	file.setAttribute("size", 70);
    	file.setAttribute("name", "filPhotos[]");*/
    	
    	var caption = photos.appendChild(document.createElement("strong"));
    	caption.innerHTML = "Caption " + count.value;
    	
    	var text = photos.appendChild(document.createElement("input"));
    	text.type = "text";
    	text.name = "txtCaptions[]";
    	/*text.setAttribute("type", "text");
    	text.setAttribute("name", "txtCaptions[]");*/
    	
    	document.getElementById("hidCount").value = parseInt(document.getElementById("hidCount").value) + 1;
    }

  4. #4
    SitePoint Evangelist NokX's Avatar
    Join Date
    Feb 2003
    Location
    Knoxville, TN
    Posts
    529
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    and if it helps explain the issue any further, it's doing this in safari...



    in safari, it's definitely not turning the photo field into a "type=file" field - which makes me just assume the other attributes aren't being passed along, as well.

    in IE only "Photo 2" will appear and a field, but it's not even a "type=file", either.

  5. #5
    SitePoint Evangelist NokX's Avatar
    Join Date
    Feb 2003
    Location
    Knoxville, TN
    Posts
    529
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    NOTICE



    the ONLY way to create dynamic elements in internet explorer is to do this:

    Code:
    function addphoto() {
    	var count = document.getElementById("hidCount");
    	
    	var photos = document.getElementById("photos");
    	
    	photos.appendChild(document.createElement("hr"));
    	
    	var title = photos.appendChild(document.createElement("strong"));
    	title.innerHTML = "Photo";
    	
    	[var file = photos.appendChild(document.createElement("<input type=\"file\" name=\"filPhotos[]\" size=\"70\" />"));
    	
    	var caption = photos.appendChild(document.createElement("strong"));
    	caption.innerHTML = "Caption";
    	
    	var text = photos.appendChild(document.createElement("<input type=\"text\" name=\"txtCaptions[]\" />"));
    }
    but this method does NOT work in mozilla browsers

  6. #6
    SitePoint Evangelist NokX's Avatar
    Join Date
    Feb 2003
    Location
    Knoxville, TN
    Posts
    529
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    my final version, for anyone that's interested...

    Code:
    function addphoto() {
    	var photos = document.getElementById("photos");
    	
    	photos.appendChild(document.createElement("hr"));
    	
    	var title = photos.appendChild(document.createElement("strong"));
    	title.innerHTML = "Photo";
    	
    	if (navigator.appName == "Microsoft Internet Explorer") {
    		var file = photos.appendChild(document.createElement("<input type=\"file\" name=\"filPhotos[]\" size=\"70\" />"));
    	} else {
    		var file = photos.appendChild(document.createElement("input"));
    		file.setAttribute("type", "file");
    		file.setAttribute("size", 70);
    		file.setAttribute("name", "filPhotos[]");
    	}
    	
    	var caption = photos.appendChild(document.createElement("strong"));
    	caption.innerHTML = "Caption";
    	
    	if (navigator.appName == "Microsoft Internet Explorer") {
    		var text = photos.appendChild(document.createElement("<input type=\"text\" name=\"txtCaptions[]\" />"));
    	} else {
    		var text = photos.appendChild(document.createElement("input"));
    		text.setAttribute("type", "text");
    		text.setAttribute("name", "txtCaptions[]");
    	}
    }

  7. #7
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have dynamically created elements in Firefox and IE using the same script. Check out
    http://www.unitorganizer.com/website...eNodeTest.html.

    Script works in both IE and Firefox, boxes even look pretty much the same.

    Dave

  8. #8
    SitePoint Evangelist NokX's Avatar
    Join Date
    Feb 2003
    Location
    Knoxville, TN
    Posts
    529
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dwees
    I have dynamically created elements in Firefox and IE using the same script. Check out
    http://www.unitorganizer.com/website...eNodeTest.html.

    Script works in both IE and Firefox, boxes even look pretty much the same.

    Dave
    yeah...certain elements will work. but it doesn't appear that the "type" attribute has any say when used in Internet Explorer.

    for example, i can run this successfully all day on both firefox and IE...

    var file = photos.appendChild(document.createElement("input"));
    file.setAttribute("value", "Testing");

    but when i try this...

    var file = photos.appendChild(document.createElement("input"));
    file.setAttribute("type", "file");

    it only works in firefox - so i have to resort to this, with IE:

    var file = photos.appendChild(document.createElement("<input type=\"file\" name=\"filPhotos[]\" size=\"70\" />"));

    the name and size attributes can be added as in the same way as above, but i figured while IE was forcing me to declare my input type in createElement i'd go ahead and declare all of 'em.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •