jQuery Mobile dynimicaly populate listview с использованием ajax и API книг Google

Question

Я делаю jQuery Mobile/Phonegap приложение, которое имеет две страницы. На первой странице есть вход для поиска, где пользователь может добавить имя книги или автора, а затем вторая страница показывает результаты в зависимости от того, сколько соответствует заданному значению.

До сих пор мне удалось получить значение из ввода поиска и получить значение на второй странице успешно.

Мой JQuery код на внешние файлы, и добавляются в файл index.html между jquery.js и 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); 

Но я застрял на двух вещах. Сначала, глядя на jQueryMobile, он меня смущает, как будто, какое событие использовать для использования моего вызова ajax в API.

Должен ли я просто еще одна функция обратного вызова существующего прослушивателя событий pageshow.

Затем я хочу заполнить свои listview результатами API Google Книги, но я не могу найти никаких хороших примеров.

И, как минимум, я хочу показать книги в listview с миниатюрами и заголовками, а когда кто-то нажимает на одну из книг, она будет переведена на другую страницу, где будет показана более подробная информация о книге.

Как это сделать в зависимости от идентификатора.

Даже концепция без кода приветствуется. Спасибо

Answer 1

Позвольте мне рассказать вам, что является правильным способом, по крайней мере, при создании приложения jQuery Mobile.

1. Ваша первая страница должна иметь форму, по крайней мере, если у вас больше элементов ввода. Но вы даже можете работать без него.

2. Для инициализации поиска вам понадобится элемент кнопки. При нажатии кнопки вы запускаете загрузчик ajax и инициируете вызов ajax. Когда результат успешно восстановлен, тогда инициируйте смену страницы. В то же время результат будет сохранен внутри localstorage или некоторой глобальной переменной.

3. Перед тем, как будет показана вторая страница, возможно, в событии pagebeforecreate вы будете читать контент из localstorage или глобальной переменной и добавлять новый контент на вторую страницу. На этом этапе вы скроете загрузчик страниц.

В основном этот процесс должно быть сделано в первой странице, потому что, если получен результат пуст или вы получите сообщение об ошибке необходимо сообщить пользователю, что не существует каких-либо данных для отображения. Также переход страницы будет плавным. Кроме того, если все сделано на второй странице, есть вероятность, что ваш контент будет добавлен, когда страница уже показана, и это может смутить пользователя приложения.

У меня есть аналогичный рабочий пример, созданный для некоторого предыдущего ответа. Я обращаюсь к php-серверу вместо службы google, но также используется вызов $ .ajax, поэтому вы можете скопировать много кода с кодом.

Пример можно найти здесь: jQuery Mobile: Sending data from one page to the another, есть 2 примера, и вы должны смотреть на второй называется: аутентификации демо пользователя.