SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Please a workaround for this appendchild IE Problem.

    This JS code works great in Firefox, Opera, but not in Internet Explorer...

    The problem is this line:
    Code:
    el_Label.appendChild(newtext);
    I open a second window with a image selector by click, the selected images then are added to a form in the first windows.

    <table class="hairline" style="font-size: 10px">
    <tr>
    <td><img onCLick="javascript:addMedia(this);" id="ID-NUMBER" src="IMAGE" alt="TEXT" width="90" /></td>
    </tr>

    <tr>
    <td><img onCLick="javascript:addMedia(this);" id="ID-NUMBER" src="IMAGE" alt="TEXT" width="90" /></td>
    </tr>
    </table>


    Code:
    // Add media
    function addMedia(obj)
    
    {
    
    	if (opener.document.getElementById('media-' + obj.id)) {
    
    		alert('Media already exists.');
    
    	} else {
    
    		var el_main = opener.document.getElementById('media-container');
    
    		// Create list element
    		el_Media = opener.document.createElement('li');
    		el_Media.id = 'media-' + obj.id;
    		el_Media.className = 'thumbnail';
    		//el_Media.onclick = function(){this.parentNode.parentNode.removeChild(this.parentNode);};
    
    		// Create hidden input field
    		el_INPUT = opener.document.createElement('input');
    		el_INPUT.name = "media[]";
    		el_INPUT.value = obj.id;
    		el_INPUT.type = "hidden";
    
    		// Add mediaThumb
    		el_IMG = opener.document.createElement('div');
    		el_IMG.id = 'mediaThumb-' + obj.id;
    		el_IMG.className = 'mediaThumb';
    		el_IMG.style.backgroundImage = "url('" + obj.src + "')";
    
    		// Add remove button
    		el_Label = opener.document.createElement('div');
    		el_Label.id = 'mediaLabel-' + obj.id;
    		el_Label.className = 'mediaLabel';
    		el_Label.onclick = function(){this.parentNode.parentNode.removeChild(this.parentNode);};
    		var newtext = document.createTextNode("Remove");
    
    		// Add it to the document
    		el_Media.appendChild(el_INPUT);
    		el_Media.appendChild(el_IMG);
    		el_Media.appendChild(el_Label);
    		el_Label.appendChild(newtext);
    		el_main.appendChild(el_Media);
    
    		opener.initMedia();
    
    	}
    }

    I know there are problems with IE and appendchild... please point me to a workaround even if adding an new external JS or someting.


    Engel

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by engelsol View Post
    This JS code works great in Firefox, Opera, but not in Internet Explorer...

    The problem is this line:
    Code:
    el_Label.appendChild(newtext);
    Code:
    var newtext = document.createTextNode("Remove")
    Perhaps you should create all your nodes and their children in their target document.
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In another forum some one point out to change

    var newtext = document.createTextNode("Remove");
    to
    var newtext = opener.document.createTextNode("Remove");


    and now.. it works in IE...But now after putting the image correctly in the form of main window..the only thing is that you cannot remove them if you made a mistake...
    I guess it have something to be with the windows...

    what you think... any idea+

    Engel

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    as long as you have a document element, you should be able to create a textnode.

    Code:
            el_Label = opener.document.createElement('div');
            el_Label.id = 'mediaLabel-' + obj.id;
            el_Label.className = 'mediaLabel';
            el_Label.onclick = function(){this.parentNode.parentNode.removeChild(this.parentNode);};
            el_Label.appendChild(document.createTextNode("Remove"));

    try using the above and removing the

    el_Label.appendChild(newtext);


  5. #5
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    thanks

    thanks a lot.

    It works now as expected.

    But I had to change:
    el_Label.appendChild(document.createTextNode("Remove"));
    to:
    el_Label.appendChild(opener.document.createTextNode("Remove"));
    It looks like as there is a multi windows thing there..

    Thanks again.

    Engel

  6. #6
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    another issue

    now the only thing is that when adding picture

    this line (remove picture) works great in edit mode. Only if images are already saved to document:
    Code:
    el_Label.onclick = function(){this.parentNode.parentNode.removeChild(this.parentNode);};
    But if you are just adding picture (before saving) and then you made a mistake and need to remove a picture before saving, NOTHING HAPPEN.

    Any idea?


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
  •