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.

References

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? $(popupEl).popup('close')?

Mustafa wrote on 02 April 2013

To answer myself, this seems to work:

$(popupUtils.el).popup('close');

(Source: ghita.org)

jquery mobile popup javascript