どのように動的にjQueryのモバイルページへ

データをレンダリングするために、私はjQueryのモバイルには本当に新しいです。私は2つのページで簡単なアプリを作ろうとしています。 Page1はユーザーが検索データを入力する場所で、Page2は結果が表示される場所です。どんな助けでも大歓迎です。どのように動的にjQueryのモバイルページへ

<!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>

出典

2012-04-04 lazyguy

あなたが古い（と全く安定した）年間だのjQuery Mobileでのバージョン使用しているします。http： //jquerymobile.com/download/ – Jasper

あなたは同様にあなたの2ページ目の外部のページを作成し、それを右の検索ロジックを行う可能性があります：

$(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; 
});

次に、あなたの2番目のページで、あなただけの$_GET変数を受け取ることができ、検索を行います、結果を出力する。

そうしないと、AJAX経由で同様の応答を要求するため$.ajax()を使用して見ている：

$(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*/ } 
    }); 

});

出典

2012-04-04 18:08:58 Jasper

素晴らしい！どうもありがとう。私は最初のアプローチがより好きですが、私がそれを行うとき、私はreloadPage：falseを作ったにもかかわらずpage1が2回リフレッシュされるのを見ます。また、my-script.phpをhtmlにしていますので、my-script.htmlに転送すると、ドキュメントのロード後にjquery関数が実行されません。 – lazyguy

@ lazyguy私は自分の答えを更新しましたが、リンクのデフォルトの動作が無視されるように、 'return'イベントハンドラの最後に' return false; 'を追加するのを忘れました。それがあなたのダブル・ナビゲーションを引き起こした原因です。ではなく、 '＃のsearch'要素のために' click'イベントを使用して、 '私-script.html'文書で擬似ページの' pageinit'イベントを使用します。こうすると、結果ページが初期化されたときにコードが実行されます。 '{search：$（ '＃searchfor'）。val（）}'をGET変数を参照するものに変更する必要があります。 – Jasper

どのように動的にjQueryのモバイルページへ

答えて

関連する問題