Jquery mobile dialog is only closing once in chrome and opera

Question

My page is having a dialog and I'm dynamically shows it via javascript. It works fine in IE,FF,Safari but not in chrome and opera. If this is a known bug and has workarounds let me know, I'll post the code if you need more specification.

this is the dialog:-

<div id="infoDialog" data-role="page" data-overlay-theme="b">
    <div id="headerConfirmation" data-role="header" data-theme="b">
        <h1>Invalid Action</h1>
    </div>
    <div id="contentConfirmation" data-role="content" data-theme="b">
    <p>Please increase the adults count first</p>
    <a href='#' onclick='$(".ui-dialog").dialog("close");' data-role='button' data-theme='c'>Close</a>
    </div>

this dialog is being loaded into an Iframe's body by this

jQuery.getJSON(url, function(data) {
         $("body").html(data["html"]);

and this is how I load it via Javascript

$.mobile.changePage("#infoDialog", { transition: "pop",role: "dialog" });

The code is too much complex to add here this works fine in IE,FF,Safari

Thanks in Advance.

Answer 1

Thought of answering my own question. The problem resolves when I navigate to another page and come back again. Then the dialog closes properly everytime. So I add this code before all jquery mobile library:-

$("#firstLoad").bind("pagecreate",function()
    {
        $.mobile.changePage("#selectDates"); 

    });

and then add a fake jquery mobile page like this :-

<div id="firstLoad" data-theme="c" data-role="page" >
<!-- <div id="firstLoadHeader" data-role="header">
        <h1>Welcome</h1>
</div>
<div id="contentSelectDates" data-role="content">
</div>
<div id="footerSelectDates" data-role="footer">
    <h1>Travel Gateway</h1>
</div> -->
</div>

So my actual page that I want to show comes after this. :-

<div id="selectDates" data-theme="c" data-role="page">
    <div id="headerSelectDates" data-role="header">
        <h1>Select Dates</h1>
    </div>
    <div id="contentSelectDates" data-role="content">
            </div>
            </div>