Question

I am developing a small app using jquery mobile. I have the following scenario

• The user hits the URL and comes to the home page
• There are multiple div elements with data-role=”page”. The home page id is “home”. There is a search button on the home page. When the user enters something and clicks on search, I am retrieving some data via Ajax.
• The data should be populated in a div with data-role=”page” and id=”Search”.

So, my question here what is the best way to populate the result in the div? In normal jquery, I would just do $(“#Search”).html(“data received via ajax”);

Is there any jquery mobile standard to use here? Or should I use a different page for the results? Please help me in choosing the best way

Answer 1

Since your data is coming back as JSON, the best way for you to go is probably to use jsRender. It is the stated direction by the jquery team for client side templating. It’s also very easy and powerful.

I have an example on my tech blog where I use JSON APIs from Flickr and dynamically generate pages to transition to. The example also has some commented out options in the code that you might find useful for DOM size management.