Question

我正在尝试使用jQuery mobile开发移动应用程序，并且我在官方文档中使用了导航栏选项卡小部件代码。我的第一个问题是，当我单击页脚上显示的导航栏中的选项卡时，它不会指示我到我想要的页面。当我使用Chrome控制台进行调试时，出现此错误：

Uncaught TypeError: Cannot read property 'replace' of undefined     jquery.mobile-1.4.4.js:4347 
(anonymous function) jquery-2.1.1.min.js:2 
n.extend.each        jquery-2.1.1.min.js:2 
n.fn.n.each          jquery.mobile-1.4.4.js:4338 
base.rewrite         jquery.mobile-1.4.4.js:5070 
(anonymous function) jquery-2.1.1.min.js:2 
n.extend.proxy.n.isFunction.f      jquery-2.1.1.min.js:2 
n.Callbacks.j                      jquery-2.1.1.min.js:2 
n.Callbacks.k.fireWith             jquery-2.1.1.min.js:4 
xjquery-2.1.1.min.js:4 
n.ajaxTransport.k.cors.a.crossDomain.send.b

这是我的accueil.html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Accueil</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../CasaElectionsMobileApp/public/jquery.mobile-1.4.4/jquery.mobile-1.4.4.css">
<link href="../CasaElectionsMobileApp/public/jquery.mobile-1.4.4/jquery.mobile.structure-1.4.4.min.css" rel="stylesheet" />
<script src="../CasaElectionsMobileApp/public/jquery-2.1.1.min.js"></script>
<script src="../CasaElectionsMobileApp/public/jquery.mobile-1.4.4/jquery.mobile-1.4.4.min.js"></script>
<script src="../CasaElectionsMobileApp/public/jquery.mobile-1.4.4/jquery.mobile-1.4.4.js"></script>
</head>

<body>
<div data-role="page">
    <div data-role="header" data-theme="b">
        <h1>Casa Elections App</h1>
    </div>

    <!-- /header -->
    <div role="main" class="ui-content">
        <h2 class="mc-text-center">Bienvenue!</h2>
        <p> <center>Bienvenue dans la page d'accueil de l'application CasaElections.</center><br>
            Cette application est destinée à être utilisée par les correspondants des bureaux de vote. Son objectif est d'identifier les électeurs et compter le nombre de votants d'une part, ainsi que d'envoyer les résultats de vote après l'opération du dépouillement.
        </p>
    </div>
    <!-- /content -->

    <div data-role="footer" data-id="foo2" data-position="fixed" data-theme="b">
        <div data-role="navbar">
            <ul>
                <li><a href="accueil.html">Accueil</a></li>
                <li><a href="identificationElecteurs.html">Identification</a></li>
                <li><a href="resultatsScrutin.html">Résultats</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->

</div>
<!-- /page -->
</body>
</html>

P.S：当我访问identificationElecteurs.html页面并点击Accueil选项卡时，我被重定向到该页面。这很奇怪，因为我不能从accueil.html到identificationElecteurs.html页面，也不会从resultatsScrutin.html页面到identifyElecteurs.html。

resultatsScrutin.html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Authentification</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../CasaElectionsMobileApp/public/jquery.mobile-1.4.4/jquery.mobile-1.4.4.css">
<link href="../CasaElectionsMobileApp/public/jquery.mobile-1.4.4/jquery.mobile.structure-1.4.4.min.css" rel="stylesheet" />
<script src="../CasaElectionsMobileApp/public/jquery-2.1.1.min.js"></script>
<script src="../CasaElectionsMobileApp/public/jquery.mobile-1.4.4/jquery.mobile-1.4.4.min.js"></script>
<script src="../CasaElectionsMobileApp/public/jquery.mobile-1.4.4/jquery.mobile-1.4.4.js"></script>
</head>

<body>
<div data-role="page">
    <div data-role="header" data-theme="b">
        <h1>Casa Elections App</h1>
    </div><!-- /header -->
    <div role="main" class="ui-content">
    <!--Tabs navigation-->
        <div data-role="tabs" id="tabs" >
          <div data-role="navbar" data-position="fixed">
            <ul>
              <li><a href="#one" data-ajax="false">BV</a></li>
              <li><a href="#two" data-ajax="false">PP</a></li>
              <!-- <li><a href="ajax-content-ignore.html" data-ajax="false">three</a></li> -->
            </ul>
          </div>
          <div id="one" class="ui-body-d ui-content">
            
        <!-- Will use the id to call on AJAX-->
        <form id="form1" data-ajax="false" method="post">
            <h3><center>Résultats après dépouillement</center></h3>

            <label for="txt-cin">N° de CIN</label>
            <input type="text" name="txt-cin" id="txt-cin" value="" placeholder="Taper votre nom d'utilisateur">

            <button class="ui-btn ui-mini">Rechercher</button>
        </form>

          </div>
          <div id="two">
            <form id="form2" data-ajax="false" method="post">
                <h3><center>Résultats après dépouillement</center></h3>

                <label for="txt-nbre-ve">Nombre de voix exprimées (En chiffres) :</label>
                <input type="text" name="txt-nbre-ve" id="txt-nbre-ve" value="" placeholder="Exemple : 456">

                <label for="txt-nbre-bn">Nombre de bulletins nuls (En chiffres) :</label>
                <input type="text" name="txt-nbre-bn" id="txt-nbre-bn" value="" placeholder="Exemple : 457">

                <label for="txt-nbre-insc">Nombre d'inscrits (En chiffres) :</label>
                <input type="text" name="txt-nbre-insc" id="txt-nbre-insc" value="" placeholder="Exemple : 458">

                <label for="txt-nbre-votants">Nombre de votants (En chiffres) :</label>
                <input type="text" name="txt-nbre-votants" id="txt-nbre-votants" value="" placeholder="Exemple : 459">

                <button class="ui-btn ui-mini">Valider</button>
            </form>

          </div>
        </div>


    </div>

    <div data-role="footer" data-id="foo2" data-position="fixed" data-theme="b">
        <div data-role="navbar">
            <ul>
                <li><a href="accueil.html">Accueil</a></li>
                <li><a href="identificationElecteurs.html">Identification</a></li>
                <li><a href="resultatsScrutin.html">Résultats</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->

</div>
</body>
</html>

Answer 1

问题已解决。显然这只是一些JS冲突。

无法从jquery Mobile导航栏重定向到另一个页面

1 个答案: