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:

enter image description here

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

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.

score 2 · Answer 1 · answered Jun 07 '13 at 11:07

2

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.

answered Jun 07 '13 at 11:07

Darin Dimitrov

1,023,142
271
3,287
2,928

Yes, that will show my popup but then the form doesn't submit? I need to show the popup then submit the form. – Liam Jun 07 '13 at 11:17
But this makes no sense at all. If you submit the form using a normal POST the browser redirects away and you can forget about executing any javascript after that stage. What images will you be showing? Where you will show them - remember that once the browser leaves the page the DOM dies with it? If on the other hand you use AJAX to submit the form then this is an entirely different story. In this case you could submit the form using AJAX and continue executing other scripts (because the browser won't redirect away from the page). – Darin Dimitrov Jun 07 '13 at 11:20
I suppose I expect it to finish it'x executing js before submitting the form. Which is what it appears to do on every other browser and older versions of IE. Got a solution now anyway. Thanks. – Liam Jun 07 '13 at 11:33

score 1 · Accepted Answer · answered Jun 07 '13 at 11:26

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.

Modal dialog missing image on form submit, IE9+

2 Answers2

Linked