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)

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.