검색 결과를 표시하기 위해 jquery mobile의 다중 페이지 템플릿 사용

여기 내 HTML 코드입니다. 노력하고있는 것은 간단하게 들리지만 그렇게 할 수는 없습니다. jquery mobile에서 제안하는 다중 페이지 템플리트를 사용하려고합니다. 첫 페이지 텍스트 상자와 버튼이 있습니다. 사용자는 텍스트 상자에 값을 입력 한 다음 사용자를 "page2"로 가져 가서 검색 세부 정보를 표시하는 버튼을 클릭합니다.검색 결과를 표시하기 위해 jquery mobile의 다중 페이지 템플릿 사용

아래의 코드는 "page2"로 이동하고 있지만 검색 결과를 볼 수 없습니다. 나는 그 사이에 경고를 삽입했고 그것은 데이터를 팝업한다. 또한 page2의 뒤로 버튼을 눌러도 page1로 이동하지 않습니까?

모든 포인터는 크게 감사하겠습니다.

<!DOCTYPE HTML> 
    <html> 
    <head> 
    <title>Employee Finder</title> 

    <script src="jquery-mobile/jquery-1.7.2.min.js"/> 
    <script src="jquery-mobile/jquery.mobile-1.0a3.min.js"/> 
    <script src="phonegap-1.3.0.js"/> 
    <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"/> 
    <link href="jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/> 

    <script> 

    $(document).ready(function() { 
     $('#findemplyoee').click(function() { 

      $.mobile.changePage('#page2', { transition: "slide", changeHash: true, reverse: true }); 

      var employeeNumber = $("#employeeNumber").val(); 
      var employeedetail = JSON.parse(... call a function here); 

      if(employeedetail.found) 
      { 
        $('#employeefirstName').text(employeedetail.firstName); 
        $('#employeelastName').text(employeedetail.lastName); 
      } 
      else 
      { 
        $('#employeeDetails').html("<p>Sorry the employee Number you entered was not found!</p>"); 
      } 

     }); 
    }); 

    </script> 

    </head> 
    <body> 

    <div data-role="page" id="page1"> 
     <div data-role="header"> 
      <h1>Find Employee Data</h1> 
     </div> 

     <div data-role="content" id="searchDetails">  
      <input name="employeeNumber" type="text" id="employeeNumber"/> 
      <input type="button" id="findemplyoee" data-theme="b" value="Find Employee"/> 
     </div> 

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

    <div data-role="page" data-add-back-btn="true" id="page2"> 
     <div data-role="header"> 
      <h1>Page Two</h1> 
     </div> 
     <div id="employeeDetails"> 
      <p id="employeefirstName"></p> 
      <p id="employeelastName"></p> 
     </div> 
     <div data-role="footer"> 
      <h4>Page Footer</h4> 
     </div> 
    </div> 

    </body> 
    </html>

출처

2012-05-15 lazyguy

jQuery Mobile 1.1로 업그레이드해야합니다! 귀하의 예를 잘 작동합니다 : http://jsfiddle.net/eUTga/

나는 당신의 포함 jQuery를 버전 (/ JQuery와-1.7.2.min.js JQuery와 모바일이) 잘 된 jQuery를 모바일 (JQuery와 모바일/JQuery와 테스트되지 않는다는 것을 확신 .mobile-1.0a3.min.js) - 또는 단순히 호환되지 않습니다.

jQuery Mobile 팀은 jQM 다운로드 사이트 (http://jquerymobile.com/download/)에서 최신 stable (1.1.0)과 함께 jQuery 1.6.4를 사용하도록 권장합니다.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> 
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

출처

2012-05-15 21:08:28 hna

굉장! 그것이 작동하여 버전 문제였습니다. 나는 당신의 jsfiddle 솔루션을 테스트하고 훌륭하게 작동합니다. 이것을 내 지역에 들여다 보자. 대단히 감사합니다 "hna" – lazyguy

그래! 그냥 테스트하고 완벽하게 작동했습니다. 너는 내 하루를 "hna"로 만들었다. 다시 한번 감사드립니다. – lazyguy

검색 결과를 표시하기 위해 jquery mobile의 다중 페이지 템플릿 사용

답변

관련 문제