Wie man Daten dynamisch in eine jquery mobile Seite rendert

Ich bin wirklich neu in jQuery Mobile. Ich versuche eine einfache App mit zwei Seiten zu erstellen. Auf Seite 1 gibt der Benutzer Suchdaten ein und auf Seite 2 werden die Ergebnisse angezeigt. Jede Hilfe wird sehr geschätzt.Wie man Daten dynamisch in eine jquery mobile Seite rendert

<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 

<script src="jquery-mobile/jquery-1.7.2.min.js"/> 
<script src="jquery-mobile/jquery.mobile-1.0a3.min.js"/> 
<link href="jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/> 

<script> 

$(document).ready(function() { 
    $('#search').click(function() { 
    //do some processing and get the data in form of JSON 
     var data = someotherfunction($("#searchfor").val());  
    //now lets say I want to pass this data to page2. How to do this? 

     // I was doing 
     $('#page1').hide(); 
     $('#page2').show(); // but it removes all the styling from the page. 

    }); 
}); 

</script> 

</head> 
<body> 

<div data-role="page" id="page1"> 
    <div data-role="header"> 
     <h1>Example</h1> 
    </div> 

    <div data-role="content"> 
     <input name="searchfor" type="text" id="searchfor"/> 

     <input type="button" id="search" data-theme="b" value="search"/> 
    </div> 

    <div data-role="footer"> 
     <h4>Page Footer</h4> 
    </div> 
</div> 


<div data-role="page" id="page2"> 
    <div data-role="header"> 
     <h1>Page Three</h1> 
    </div> 
    <div data-role="content"> 
     <p>Your search returned this: {data.value} </p>  
    </div> 
    <div data-role="footer"> 
     <h4>Page Footer</h4> 
    </div> 
</div> 

</body> 
</html>

Quelle

2012-04-04 lazyguy

Sie eine Version von jQuery Mobile verwenden, die ein Jahr alt ist vorbei (und nicht stabil): http: //jquerymobile.com/download/ – Jasper

Sie könnten auch Ihre zweite Seite eine externe Seite machen und die Suchlogik tun rechts auf sie:

$(document).on('click', '#search', function() { 
    $.mobile.changePage('/path/to/my-script.php?search=' + encodeURIComponent($('#searchfor').val(), { reloadPage : true }); 

    //prevent the default behavior of the click event 
    return false; 
});

Dann in Ihrer zweiten Seite können Sie einfach die $_GET Variable erhalten, führen Sie die Suche , und geben Sie die Ergebnisse aus.

Ansonsten bei dem Sie suchen $.ajax() mit einer ähnlichen Antwort über AJAX anzufordern:

$(document).on('click', '#search', function() { 
    $.ajax({ 
     url  : '/path/to/my-script.php' 
     data  : { search : $('#searchfor').val() }, 
     dataType : 'json', 
     success : function (data) { 

      //assuming that the response in an array of objects (JSON) 
      var output = []; 
      for (var i = 0, len = data.length; i < len; i++) { 
       output.push('<li><h3>' + data[i].name + '</h3><p>' + data[i].description + '</p></li>'); 
      } 

      var $page = $('#page2').children('.ui-content').append('<ul data-role="listview">' + output.join('') + '</ul>'); 

      $.mobile.changePage($page); 
     }, 
     error : function (jqXHR, textStatus, errorThrown) { /*don't forget to handle errors*/ } 
    }); 

});

Quelle

2012-04-04 18:08:58 Jasper

Großartig! Vielen Dank. Ich mag den ersten Ansatz besser, aber wenn ich das tue, sehe ich page1 zweimal auffrischen, obwohl ich reloadPage gemacht habe: false. Auch mache ich my-script.php als html, also wenn ich zu diesem my-script.html befehle. Es führt die jquery Funktion nicht aus, nachdem das Dokument geladen worden ist. – lazyguy

@lazyguy Ich habe meine Antwort aktualisiert, aber ich habe vergessen, 'return false;' an das Ende des Ereignisses 'click' anzuhängen, damit das Standardverhalten des Links ignoriert wird. Das hat deine Doppel-Navigation verursacht. Anstatt das Ereignis 'click' für das Element' # search' zu verwenden, verwenden Sie das Ereignis 'paginin' für die Pseudo-Seite im Dokument' my-script.html'. Auf diese Weise wird der Code ausgeführt, wenn die Ergebnisseite initialisiert wird. Sie müssen '{search: $ ('# searchfor') .val()}' in etwas ändern, das auf die GET-Variable verweist, die an die Seite gesendet wird. – Jasper

Wie man Daten dynamisch in eine jquery mobile Seite rendert

Antwort

Verwandte Themen