jQuery mobile dynamic popup

Running dynamic jQuery mobile popups

Published on August 22, '12
by Serban Ghita

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.

Download latest | Demo & Code



Written on: 30 January 2013
This was really missing in the jquery mobile 1.2 release. I like it. Thanks!
Written on: 06 February 2013
Very nice! Thank you
Written on: 28 February 2013
How do you close the popup through code? $(popupEl).popup('close')?
Written on: 02 April 2013
To answer myself, this seems to work: $(popupUtils.el).popup('close');

Post new comment

This blog is intended to foster polite on-topic discussions. Comments failing these requirements and spam will not get published.