0

jQuery Mobile は初めてです。2ページのシンプルなアプリを作ろうとしています。Page1 はユーザーが検索データを入力する場所で、Page2 は結果が表示される場所です。どんな助けでも大歓迎です。

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

1 に答える 1

0

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-04T18:08:58.920 に答える