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,