How to handle form error status in jQuery Mobile and return HTML?

Question

What is the best way to handle forms in jqm?

For example, you can say that the user fills out a form, and some data is not checked. It is not picked up by JS validation, but it invokes some business logic, which means that the system cannot continue.

In jqm, the form will be returned to the user, and the structure will load it and move to it. Suppose I don’t want this to be oriented as a new condition — I just want it to display an updated form with an error message. I also don't want to disable ajax, as this adds an unnecessary full page reload.

Ideally, what I would like is a way to tell jqm not to go over or include the answer in the story, but just show it instead of what it is.

The only way to see how this works is to write my own small form handler and return the JSON from the server, which includes the error state. If the view was good, go to the next page, otherwise update the html in the view with the html returned as part of the JSON object that contains any error messages.

There seems to be a better way?

thanks

Answer 1

Good question, and I would also be interested to know what others are saying. For what's worth it, in a recent application (which should also have worked offline), I lowered the suggested route with my forms:

• The default send action is prevented.
• An ajax call is used with a button that checks the data before sending it to either the web service, or simply stores it in a local database (depending on the status flag and whether it is online or not).
• Make sure all relevant success / failure messages are filtered back through the submit callback so we can ...
• ... refresh the same html page with user submission results.

This works well and users are satisfied. However, this is consistent with my specific set of circumstances - I did not want to use the querystring / location.hash material because (a) jQM is sometimes addicted to hashes and (b) potentially the user will be disconnected (and no web server means no request). Your mileage may vary, of course.

EDIT: code to update the message page For my application, I wanted the message list to appear on the current page as needed, so I have an empty unordered list ( messages ) on the corresponding HTML page, which, in turn, is inside the stylized div ( message-pane ). Here's a snippet of code showing how the update happens (note the refresh call, which is required in jQM). You can call such code from your ajax handler:

 var list = $("#messages"); list.append('<li>YOUR MESSAGE HERE</li>'); list.listview('refresh'); $("#message-pane").show();