jquery mobile pagecreate event for dialogs - jquery-mobile

Hi jQueryMobile has an event for on pagecreate but it doesn't work with the dialogs (dialog page embeded in the same page with data-role="page")
$(document).delegate("pagecreate", "#foo-dialog", function() {
console.log("dialog-opened");
});

I have working code where pagecreate/pageshow is being called when showing a dialog, maybe you have your JS in the wrong spot? If you AJAX transitioned to this page any JS in your head tags isn't pulled in.

Related

Automatically open a popup on load with MVC

I have a page with ASP.net MVC 5 with Bootstrap in that displays a table of many records. I have a popup that open when I click on a button that is located on each row, basically some CRUD. This works fine.
What I would like to do now is when a user enter a specific URL (like site/Proof/LoadSpecific/342) to open the page as usual, but also show the modal as if I clicked on a specific button.
I am faily new to MVC, JQuery and web in general. How would I do this ?
Thanks
If you're using bootstrap modals you can use the following functions (assuming you have the bootstrap js and jquery scripts included as well)
assuming myModal is the id of your modal element:
$('#myModal').modal('toggle'); //toggles the shown/hidden state of the modal
$('#myModal').modal('show'); //shows the modal
$('#myModal').modal('hide'); //hides the modal
so you would include a script on your page that shows the bootstrap modal on load such as the following:
$(function() {
$('#myModal').modal('show');
});
Here's a link to the bootstrap 3.3 documentation which has a good deal more information on these components and how you can use them.

.changePage() changes page, but reloads previous page

I am developing phonegap application using jQuery Mobile. Below the code I have used to changes page when click on Button
$(document).on('click', '#btn_new_register', function (e) {
$.mobile.changePage($("#newuserregister"), { transition: "slide"} );
});
My problem is when I click button it load registration page but within a second it load previous page (Login Page).
I have use single page structure using jQuery Mobile.
Please help me on this.
I have seen questions asked on the stack overflow but didn't find solution.

jquery mobile page transition seems to be stopping $(document).ready from firing

I'm building my first jquery mobile site and have run into a problem. When just doing a straightforward hyperlink from one page to another it seems like the page transition effect is stopping the
$(document).ready(function(){
alert("hello");
});
From firing. If I refresh the page or link to the page directly the event fires.
I've tried removing the data-transition from the hyperlink and even tried
<a data-role="button" data-transition="none" href="/otherpage/">link</a>
But still have the same problem.
Andy ideas please? Thanks.
This is by design, as jQuery Mobile loads pages in the background, then incorporates them in the current document before transitioning. This means the original page is not reloaded, so the document does not become ready again.
Accordingly, the documentation on events prominently says (emphasis from original):
Important: Use $(document).bind('pageinit'), not $(document).ready()
Therefore, you should write:
$(document).bind("pageinit", function() {
alert("hello");
});

coldfusion ajax return unstyled content with jquerymobile

I am following Ray Camdens post on ajax calls in coldfusion. I have the whole page wrapped with jquerymobile and themeroller. If I put the content on the main page, its styled properly, but if I use ajax to return the content, its unstyled.
I have tried including jquery and jquerymobile scripts in the ajax page, but then I end up getting weird loops and double submit buttons. In firebug I can see that it loads the js files in the ajax return. I also loose my focus on the submit button which is a big deal in this particular app.
Is there a way to only have the jquery a jquery mobile js files linked in the main page and then have the styling refresh after the ajax content is loaded? or will i run into a FOUC?
Fixed. used $("#result").html(data).trigger("create"); as mentioned in the comments on this page

jquery mobile: Linking within a multi-page document

In jquery mobile documentation http://jquerymobile.com/demos/1.0/docs/pages/page-links.html
it is said that I need to have a div with certain ID to navigate it.
I have a jquery moblie page div:
<div id="payments" data-role="page" data-url="payments">
On the other page I have a like
Open dialog
But when I click it nothing happens.
You most likely have an error somewhere else in your code, do you get any errors in your console after clicking the button? It would be helpful for you to setup a JSFiddle to share more of your code.
Here is a demo of your code working as expected: http://jsfiddle.net/zteV3/

Resources