Mit $.each() innerhalb der $.getJSON

Dies ist für eine jQuery Mobile app, die mit der version 1.0.1.

Ich versuche Daten von meinem getmovies.php - Datei, die Ausgänge JSON, in eine jQuery-Funktion fügt die Daten in einer unsortierten Liste auf meiner HTML-Seite.

Meine HTML-Seite korrekt angezeigt, aber die getMoviesList () - Funktion keine append-Liste alle Elemente, also der content-Bereich leer gelassen wird.

Meine Vermutung ist, dass es etwas falsch mit meinem $.each () - Funktion. Ich bin noch komfortabler mit PHP, aber versuchen, mehr vertraut mit jQuery und JSON für das verschieben von Daten innerhalb von jQuery Mobile apps.

getmovies.php Ausgänge JSON wie folgt:

{"items":[
{"movieID":"65086","title":"The Woman in Black","poster":"\/kArMj2qsOnpxBCpSa3RQ0XemUiX.jpg"},
{"movieID":"76726","title":"Chronicle","poster":"\/853mMoSc5d6CH8uAV9Yq0iHfjor.jpg"}
]}

Meine Javascript ist wie folgt: 

var serviceURL = "http://mydomain.com/app3/services/";

var movies;

$('#moviesPage').bind('pageinit', function(event) {
  getMoviesList();
});

function getMoviesList() {
  $.getJSON(serviceURL + 'getmovies.php', function(data) {
    $('#moviesList li').remove();
    movies = data.items;
    $.each(movies, function(index, movie) {
      $('#moviesList').append('<li><a href="movie-details.html?movieID=' + movie.movieID + '">' +
      '<img src="posters/' + movie.poster + '"/>' +
      '<h4>' + movie.title + '</h4>' +
      '<p>Other details...</p>' +
      '</a></li>');
    });
    $('#movieList').listview('refresh');
  });
}

Meine HTML sieht wie folgt aus:

<div id="moviesPage" data-role="page">

  <div data-role="content">

    <ul id="moviesList" data-role="listview" data-filter="true"></ul>

  </div><!-- /content -->

</div><!-- /page -->

Ich versuche, ändern Sie die folgende Beispiel-app meinen Anforderungen entsprechen: http://coenraets.org/blog/2011/10/sample-application-with-jquery-mobile-and-phonegap/.

Vielen Dank für jede Hilfe, die Sie anbieten können.

  • Sie erhalten Daten, wenn Sie Sie ausführen console.log(movie) auf die erste Zeile der einzelnen?
  • Vielen Dank für Ihren Kommentar. Ich bin eigentlich nicht sicher, wie Sie Sie verwenden console.log(). Ich arbeite mit meinen Dateien in meinem code-editor und das hochladen auf meinen server zu testen.
  • Fügen Sie diese Zeile und dann beim ausführen der Seite getfirebug.com, um javascript-Daten und Fehler-oder mir den link schicken
  • Vielen Dank für Ihre Hilfe! Der link ist stay4credits.com/app3, klicken Sie dann auf 'Soll ich bleiben für Kredite?' - link. Ich habe nicht bemerkt irgendwelche Fehler in firebug.
  • In firebug kann man sehen, dass die getJson nicht läuft, was bedeutet, dass die Funktion nicht feuern, so dass die Linien $('#moviesPage').bind('pageinit', function(event) { getMoviesList(); }); ist nicht verbindlich, die Seite zu laufen, dass die Funktion korrekt.
  • Danke für die Hilfe mich auf die Spur des Problems. Die Beispiel-app war ich mit war, basierend auf einer älteren version von jQuery mobile. Ich veränderte den code, den Sie auf die in Ihrem letzten Kommentar zu $( document ).delegate("#moviesPage", "pageinit", function() {... und es zieht die Daten jetzt. Ich muss nur fix die listview('refresh'), was ich schon eine Lösung für. Danke nochmal für Eure Hilfe!

InformationsquelleAutor Mark Rummel | 2012-02-26
  1. 1

    Überprüfen, ob Ihre JSON-Ausgabe gilt: überprüfen Sie hier jsonlint.com

    Ändern Sie Ihre binden-event zu sehen, ob es funktioniert.

    $('#moviesPage').bind('pageinit', function(event) {
    getMoviesList();
});

    zu diesem

    $('#moviesPage').live('pageshow', function(event) { //or 'pagecreate'
    getMoviesList();
});

    Wie ich sehen kann, der rest der JS-code ist ok!
    Versuchen Sie dieses und sehen, ob es funktioniert. Ich weiß, es sollte! Dies ist die Methode, die ich auf meine Handy-app und funktioniert sehr gut.

    • Danke! Dieser funktioniert. Wissen Sie, wie man die listview zu füllen mit den Daten vor dem laden der Seite? Ich bin derzeit mit pagebeforecreate, aber die Seite ist die default-load-animation, bevor die Seite wechselt, dann aber die Seite ist leer, bis der listview-Daten abgerufen werden. Ich möchte für das listview gefüllt werden, sobald die Standard-Seite-ändern, be-animation abgeschlossen ist.
    • Vielen Dank auch für die jsonlint.com link.
    • Sie könnten versuchen, setzen Sie das laden-symbol auf der Startseite von live-event. "$.mobile.showPageLoadingMsg();" und dann verstecken Sie es nach Ihrer json-Aufruf mit "$.mobile.hidePageLoadingMsg();". Auf diese Weise, zumindest dann, wenn Sie Ihre Daten laden, es zeigt ein lade-symbol.
    InformationsquelleAutor aki
  2. 1

    Mit Adams Hilfe konnte ich das Problem einzugrenzen.

    Wenn du mit "Beispiel-Anwendung mit Hilfe von jQuery Mobile und Adobe PhoneGap build" von Christophe Coenraets (http://coenraets.org/blog/2011/10/sample-application-with-jquery-mobile-and-phonegap/) und werden unter Verwendung von jQuery Mobile höher als 1.0rc1, müssen Sie wahrscheinlich ersetzen Sie den folgenden code in dein javascript aus:

    $('#employeeListPage').bind('pageinit', function(event) { getEmployeeList(); });

    zu:

    $( document ).delegate("#employeeListPage", "pageinit", function() { getEmployeeList(); });

    Der Grund für das erklärt wird in der jQuery-Mobile-docs unter dem folgenden link unter pageCreate = DOM bereit:http://jquerymobile.com/demos/1.0.1/docs/pages/page-scripting.html.

    Ich hoffe, dies hilft jemand, der läuft in das gleiche Problem versucht, dieses großartige Beispiel-app.

    InformationsquelleAutor Mark Rummel
Schreibe einen Kommentar