Tutorial: jQuery wrap doesn’t work in IE

This is something happen to me a while ago when i am testing my WordPress plugin over different browser (testing cross browser issue). Every browser work well (Firefox, Opera, Chrome, Safari) but IE went wrong. Not surprising IE is the king for being different and causing most problem to developers (well known fellow). Oddly, IE is pointing its finger on one of the line related to jQuery wrap manipulation operation. Weird.

Problem

After debugging a while, i manage to find the problem that is happening with IE and not with other browsers. I used wrap operation to insert a form into a div container (to perform a asynchronous upload over different browser and try not to knock on WordPress style sheet etc.). So the form should wrap over the div container as stated in jQuery documentation. However, in IE it couldn't seems to find this particular new form that was inserted through the wrap operation (scratch head). Since this is a JavaScript DHTML operation, obviously it won't show during view source (at least not for IE). Through the error line instructed by IE browser it indicated that the particular form ID could not be found (form doesn't exist). jQuery warp doesn't support IE 7? Nah..

Solution

So what is going on? Many jQuery users will like to write a wrap operation in this way (including me)

$('#example').wrap('<form id="form2" name="form" action="#" method="POST" enctype="multipart/form-data" >');

This is perfectly alright to wrap a form over some div block. Nothing seems to be wrong as it can be declare this way. Well, most of us will do that since it doesn't add additional word to lengthen the instruction which always make it a bit difficult to read (due to jQuery chaining). However, if you declare it this way using the wrap operation, IE will not work! The wrap operation basically fail without showing any error indicating that the new form which was instructed to create was not there. Good news is that it is not really jQuery fault that it doesn't work when declaring a wrap operation this way. In order for jQuery v1.3 to work in IE using the wrap operation, the declaration must be in this form

$('#example').wrap('<form id="form2" name="form" action="#" method="POST" enctype="multipart/form-data" ></form>');

seems no differences between the two code. But the key is the closing tag which is that ONLY requirement for IE to work flawlessly. Without the closing tag it will not work.

Demo

let me show you a demo to illustrate the differences between the two declaration using the following JavaScript.

$(function(){
	$('#wrong').wrap('<form id="form1" name="form" action="#" method="POST" enctype="multipart/form-data" >');
	$('#correct').wrap('<form id="form2" name="form" action="#" method="POST" enctype="multipart/form-data" ></form>');
});

function withoutCloseTag()
{
	if(document.getElementById('form1') != null && document.getElementById('form1') != "undefined")
	{
		alert("We found wrap for button 'IE with problem'");
	}
}

function withCloseTag()
{
	if(document.getElementById('form2') != null && document.getElementById('form2') != "undefined")
	{
		alert("We found wrap for button 'IE without problem'");
	}
}

The script will alert if the usage of wrap is successful and when fail it will not show any alert message. Try this in IE with other browser. You will find that the second declaration work flawlessly over all browser while the first declaration will only work on all browser except IE (IE no pop out).

Conclusion

Unlike some jQuery tutorial online that teaches the basic of jQuery that indicates the first method of declaration work (without closing tag). It is necessary for jQuery developers to know the differencces between declaring a DHTML operation using jQuery that a closing tag will make a differences when your application is serving different browser.

$(function(){
$('#wrong').wrap('
');
$('#correct').wrap('
');
});
function withoutCloseTag()
{
if(document.getElementById('form1') != null && document.getElementById('form1') != "undefined")
{
alert("We found wrap for button 'IE with problem'");
}
}
function withCloseTag()
{
if(document.getElementById('form2') != null && document.getElementById('form2') != "undefined")
{
alert("We found wrap for button 'IE without problem'");
}
}

Share

4 thoughts on “Tutorial: jQuery wrap doesn’t work in IE

  1. as far as i can see..this has nothing to do with wrap. It also doesn't work in Opera btw. Opera and IE way of operating are different from wekit browsers. It is most likely due to the flash you have embedded into your code. Highly unlike its the problem with jQuery. It seems like in IE and Opera, both are waiting to be animated which i believe is what the flash is told to do, wait (since flash gets the event, jQuery doesn't). May be you can try to blind the event on the whole document,
    $(*).click(function(){
    $('#test1, #test3').animate({marginLeft: '100%'}, 2000);
    $('#test2, #test4').animate({marginLeft: '-100%'}, 2000);
    });

    so that whenever you click on whatever element on the document it will still animate since the design of your site is to just animate away upon any click.

  2. Hey Clay,

    Thanks a lot for your help but I don't get it to work. I've tried to replace/add your code to my code. But could you point me out where I need to (re)place this code? I've tried at least 30 options to place the code but I've run out on the options now. Thanks again for your support!

    CHris

  3. Wow, 30 are a lot. Firstly, i think you must be aware of your current problem. Each Flash has an event handler which will happen after 2000 millisecond. At the same time, the jQuery should be fired up within this 2000 millisecond. The problem is that flash overlapped the container event handler, click. Therefore, whenever users clicked on the images displayed on your page it will only be able to fire up Flash events. But you need both event handler to work at the same time. This sound like a job for this article. If you still can't get it to work, there is another more complex way of doing this which i will not recommend. I believe there is a much simple solution out there. After knowing where goes wrong i believe you will have a much better idea to seek for your solution!

Comments are closed.