Question

I’ve built a simple sign in POST form that gets submitted via AJAX (default configuration, I didn’t change anything). When user submits wrong data, the following page is loaded:

<div data-role="page" id="main_mobile_page">

    <div data-role="header" data-id="fixed_header" data-position="fixed">
        ...
    </div>

    <div data-role="content">
        ...display:none DIV with the text of error...
        ...sign in form...
    </div>

    <div data-role="footer" data-id="fixed_footer" data-position="fixed">
        ...
    </div>

</div>

What is the standard and easiest way to show a popup with error. I’ve tried a number of implementations including native jQuery Mobile dialogs (I generated a separate “page” that has error text and transitioned to it) and plugins such as SimpleDialog. All of the implementations have problems, the usual problems are:

• something random happens when you click “ok” button in the dialog (i.e. data-rel=”back” doesn’t work well). May be it’s because form was submitted via POST.

• when jQuery Mobile loads pages via AJAX it sometimes hides the old one instead of purging it and I end up having HTML that has multiple id=”main_mobile_page” pages and therefore can’t properly locate my box with errors.

Does jQuery Mobile has some equivalent of JS’s alert() to simply show error, without over-complicating things and handling it as a separate page load? If not, what is the standard way to implement such “error” popup? Ultimately I want to compile this with PhoneGap and I am hoping that it will pick up this “alert-s” and convert it to native “error popups” of the particular phone model.

Answer 1

why don’t you use the phonegap notifications?

navigator.notification.alert(
  'Please try again', // BODY COPY
  alertConfirm, // CALL BACK FUNCTION
  'Oops something went wrong!', // TITLE
  'OK' // BUTTON TEXT
);

or

navigator.notification.confirm(
  'Please try again', // BODY COPY
  alertConfirm, // CALL BACK FUNCTION
  'Oops something went wrong!', // TITLE
  'LAME, TRY AGAIN' // BUTTON TEXT
);

you will need to have a function that acts as a callback – if you do the confirm you can check to see what button was clicked and perform an action based on that.

function alertConfirm(b){
  if(b == 1){
   // BUTTON 1 WAS CLICKED
  }
  else {
   // BUTTON 2 WAS CLICKED
  }
}