Auffüllen listview mit jQuery-Mobile eine multi-Seite Vorlage

Ich versuche zu Rendern einer listview auf einer zweiten Seite mit Hilfe von jquery.mobile.

Ich bin mit einem einzigen HTML mit mehreren "Seiten".

    <div data-role="page" id="foo">
    <a href="#bar" data-role="button" data-inline="true" id="loadList)">List</a>

</div>

<div data-role="page" id="bar">
    <div id="ListDiv">
    <ul id="listview" data-role="listview" data-inset="true">
    </ul>
    </div>

</div>

<!--application UI goes here-->

<script type="text/javascript">
$("#loadList").click(function(){
    $.getJSON(
              "http://localhost/index.php/api/list",{format: "json"},
              function(data){
                  var output = '';
                      $.each(data, function(key, val) {
                          output += '<li><a href="#">' + val +'</a></li>';
                      });
                      $('#listview').append(output).listview('refresh');
                  });
    });

Aber das problem ist jetzt wenn ich auf die #loadList-Taste, dauert es mir auf der #bar-Seite, aber es scheint nicht $("#loadList").klicken Sie auf() wird ausgeführt, weil die Liste nicht zeigen, bis auf der #bar-Seite. Nämlich, wird nichts angehängt #listView.

Irgendwelche Gedanken?

InformationsquelleAutor Maxim Mai | 2013-02-24

Ersten, es gibt ein problem in diesem code $.getJSON laden Logik ist falsch. Ändern Seite kann nicht verwendet werden, die in einem gleichen Zeit mit $.getJSON.

Gibt es 2 Möglichkeiten, wie Sie diese Arbeit machen:

Entfernen onclick-event und laden Sie Ihre Daten bei der zweiten Seite Initialisierung:

$(document).on('pagebeforeshow', '#bar', function(){       
    $.getJSON(
              "http://localhost/index.php/api/list",{format: "json"},
              function(data){
                  var output = '';
                      $.each(data, function(key, val) {
                          output += '<li><a href="#">' + val +'</a></li>';
                      });
                      $('#listview').append(output).listview('refresh');
                  });
    });
});

Leider gibt es ein problem mit dieser Lösung. Verwendet Seite Ereignis nicht warten, für $.getJSON, so dass in einigen Fällen Ihre listview leer, wenn die Seite lädt, und der Inhalt wird plötzlich erscheinen. Also diese Lösung ist nicht so toll.

Zweite Lösung ist, entfernen Sie href="#bar" Attribut aus der Taste, aber lassen Sie ein click-Ereignis. Wenn $.getJSON Aktion erfolgreich ist der Einsatz changePage Funktion und das laden der nächsten Seite. In Fall gibt es ein problem mit den Zugriff auf der zweiten Seite listview speichern Sie Ihr Ergebnis (In diesem ARTIKEL Sie finden, wie, oder HIER) und hängen Sie es wieder während eines pagebeforeshow Falle einer #bar Seite.

Machte ich eine funktionierende jsFiddle Beispiel: http://jsfiddle.net/Gajotres/GnB3t/

HTML :

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
        </div>        
        <div data-role="content">
            <a href="#" data-role="button" id="populate-button">Load JSON data</a>
        </div>
    </div>
    <div data-role="page" id="second">
        <div data-theme="a" data-role="header">
            <h3>
                Second Page
            </h3>
            <a href="#index" class="ui-btn-left">Back</a>
        </div>

        <div data-role="content">
            <h2>Simple list</h2>
            <ul data-role="listview" data-inset="true" id="movie-data" data-theme="a">

            </ul>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>      
</body>
</html>

JS :

$(document).on('pagebeforeshow', '#index', function(){     
    $('#populate-button').on('click',function(e,data){     
        $.ajax({url: "http://api.themoviedb.org/2.1/Movie.search/en/json/23afca60ebf72f8d88cdcae2c4f31866/The Goonies",
            dataType: "jsonp",
            jsonpCallback: 'successCallback',
            async: true,
            beforeSend: function() {
                $.mobile.showPageLoadingMsg(true);
            },
            complete: function() {
                $.mobile.hidePageLoadingMsg();
            },
            success: function (result) {
                ajax.jsonResult = result;
                $.mobile.changePage("#second");
            },
            error: function (request,error) {
                alert('Network error has occurred please try again!');
            }
        });
    });        
});

$(document).on('pagebeforeshow', '#second', function(){       
    ajax.parseJSONP(ajax.jsonResult);
});


var ajax = {  
    jsonResult : null,
    parseJSONP:function(result){
        $('#movie-data').empty();
        $('#movie-data').append('<li>Movie name:<span> ' + result[0].original_name+ '</span></li>');
        $('#movie-data').append('<li>Popularity:<span> ' + result[0].popularity + '</span></li>');
        $('#movie-data').append('<li>Rating:<span> ' + result[0].rating+ '</span></li>');
        $('#movie-data').append('<li>Overview:<span> ' + result[0].overview+ '</span></li>');
        $('#movie-data').append('<li>Released:<span> ' + result[0].released+ '</span></li>');  
        $('#movie-data').listview('refresh');
    }
}

Danke, der zweite Ansatz funktioniert, obwohl es nicht die beste Lösung, die ich haben wollte, aber es löste mein problem. Nochmals vielen Dank.

InformationsquelleAutor Gajotres

0

Haben Sie id="loadList)", das heißt, mit einer schließenden Klammer in
```
<a href="#bar" data-role="button" data-inline="true" id="loadList)">List</a>
```
Vielleicht ist dies die Ursache Ihres Problems?
- Gute Augen, ich buchstabiere es richtig in meinem ursprünglichen code. Ich bearbeitet den code hier, bevor ich Einreichen
InformationsquelleAutor voyager42

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.