4

This is really frustrating..!

When working with jQuery Mobile with predefined pages, it all goes smooth and easy, but what about more complex projects?

I am working on a survey system that renders the next page based on the previous answer. So every page has to submit the current question to an external API and get the next question.

My first choice was to go big on JS, but the main problem with it was that the data has to be sent through AJAX and then injecting the new structured HTML has to be "refreshed" to render well. In addition to that, all AJAX requests have to have their callbacks the it creates a messy code. So, in my case a survey that has 20-30 question composed as 15 different types of forms has some heavy use of callbacks and nested callbacks.

Then I rewrote the project with an PHP as the base. forms (containing the surveys questions) that submit to the same page with one "data-role=page" instance. With a CURL request I send the answer and got the next question, generated the HTML structure and voila - it all renders magnificently without no need for triggering the refresh.

But using this method has its own problems:

  • submitting to the same page deprives you from page transitions and leaves you with the default fade transition.
  • jQuery mobile has this weird caching (even after I used every method to disable it)
  • passing the data from page to page is tricky - GET is length
    limited and POST didn't fit to my needs since the actual CURL request had to submit "param1=val1&..")

So, What way is the best to work with jQuery Mobile when working on a complex and dynamic project?

Thanks,

user1134422
  • 861
  • 7
  • 7

1 Answers1

0

Well IMHO ( Coming from PHP and jQM myself ) I have taken the approach of using JSON servered by PHP and then parsed with jQM.

My Approach is to create the landing page ( the page that will have dynamic content ) frame to hold the desired functionality like Navigation, Logo, Header, Footer, etc... and have jQM update the page contents using the JSON sent from the PHP response.

You can also pair this with localstorage with storage.js

Now I have also seem ( but not used yet ) some information on using a templating engine such as Handlebars, here are some links I found that might be interesting to read:

Community
  • 1
  • 1
Phill Pafford
  • 77,927
  • 86
  • 256
  • 378
  • Thanks, I've tried that approach. but this is fine for more of simple projects. What about project that doesn't have just a list view. In my case I have about 15 different types of forms - multi select checkboxes, sliders, multi sliders and so on. So it makes sense to generate the forms on the server and submit them with a standard submit. It is possible to generate content and proccess it using JS but it is soon to become a big mess. Even when harvesting OO abilities in Javascript. It seems it works for you, so.. what am I doing wrong? – user1134422 Jun 20 '12 at 07:46
  • Another issue is the submission itself. While in HTML submit, you have all the data served to your global GET or POST, in JavaScript you will have to create an event for each unique form that captures the selected option/s and process it accordingly. And this is a big overhead. That is why my first intention was to have a normal form that submits the data to itself, gather it, send the request, get the next question in the survey and start processing the current question. – user1134422 Jun 20 '12 at 07:51
  • That's why I also suggested using handlebars.js templates, with handlebars you could build the form from the JSON response. I've seen some examples but this is a good place to start: http://handlebarsjs.com/ For Example you would send back the JSON will all the new data and check if that element/data exists, if yes generate the HTML using handlebars – Phill Pafford Jun 20 '12 at 13:13