How to show a dialog on index page

[satyasuman]

Hi I have a requirement, where i need to display a dialog on the index page itself. Below is the code snippet

var MainController = function(){

this.showSearchDialog = function(){
$.mobile.changePage('#popup', {transition:'fade', role:'dialog', reverse: true});
    console.log("showing customer search window");
}

}
var mainController = new MainController();
new $.mobile.Router([
{ "contentPage": { handler: "showSearchDialog", events: "h,s" } }
], mainController, { ajaxApp: true });

I am able to see the log in the console, but the dialog does not show up, i am adding the dialog HTML to the page dynamically.
$.ajax({
url: "pages/CustomerSearchDialog.html",
success: function (data) { $('body').append(data); },
dataType: 'html',
async: false
});
When i hard code the dialog's code in the index, i am able to see the search dialog. Please advice.

[azicchetti]

Hi,
why don't you use the standard jqm ajax capabilities to load the dialog?

If you really need to perform the ajax call by hand, you have to make sure that these requirements are met:

• the dialog html fragment is appended before invoking changePage
• the returned html looks like the following snippet:

<div data-role="dialog" id="popup">
        ... your dialog content here ...
</div>

If you still have doubts, please post some code so that I can look over it.

Cheers