Jquery mobile dialog is only closing once in chrome and opera - google-chrome

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>