CODEWITHSUNDEEP
internet-explorertwitter-bootstrap
yuvi
yuvi

Reputation: 18427

IE hates my modal window events

I am building a website and am using Twitter Bootstrap modal.js as part of my project. And as usual, IE is causing some trouble.

I have a few buttons, that when clicked each fetches a different form through ajax, fills the modal with the form, and brings it up. Since they are being fetched dynamically I need to update some of the fields with additional scripts (jQuery UI datepicker for example) after the modal is being fetched. Immediately after the ajax call does not work so I need to use the modal events.

This works on chrome:

$('#myModal').modal().on('shown', function() {
    $('#id_date').datepicker();
});

However, IE does something weird. For it to work I had to bind the listener to the 'show' event ('shown' doesn't work) and to the document instead of the modal.

Inside a document.ready: 

$(document).on('show', function() {
    $('#id_date').datepicker();
});

After clicking a button:

$('#myModal').modal('show');

But here's the kicker - this doesn't work either unless I add an alert('hello'); above the .datepicker(). Why does alert change anything? I don't know, but then it also stacks up - every time you click on one of the buttons you get more alerts, i.e. the first time one alert, the second time two alerts and so on.

I am using bootstrap 2.2 and IE8 (standards mode, there's also a meta to make sure the page is rendered as IE8 and not an older version). I have no idea what's the problem here, please help!

Update

So I narrowed it down a little. This isn't anything to do with the 'shown' or 'show' events or what it is binded for. It's a lot weirder. This is what I ended up doing:

$('#myModal').on('shown', function() {
     if (navigator.appName == 'Microsoft Internet Explorer') {
         alert('Hey! you should really use Chrome!');
     }
     $('#id_date').datepicker();
     $('#id_tags').chosen(); 
});


$('#button1').on('click', function() {
     $('#myModal').modal();
});

Without the alert message, IE doesn't run the datepicker and chosen code that comes immediately afterward. why would a simple alert have such an impact?

Upvotes: 0

Views: 1444

Answers (1)

Hedde van der Heide
Hedde van der Heide

Reputation: 22449

Edit: After reconsideration this seems to be a race condition

I don't have a real answer on why this is happening, other than IE being a pain with different jQuery versions and html5 attributes..

However, I do remember having had a similar issue a few months ago, if I'm not mistaken, adding the following line to your html head section should help a lot.

<!--[if lt IE 9]>
    <script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Upvotes: 1

Related Questions