CODEWITHSUNDEEP
javascriptjquerymobiledialog
dgreichert
dgreichert

Reputation: 103

Allow scripts in a jQuery Mobile dialog?

I have a page in jQuery Mobile that is the main page. It has a list of items, and when you click an item it loads of information about it. In order to dynamically load the information, it calls an external page and brings it all up. That external page has a small script on it to allow the user to handle clicking a button (to submit some information to the server).

When you load the page separately, it handles the scripts just fine. When you load it as a dialog, the scripts don't load.

I tried putting the script inside the page itself. I tried putting the script on the main page that loads the dialog. None of it works. I've debugged with the console, and I can't get it to read any scripts specific to the dialog of the external page.

Is there some trick to it, or do dialogs simply ignore any scripts? Is there a way around it? Is there a way to style a page completely to look like a dialog until this issue is resolved?

Edit: I just did it without the dialog, and it still is doing this. If I load the page separately with AJAX turned off, everything works. I need to keep the page transitions and the loading dialog, so turning it off is not an option.

I'm currently using in the external page in the head:

<script>
$(document).delegate("#productinfo", "pagecreate", function(){
    //code here
});
</script>

Upvotes: 4

Views: 1597

Answers (2)

Namlook
Namlook

Reputation: 181

I solved this problem by putting the js script on the main page:

$(document).on("pageinit", "#my-dialog-page-id", function(e) {
    // put your js here
});

Upvotes: 1

shanethehat
shanethehat

Reputation: 15570

Posting the answer edited into the question:

I got it working by putting the script inside the page div:

<div data-role="page" id="productinfo"> <!-- /markup--> </div>

...and placing it at the very end after everything.

Once I got that resolved, it was working some times and not the others. I couldn't figure it out until I realized the button's z-index was changed to 0 so that it wouldn't take priority over the jQuery UI autocomplete whenever I would select something for the field. I set the z-index to 1 on the buttons (default is 2 which overrides jQUI's autocomplete at 1), and it seems to work now.

I know there wasn't much activity in here, and it was probably a question that has been asked before but I couldn't Google anything to save my life on this topic. Hopefully this helps someone in the future.

Upvotes: 1

Related Questions