如何將數據動態呈現到jquery移動頁面

我是jQuery Mobile的新手。我正在嘗試使用兩頁簡單的應用程序。 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移動這是一歲（而不是在所有穩定的）：HTTP： //jquerymobile.com/download/ – Jasper 2012-04-04 18:01:01

你還不如讓你的第二個頁面的外部網頁，做搜索邏輯正確的就可以了：

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

然後在你的第二個頁面，您可以只收到$_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刷新了兩次。另外，我正在將my-script.php製作爲html，所以當我直接指向my-script.html它不會在文檔加載後執行jquery函數。 – lazyguy 2012-04-04 20:08:24

@lazyguy我更新了我的答案，但是我忘了在'click'事件處理程序的末尾添加'return false;'以便鏈接的默認行爲將被忽略。這是什麼導致你的雙導航。與'＃search'元素使用'click'事件不同，''my-script.html'文件中的僞頁面使用'pageinit'事件。這樣代碼將在結果頁面初始化時運行。您必須將'{search：$（'＃searchfor'）。val（）}'更改爲引用GET變量發送到頁面的內容。 – Jasper 2012-04-04 20:30:22

如何將數據動態呈現到jquery移動頁面

回答

相關問題