ChangePage (jQuery Mobile) 不起作用答案

【问题标题】：ChangePage (jQuery Mobile) doesn't workChangePage (jQuery Mobile) 不起作用
【发布时间】：2011-08-09 17:56:51
【问题描述】：

这是第一页：index.html

 <!DOCTYPE html>
 <html>
  <head>
  <link rel="stylesheet" href="../test/style.css">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js">              </script>
 <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
</head>
 <script>

   $(document).ready(function(){
              $('#chercher').focus(function(){
          if ($('#chercher').val()=='(Code postale, Ville, Département ...)')
          $('#chercher').val("");
             });
$('#chercher').blur(function(){
    if ($('#chercher').val()=='')
    $('#chercher').val("(Code postale, Ville, Département ...)");
});     

});


$('#page').live('pagecreate',function(event){
$("#login").bind("click", function(event) {
    $.mobile.changePage( "conexion.html", { transition: "flip"} );
});
});`

   </script>

     <body>
         <div data-role="page" id="page">
        <div data-role="header" data-theme="a"><h1>Welcome</h1>

     <div data-role="navbar">
     <ul>
         <li><a href="#">Coupons</a></li>
         <li><a href="#">Bon plan</a></li>
         <li><input type="button" value="connect"  id="login" data-theme="a"/></li>

     </ul>
 </div><!-- /navbar -->
        </div>
        <div data-role="content" data-theme="c">

            <div>
                <input type="text" id="chercher" value="(Code postale, Ville, Département ...)">
            </div>
            <ul data-role="listview" data-inset="true"  data-dividertheme="b" data-count-theme="b">
                <li data-role="list-divider" >Choisissez une des catégories</li>
                <li><a href="index.php"><img src="images/tout.png" class="ui-li-icon" alt="tout" width="30" height="25"> &nbsp;&nbsp; Tout <span class="ui-li-count">24</span></a></li>
                <li><a href="index.php"><img src="images/restauration.PNG" class="ui-li-icon" alt="tout" width="30" height="25"> &nbsp;&nbsp; Restauration</a><span class="ui-li-count">2</span></li>
                <li><a href="index.php"><img src="images/loisir.PNG" class="ui-li-icon" alt="tout" width="30" height="25">&nbsp;&nbsp; Loisirs</a><span class="ui-li-count">156</span></li>
                <li><a href="index.php"><img src="images/beaute.PNG" class="ui-li-icon" alt="tout" width="30" height="25">  &nbsp;&nbsp; Beauté,santé <span class="ui-li-count">24</span></a></li>
                <li><a href="index.php"><img src="images/mode.PNG" class="ui-li-icon" alt="tout" width="30" height="25">&nbsp;&nbsp;  Mode</a><span class="ui-li-count">13</span></li>
                <li><a href="index.php"><img src="images/maison.PNG" class="ui-li-icon" alt="tout" width="30" height="25">&nbsp;&nbsp; Maison, Jardin</a><span class="ui-li-count">16</span></li>
                <li><a href="index.php"><img src="images/service.PNG" class="ui-li-icon" alt="tout" width="30" height="25">&nbsp;&nbsp;  Services</a><span class="ui-li-count">2</span></li>
                <li><a href="index.php"><img src="images/nationnal.PNG" class="ui-li-icon" alt="tout" width="30" height="25">&nbsp;&nbsp; Nationnal</a><span class="ui-li-count">0</span></li>
            </ul>
        </div>
        <div data-role="footer" data-theme="a" class="ui-footer"><h1>Pied de page</h1></div>
</div>

<div id="page2" data-role="page">
</div>

</body>
</html>

我的第二个页面被命名为：conexion.html

  <!DOCTYPE html>
  <html>
 <head>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js">   </script>
  <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
       <body>
                 <script>
                          function onSuccess(data, status)
                           {
                            data = $.trim(data);
                             $("#notification").text(data);
                            }

    function onError(data, status)
    {
       $("#notification").text(data);
    }  
    $(document).ready(function() {
        $("#submit").click(function(){



            var formData = $("#callAjaxForm").serialize();

            $.ajax({
                type: "POST",
                url: "conexion.php",
                cache: false,
                data: formData,
                success: onSuccess,
                error: onError
            });

            return false;
        });
    });
      </script>

<!-- call ajax page -->
<div data-role="page" id="callAjaxPage">
    <div data-role="header">
        <h1>Connexion</h1>
        <a href="index.html" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home" data-url="/">Home</a>
    </div>

    <div data-role="content">
        <div data-role="collapsible" data-collapsed="false">
                <h3>Sign in</h3>
        <form id="callAjaxForm">
            <div data-role="fieldcontain">
                <label for="email">Email</label>
                <input type="text" name="email" id="email"  />

                <label for="password">Password</label>
                <input type="password" name="password" id="password"  />
                <h3 id="notification"></h3>
                <button data-theme="b" id="submit" type="submit">Go</button>
            </div>
        </form>
        <div>
            <script src="http://connect.facebook.net/en_US/all.js"></script>
  <script>
     FB.init({ 
        appId:'214039341980486', cookie:true, 
        status:true, xfbml:true 
     });
  </script>
  <fb:login-button>Identifiez vous</fb:login-button>
        </div>
        </div>
        <div data-role="collapsible" data-collapsed="true">
            <h3>Create an account </h3>
        </div>
    </div>

    <div data-role="footer">
        <h1>Pied de page</h1>
    </div>
</div>

【问题讨论】：

您是否已确认您的代码在您单击按钮时被调用？（alert 或console.log）此外，您的代码不正确：

标签： jquery jquery-mobile

【解决方案1】：

使用 jQuery Mobile 绑定链接的推荐解决方案是：

$('#pageId').live('pagecreate',function(event){
    $("#login").bind("click", function(event) {
        $.mobile.changePage( "connexion.html", { transition: "flip"} );
    });  
});

您必须在页面 div 上添加一个 id="pageId"。

您必须使用pagecreate 事件（在非移动网页上代替document.ready）

并检查 changePage 方法的api（适用于 jqm beta 2）。

（并更正您的 H1 标签：<h1header</h1>）

【讨论】：

感谢您的写作，但我不明白如何关联事件 $.mobile.changePage("connexion.html", { transition: "flip"} );用我的按钮
当我把一条消息显示为“正在加载”并且页面被阻止时
你的 jqueryMobile 是最新的（beta 2）吗？您的 connexion.html 页面是否有效（使用 jquery 移动架构）？
是的，我的页面尊重 jquery 移动架构，我确实呼吁 code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
使用 xmlrequest 检查器 (Firebug) 检查 Ajax 响应。也许你会看到什么是错的。或在线上传您的 2 页。

【解决方案2】：

这是一个大问题...

在 index.html 中，您的 <script>...</script> 介于 </head> 和 <body> 之间。

将您的脚本放在<head> 或<body> 部分，最好放在<body> 中，就在</body> 标记上方。

最后一个分号后面还有一个锐角符号 (`)。

});`

在 conexion.html 中，您缺少结束的 head 标签：

</head>

然后您似乎也缺少文档末尾的结束正文和 html 标记：

</body>
</html>

然后通过W3C Validator 运行您的页面并修复任何其他错误。

【讨论】：

@Wassim：所以你通过W3C Validator 运行你的代码并修复了所有错误？ 你的代码有很多小语法问题，我不知道不知道从哪里开始。在最后一个分号之后还有一个错误的锐角符号 ( ` )。祝你好运。
谢谢你，它现在可以工作了，还有一件事 URL 已更改为 localhost/mobile/olapromo/#/mobile/olapromo/conexion.html 并且我的“conexion.html”调用“conexion.php”所以当我单击提交时，URL 再次更改 @ 987654324@ 没有验证邮箱和密码
@Wassim：如果我的回答解决了你的问题，你为什么要接受别人的回答？
也许是因为我已经解决了错误的一部分，而你解决了第二部分。