What I’m trying to achieve is probably really simple, but for some reason I just don’t get it to work.
I’m building a web app where I search against an API using get requests and receiving json. I have a page result.html which, when it’s loaded takes the parameters for the get call from it’s url. This example illustrates what it does:
When “result.html?cake=yes_please” is directly requested, the ajax call is made and result.html is populated with the result.
This works as intended. What I’m trying to do is to get this to work from another page, search.html, where my form is stored. I tried just creating a javascript function as the action for the form where I built the url and called changePage, but that didn’t work.
function cakeSubmit()
{
var cake = $ ('#cake_answer').val(); // grabs the form value
var url = 'result.html?cake=' + cake; // builds the url
$ .mobile.changePage( url, { transition: 'fade'} ); // changes page
}
This code takes me to the correct page but the ajax isn’t fired. When I reload that page, the data is loaded properly, so I’ve pinpointed the problem to the transition.
In result.html, the list population is called like this:
$ ('#search_result').live('pagecreate',function(event){ // search_result is the
// name of the jquery mobile page.
queryFromUrl(); // read the url, calls the ajax, makes list of result.
});
How can I solve this issue?
