Question

I have 2 modal windows that are triggered from button clicks. They work fine in all browsers except IE7 (haven’t tested below this)

I was only able to demo the basic functionality in the demo but here goes. The first modal-dialog works fine, if you click on “loading data from server” it should close. The second modal does not work at all. On the demo it does nothing when you click “loading data from server”. (on my local copy when I click it removes the modal background div, wtf?)

The real curveball comes in when you open the second modal-dialog window first. Then both modals work fine. This is really getting to me (Damn you IE7)

I am using .live for the table row clicks within the Modal window. I need this to stay that way in order for the data to be sent to the form correctly.

The fiddle is here: http://jsfiddle.net/clintongreen/5DJxv/10/

Answer 1

The following code was not working in IE7:

$('#find_address_postal').click (function () {
$('.modal_form_postal').dialog('open');
$('table#table-data').attr( 'id', 'table-data_postal' );
$('table#table-data_pobox').attr( 'id', 'table-data_postal' );
$('td.address_street').removeClass("address_street").addClass("address_street_postal");
$('td.address_suburb').removeClass("address_suburb").addClass("address_suburb_postal");
$('td.address_city').removeClass("address_city").addClass("address_city_postal");
$('td.address_code').removeClass("address_code").addClass("address_code_postal");
$('td.address_street_pobox').removeClass("address_street_pobox").addClass("address_street_postal");
$('td.address_suburb_pobox').removeClass("address_suburb_pobox").addClass("address_suburb_postal");
$('td.address_city_pobox').removeClass("address_city_pobox").addClass("address_city_postal");
$('td.address_code_pobox').removeClass("address_city_pobox").addClass("address_code_postal");
$('label#suburb_search').css('display','none');
$('label#street_search').css('display','inline');
$('input#street_description').css('width','330px');
}); //end click handler

$('#find_address').click (function () {
$('.modal_form').dialog('open');
$('table#table-data_postal').attr( 'id', 'table-data' );
$('table#table-data_pobox').attr( 'id', 'table-data' );
$('td.address_street_postal').removeClass("address_street_postal").addClass("address_street");
$('td.address_suburb_postal').removeClass("address_suburb_postal").addClass("address_suburb");
$('td.address_city_postal').removeClass("address_city_postal").addClass("address_city");
$('td.address_code_postal').removeClass("address_city_postal").addClass("address_code");
$('td.address_street_pobox').removeClass("address_street_pobox").addClass("address_street");
$('td.address_suburb_pobox').removeClass("address_suburb_pobox").addClass("address_suburb");
$('td.address_city_pobox').removeClass("address_city_pobox").addClass("address_city");
$('td.address_code_pobox').removeClass("address_city_pobox").addClass("address_code");
$('label#suburb_search').css('display','none');
$('label#street_search').css('display','inline');
$('input#street_description').css('width','330px');
}); //end click handler

This was working previously in all browsers but when we implemented DataTables.js my code no longer worked using only 1 modal-dialog for both tables. So I created 2 modal-dialogs, once this was done the above code seemed to conflict only in IE7 (and prob 6 too). Anyway after much gnashing of teeth I reduced the above code to below, and it all works fine now 🙂

$('#find_address_postal').click (function () {
$('.modal_form_postal').dialog('open');
}); //end click handler

$('#find_address').click (function () {
$('.modal_form').dialog('open');
}); //end click handler