$ .mobile.changePage() после входа в систему не работает

Я создаю приложение WebWorks, которое начинается с формы входа в систему, и если логин успешно завершен, должна отображаться вторая страница с id = 'map'. Я попытался использовать $ .mobile.changePage для отображения страницы, но только перезагружает страницу входа. Почему он не загружает вторую страницу?

Я удалил весь код проверки входа, чтобы упростить все, чтобы я мог понять, почему changePage не работает.

<!DOCTYPE html> 
<html> 
<head> 
<title>My Page</title> 
<link rel="stylesheet" href="lib/BlackBerry-JQM-all-1.0.0.css" /> 
<script src="lib/BlackBerry-JQM-all-1.0.0.js"></script> 
<script type="text/javascript" 
     src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBHGb5Si_2oXtOLCo_IzRIJPtrKkhyFPsU&sensor=false"></script> 
</head> 

<body> 
<div data-role="page" id="login"> 

    <div data-role="header"> 
    <h1>TCOB - Login</h1> 
    </div> 
    <!-- /header --> 

    <div data-role="content"> 
    <div class="BB10Container"> 
     <form method="post"> 
     <label for="username">Username</label> 
     <input type="text" name="user-input" id="username" placeholder="Username"/> 
     <label for="basic">Password</label> 
     <input type="password" name="pass-input" id="password" placeholder="Password"/> 
     <input type="submit" data-role="button" data-inline="true" data-icon="check" value="Submit" id="submit"> 
     </form> 
    </div> 
    </div> 
    <!-- /content --> 
    <div data-role="footer" data-position="fixed"> 
      </div> 
    </div> 

    <div data-role="page" id="map" > 
    <div data-role="header"> 
    <h1>TCoB</h1> 
    </div> 

    <div data-role="content"> 

    </div> 

    <div data-role="footer" data-position="fixed"> 

    </div> 
</div> 
</div> 
<script> 
    $(document).bind("mobileinit", function() { 
     $.mobile.page.prototype.options.backBtnText = "Zur&uuml;ck"; 
    }); 

    $('#username').keyup(function(){ 
     $.get("http://www.hedonsoft.com/tcob/php/check_user.php",{username: $("#username").val()},function(data){ 
      if(data == true){ 
       $('#username').css("background-color","#00FFFF").css("color","#000000"); 
      }else{ 
       $('#username').css("background-color","#000000").css("color","#FFFFFF"); 
      } 
     }); 
     }); 

     $('#submit').click(function(){ 
      $.mobile.changePage("#map"); 
     }); 

function initialize() { 
    var mapOptions = { 
    zoom: 8, 
    center: new google.maps.LatLng(-34.397, 150.644), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("map"), mapOptions); 
} 

function getLocation(){ 

} 
</script> 
</body> 
</html>

источник

2013-11-08 RapsFan1981

$ .mobile.navigate() похоже, что я ищу вместо changePage(); Это правильно? – RapsFan1981

1) 'mobileinit' должен быть запущен после загрузки jQuery и перед jQuery Mobile. 2) Если вы используете последний jQM RC '$ .mobile.toolbar.prototype.options.backBtnText' и измените страницу' $ .mobile.pageContainer.pagecontainer ("change", "URL/# page"); '. – Omar

Проблема заключается в том, что вы оба с помощью пользовательского click обработчика и с помощью <form> представить форму.

Обычай обработчик щелчка будет перемещаться к #map, и вы можете увидеть, что страница вспыхивают очень кратко, но так как ваш form не имеет action атрибут, он будет перенаправлять на той же странице - что страницы входа в систему, в результате чего второй навигации и, таким образом, приводит к странному поведению, которое вы испытываете.

См. this fiddle без form, чтобы увидеть, что он работает.

Однако обратите внимание, что $.mobile.changePage является marked as deprecated с версии 1.4.0 RC1.

источник

2013-11-08 21:11:21

$ .mobile.changePage() после входа в систему не работает

ответ

Смежные вопросы