1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

IE form target broken when using DOM/AJAX

Discussion in 'JavaScript' started by groovenectar, Jul 12, 2006.

  1. #1
    I think this might be considered a difficult problem to fix, but we'll see. After a lot of debugging, I believe I've hit a wall. Here's the situation:

    What I'm doing is creating a popup dialog (using a <div>) through DOM manipulation. Once a user clicks the link text, the popup <div> is created using appendChild() to the body container.

    Along with the popup <div>, an <iframe> is created and positioned in the same spot. There are two reasons for the iframe: The form target needs to be set to the iframe, and <select> menus have some sort of z-index problem in IE and having an <iframe> behind the <div> fixes it.

    The HTML form contents for the popup dialog are loaded using AJAX and responseText.

    The problem is arising with the form target.

    Here is the code that creates the <div> and <iframe> (ajax_ipopup refers to the iframe):

    var ajax_popup = document.createElement('div');
    ajax_popup.id = 'ajax-popup';
    document.getElementsByTagName('body')[0].appendChild(ajax_popup);
    
    // Create an IFrame to fix IE z-index, and can also be used for scripting
    var ajax_ipopup = document.createElement('iframe');
    ajax_ipopup.src = 'http://localhost/academics/inc/iframe.html';
    ajax_ipopup.id = 'ajax-ipopup';
    ajax_ipopup.name = 'ajax-ipopup';
    ajax_ipopup.scrolling = 'no';
    ajax_ipopup.frameBorder = '0';
    document.getElementsByTagName('body')[0].appendChild(ajax_ipopup);
    Code (markup):
    "iframe.html" is just a placeholder that was added while debugging. I have also tried src = '' and leaving out the src attribute altogether.

    The HTML form is loaded via an AJAX request and added to the popup dialog with the following line of code:

    var popup_content = document.createElement('div');
    popup_content.innerHTML = http_request.responseText;
    ajax_popup.appendChild(popup_content);
    Code (markup):
    Here is the form HTML that is loaded into the dialog:

    <form id="ajax-popup-form" action="" method="post" target="ajax-ipopup">
    <fieldset>
    <legend>Add a Major</legend>
    <label for="name">Name: </label>
    <input name="name" id="name" type="text"><br />
    <label for="abbr">Abbreviation: </label>
    <input name="abbr" id="abbr" type="text">
    </fieldset>
    <input name="submit" type="submit" id="submit" value="Save" class="button" style="margin-right:10px;"><input type="button" value="Cancel" onclick="ajax_popup_close();return false;" class="button">
    </form>
    Code (markup):
    In Firefox, the form is correctly submitted to the iframe. In IE, the form always submits to a new window. However, if I add an <iframe> to the body of the document (without using the JavaScript):

    <iframe src="inc/iframe.html" name="ipopup" id="ajax-ipopup"></iframe>
    Code (markup):
    ...the form submits to that <iframe> in both browsers, as it should.

    The reason that I have to have the form submitted via an iframe rather than AXAJ is because some of these popups will have a file field. I would like the <iframe> inserted via DOM manipulation rather than adding it to the body, since it is tied to the popup. Another reason is that it would be nice to be able to leave out that extra empty tag from the content.
    SEMrush
    I realize this is quite a specific case and is pretty drawn-out, but I really hope that someone knows what to do here... I did some intense debugging before posting this, and I'm down to my last!
     
    groovenectar, Jul 12, 2006 IP
    SEMrush
  2. giraph

    giraph Guest

    Messages:
    484
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Well thanks for the link about the select box problem, I had some trouble with that in the past and just decided I would load it in another spot. I'm not sure if that solution would work for you, to load it away from the form? I would check the names of the iframe in IE and firefox. Obviously the form cannot find the named object so it must not exist in IE. Try using ids that aren't the same as names. Your code looks fine to me at first glance though.
     
    giraph, Jul 12, 2006 IP
  3. groovenectar

    groovenectar Peon

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Good idea... Hah, after I pasted that in here, I was noticing the fact that i never assigned it a name through JavaScript. I'll try that and see if it works... It might be a while before I do, but I'll post the result on here if it works.
     
    groovenectar, Jul 12, 2006 IP
  4. groovenectar

    groovenectar Peon

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    It was brought to my attention that the name is actually specified in there, I had just overlooked it the second time around... So back to the drawing board.
     
    groovenectar, Aug 4, 2006 IP
  5. DrSturgeon

    DrSturgeon Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Any luck on this? I'm having the EXACT same problem--a file upload submitting to an iframe that is created dynamically. Works great in Mozilla, opens a new window in IE.

    I haven't actually spent much time working on it, but I thought I'd ask if you had a fix.
     
    DrSturgeon, Aug 18, 2006 IP
  6. Slackersoft013

    Slackersoft013 Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I realize this sounds really lame, but I was running into the exact same problem with the IFrame in IE until I tried to insert the iframe as html instead of as a DOM object.

    e.g.
    Instead of:
    var iframe = document.createElement("iframe");
    iframe.id = "foo";
    document.body.appendChild(iframe);

    do:
    document.body.innerHTML = document.body.innerHTML+"<iframe id='foo'></iframe>";

    Now IE will address the iframe from a form submit and firefox still doesn't have any problems.

    Note: I haven't tried this in any browser other than IE 6 and Firefox 1.5
     
    Slackersoft013, Aug 29, 2006 IP
  7. groovenectar

    groovenectar Peon

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Hmmm, good looking out.. I'll have to try that.. Thanks for the tip!
     
    groovenectar, Aug 29, 2006 IP
  8. raul

    raul Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    The same problem, I've encountered: submitting a form into a dynamically created IFRAME: FireFox and Opera worked perfect but IE not! :mad:
    After 1 day of debugging, I founded that , following solution works:

    
    var iFrameID  = 'ID1';
    var myIFrame = document.createElement('iframe');
    
    myIFrame.setAttribute('src', 'about:blank');
    myIFrame.setAttribute('id', iFrameID);
    myIFrame.setAttribute('NAME', iFrameID);
    myIFrame.style.display = 'none';
    document.body.appendChild(myIFrame);
    if((onReadyFunction) && (typeof(onReadyFunction) == 'function'))  captureEvent('load', function(){ var iFrame = document.getElementById(iFrameID); var doc = (iFrame.contentDocument)?(iFrame.contentDocument):((iFrame.contentWindow)?(iFrame.contentWindow.document):(self.frames[iFrameID].document)); if (doc.location.href == 'about:blank') { return; } else { onReadyFunction(doc.body.innerHTML); } }, myIFrame); 
    [B]if(self.frames[iFrameID].name != iFrameID) { /* *** IMPORTANT: This is a BUG FIX for Internet Explorer *** */ self.frames[iFrameID].name = iFrameID; }[/B]
         
    
    Code (markup):
    Meanning that AFTER the iframe is created, it should be checked that self.frames[iFrameID].name is equal with iFrameID

    That's all! :D

    The problem was encountered and resolved by me during myAJAX (http://myajax.sf.net) development
     
    raul, Feb 25, 2007 IP
  9. groovenectar

    groovenectar Peon

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Nice work!!
     
    groovenectar, Feb 25, 2007 IP
  10. raul

    raul Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Thank you! You are welcome! :)
     
    raul, Feb 25, 2007 IP