jQuery mobile ajax nicht laden

Muss ich vermisse eine wirklich einfache Sache hier, weil es scheint so offensichtlich...und ich kann nicht glauben, ich kann nichts finden im web für diese!

Ich versuche zu verwenden die jQuery mobile Bibliothek eine mobile-Ansicht meiner website.

Ich habe drei Seiten (Daten-Rolle) in meine Seite. Zwei mit statischen Inhalten und der zweiten mit Inhalt möchte ich laden, mit ajax. Die home-Seite den link zu den anderen zwei Seiten:

<div data-role="page" id="home">
    <div data-role="header" id="header">
        <h1>the header</h1>
    </div>
    <div data-role="content">
        <a href="http://absolutepathtomyserver/homepage#highlights" data-role="button">highlights</a>
        <a href="http://absolutepathtomyserver/updatePlaylistTemplate#playlist" data-role="button" rel="external">playlist</a>
    </div>
</div>

<div data-role="page" id="highlights">
    <div data-role="content">
        <p class="center">My static content</p>
    </div>
</div>

<div data-role="page" id="playlist">
    <div data-role="content"><!-- TO BE FILLED FROM AJAX! --></div>
</div>

Aus meinem Verständnis der vielen tutorials die ich gelesen, die standardmäßig alle a href-links führen Sie einen ajax-Aufruf sofern nicht anders angegeben, aber es funktioniert nicht. Wenn ich auf den link markieren, die Seite schieben, wie zu erwarten, ohne zu laden, die andere Seite, da es die gleiche Seite. Alles ist in Ordnung hier. Aber wenn ich auf die playlist-Seite, die slide animation ausgeführt, aber der ajax-Aufruf nie gemacht, so dass der Inhalt der Wiedergabeliste wird nie gefüllt. Beachten Sie, dass ich überwachen, die Netzwerk-Aufrufe aber keiner gemacht, wenn ich auf den link.

Hab ich was verpasst?

Ist es meine absolute nennen? Ich benutze die tag-Basis-url für statischen Inhalt, also die links müssen absolute während all meiner Anwendung.

Brauche ich das .bind-Methode?

Brauche ich, um den ajax-Aufruf manuell? Ich kann es tun, aber von der ich gelesen habe scheint es sich um native href-link in der mobilen exetension...

InformationsquelleAutor Guillaume Bois | 2011-08-30
  1. 3

    Dem jQuery Mobile-ajax-link-handling gilt für pseudo-Seiten, die nicht bereits in Ihrem Dokument. Wenn Sie möchten, um ajax-Seite geladen, von dem link auf Ihrer home pseudo-Seite, dann lassen Sie die playlist pseudo-Seite aus dem Dokument. jQuery Mobile gehen Sie auf die angegebene url in den link, greifen alle Inhalte innerhalb der data-role="page" - element, und fügen es an der dom-automatisch, und der übergang zu den neu hinzugefügten Seite.

    Einen anderen Weg zum laden der Daten über einen ajax-Aufruf, wenn die playlist Seite angezeigt wird, etwa so:

    $('#playlist').bind('pageshow', function () {
    $.get('url_to/get.php', function (data) {
        $('#playlist').find('[data-role="content"]').html(data);
    });
});

    Obigen Beispiel lädt die html in der data-role="content" element innerhalb der playlist pseudo-Seite jedes mal, wenn es angezeigt wird. Sie konnte alternitively verwenden pagecreate oder einer der anderen jQuery Mobile events.

    • Zunächst vielen Dank für deine Antwort. Deine Antwort-erkunden Sie zwei Optionen
    • Zunächst vielen Dank für deine Antwort. Deine Antwort-erkunden Sie zwei Optionen. Option 1 ist das entfernen der div-id der Wiedergabeliste drücken Sie in mein html-Code für die Bibliothek zu erstellen, on the fly, während das sammeln die Daten von meinem server. Das hat nicht geklappt. Es ist in der Tat ein Aufruf an die back-end um eine falsche url, anstelle von aufrufen der angegebenen url in das href-es ist der Aufruf der index - #playlist, also die Seite neu laden innerhalb des neu erstellten div id Wiedergabeliste. Schlecht... Option 2 landete mit ein wenig tweeking. Siehe meine Antwort
    InformationsquelleAutor Jasper
  2. 1

    Option 2 mit ein wenig tweeking. Ich weiß nicht warum, aber so ist die callback-Funktion in Ihrem code scheint zu schnell, weil kein Inhalt gefüllt, wenn der Inhalt ist entnommen aus dem back-end. Ich kann sehen, dass der Aufruf in meinem Netzwerk Inspektor. Auch dort fehlte "'"' s in die zweite Auswahl.

    Hier ist der funktionierende code: 

    $('#playlist').bind('pageshow', function () {
    $.ajax({
        url: 'updateplaylist.html',
        success:function(data, textStatus, jqXHR){$('#playlist').find('[data-role="content"]').html(data);}
    }); 
});

    Ich Frage mich immer noch, warum die option 1 nicht die richtige url. Ich bin auch Angst, dass dabei meine ajax-Aufruf manuell werde ich überspringen Sie die Standard-spinner der jquery-mobile-framework. Vor Ort ist es zu schnell, ich sehe es nicht sowieso.

    • Hier ist ein link zur Dokumentation, um die jQuery-get-Methode: api.jquery.com/jQuery.get. Es ist die Kurzform für die gleiche Funktion, Sie sind mit oben. Auch zum laden von Spinner, check-out-Methoden und-Dienstprogramme-Seite der jQuery-Mobile-Dokumentation, um zu erfahren, wie ein - /ausblenden der loading spinner: jquerymobile.com/demos/1.0b2/docs/api/methods.html
    • Ja, die kurzer hand get-Methode ist nützlich für einige Menschen. Aber in meinem Fall brauche ich die Vollversion, weil ich will, zu behandeln, das Erscheinungsbild der spinner in: beforeSend:function(){$.mobile.showPageLoadingMsg();}, complete:function(){$.mobile.hidePageLoadingMsg();},
    • Rufen Sie vor dem $.get-Methode, rufen Sie die spinner Sie auf Ansicht, dann in der callback-Funktion entfernen Sie den spinner aus der Sicht... $.mobile.showPageLoadingMsg(); $.get('url', function () {$.mobile.hidePageLoadingMsg();});
    InformationsquelleAutor Guillaume Bois
Schreibe einen Kommentar