Modal dialog missing image on form submit, IE9+

Question

This issue is driving me mad.

So I've got a modal dialog.

<div class="modal">
    <img src="...."/>
</div>

Instanciated thus:

$(".modal").dialog({
        resizable: false,
        draggable: false,
        modal: true,
        autoOpen: false,
        width: 530,
        height: 460,
        closeOnEscape: false,
        dialogClass: 'popup noTitle'
    });

Then I have a form:

<form>

    <input type="submit"/>
</form>

and Js to open the modal:

$('form input').click(function() {
    $(".modal").dialog('open');
});

In most browsers this works great:

In IE 9 and IE 10. The modal is opened but the image is missing:

I believe it is something to do with the form submit, stopping the image from loading. If I run $(".modal").dialog('open'); from the console it works fine. I've tried preloading the images:

$("#divSearching img").each(function() {
        var imgObj = new Image();
        imgObj.src = $(this).attr('src');
    });

Doesn't help. Anyone else having issues with this or have a good solution? Everything I've tried has failed.

Tried to create a fiddle but because it is related to a form submit I couldn't do it.

Answer 1

Try canceling the form submission:

$('form input').click(function() {
    $(".modal").dialog('open');
    return false;
});

Right now you have a form with a submit button and when someone clicks on the submit button this form gets sent to the server and the browser redirects away from its current location. You cannot expect any more javascript to continue executing at that stage. By returning false from the submit handler you are canceling the default action.

Answer 2

Figured out a solution. So I changed:

$('form input').click(function() {
    $(".modal").dialog('open');
});

To:

$('form input').click(function(e) {
        var $form = $(this).parents('form');
        $(".modal").on('dialogopen', function() {$form.submit();});
        $(".modal").dialog('open');
        e.preventDefault();
    });

This puts off the form submit until the js to open the dialog has completed. Like I said. Seems to be an IE9 and IE10 issue only. FireFox, Chrome, etc. work fine with this.