jQuery Mobile dynimicaly populate listview using ajax and Google book API

Question

I am making an jQuery Mobile / Phonegap application that has two pages. The first page has a search input, where the user can add a book name, or author, and then the second page is where the results are shown depending on how many match the given value.

Till now I have manged to get the value from the search input, and receive the value in the second page successfully.

My jQuery code is on external files, and are added to the index.html file between jQuery.js and jQuerMobile.js

     //this is from the first page
    // capture the user input, and change page to search_results.html
    function handlePageChange() {
        if ($('#search-1').val().length > 0) {
            $.mobile.changePage('search_results.html', {
                dataUrl : "search_results.html",
                data : {
                    'input' : $('#search-1').val()
                },
                reloadPage : false,
                changeHash : true
            });
        } else {
            alert('Search input is empty!');
        }
    }



     //Handle the page-change action after user has pressed the button = changePage
        $(document).on('pagebeforeshow', "#index", function() {
            $(document).on('click', "#changePage", handlePageChange);
        });

 //this is from second page     
// get data from search input form index.html 
    function getSearchValue() {
        var parameters = $(this).data("url").split("?")[1];

        parameter = parameters.replace("input=", "");
        alert(parameter);

    }

    //Trigger after page is loaded
    $(document).on('pageshow', "#search_results", getSearchValue);

But I am stuck on two things. First looking at the jQueryMobile it confuses me as if, which event to use to use my ajax call to the API.

Should I just just another callback function to the existing event listener pageshow.

Then I want to populate my listview with the results from Google Books API, but I can't find any good examples out there.

And least, I want to show the books, in listview with thumbnail, and title, and when someone clicks on one of the books, it will be transitioned to another page where it shows more details about the book.

How can I do that depending on the id.

Even concept without code are welcomed. Thank you

Answer 1

Let me tell you what is a proper way, at least when creating a jQuery Mobile application.

1. Your first page should have a form, at least if you have more input elements. But you can even work without it.

2. You will need to have a button element to initialize search. When button is clicked you will trigger an ajax loader and initiate an ajax call. When result is successfully retrieved only then initiate page change. In a mean time you result will be stored inside a localstorage or some global variable.

3. Before second page is shown, probably in pagebeforecreate event you will read content from localstorage or global variable and append new content to the second page. At this point you will hide page loader.

Basically this process must be done in a first page because if retrieved result is empty or you receive an error you must inform user that there isn't any data to show. Also page transition will be smooth. Also if everything is done on a second page there's a good chance your content will be appended when page is already shown and this can confuse a app user.

I have a similar working example created for some previous answer, I am contacting php server instead a google service but $.ajax call is also used so you can copy a lot of may code.

Example can be found here: jQuery Mobile: Sending data from one page to the another, there are 2 examples and you should look at a second one called: User authentication demo.