jQuery mobile dynamic popup
Running dynamic jQuery mobile popups
I’m using jQuery mobile to build dynamic mobile web applications. I ran into a pretty basic problem involving alerting to the user when he is doing something wrong or right.
When a mobile user fills a form and submits it, the submission is handled via AJAX, if the response contains an error, the user has to be notified somehow.
Say he added a malformed email address or there is a missing mandatory field. You can notify him inline, with a message next to or above the field, or through a popup.
What are the alert choices on mobile?
- alert() - in a web application this will show the URL of the app, not really professional.
- navigator.notification.alert() when your web application is inside PhoneGAP
- jQM Simpledialog2 - http://dev.jtsage.com/jQM-SimpleDialog/demos2/ - I am using this on some of the web applications.
- popup() function that is available from jQuery Mobile 1.2
In one of my last web applications made with jQuery mobile, I used the .popup() method, but it seems to me that it lacks from dynamic usage. I don’t want to manually create the popup’s content in the HTML code, I want to use the popup function as it my popup is anonymous, I don’t care where it’s located in the HTML source, I just want my message to be displayed on whatever page I am or whatever form I submit, etc.
- Project page (download, demo) - https://github.com/serbanghita/jQM-dynamic-popup
Comments on the old blog
Ferry wrote on 30 January 2013
This was really missing in the jquery mobile 1.2 release. I like it. Thanks!
Marcos wrote on 06 February 2013_
Very nice! Thank you
Mustafa wrote on 28 February 2013
How do you close the popup through code?
Mustafa wrote on 02 April 2013
To answer myself, this seems to work: