jquery dialog not coming up on pageload

Question

I want to show the dialog after the pageload .

<div id="mobile-Page" data-url="/en/" data-role="page">
<input id="address" type="text" value="ad" name="firstName">
</div>
<div id="mobile-dialog" data-url="/en/" data-role="dialog">
 <label>text to be added </label>
</div>

java script Included as follows

<script type="text/javascript">
<script src="/_ui/mobile/common/js/jquery-1.10.2.min.js" type="text/javascript">
<script src="/_ui/mobile/common/js/jquery.mobile-1.3.2.min.js" type="text/javascript">
</script>

I am trying to open dialog in document ready as follows.

$(document).ready(function ()
{   
$.mobile.changePage('#mobile-dialog', {
            transition: 'pop',
            changeHash: true,
            //dialogForce: true,
            //role: 'dialog'
            reverse:false
        });
}

I am not able to see dialog after the page load and also no errors in console.

Answer 1

You might want to check out https://stackoverflow.com/a/15929161/1178968

"Set a time interval to show the dialog, rather than call it once the page is shown." - Omar

$(document).on('pageshow', '#myPage' ,function () {
 if (getValue() == null) {
  setTimeout(function () {
   $.mobile.changePage('#dialog');
  }, 100); // delay above zero
 }
});