CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-mobile
GeoSal
GeoSal

Reputation: 333

Cannot be redirected to another page from jquery Mobile navigation bar

I'm trying to develop a mobile app using jQuery mobile and I used navigation bar tab widget code in the official documentation. My first issue is that when I click on a tab from the navigation bar displayed on the footer, it doesn't direct me to the page I want. When I debug using Chrome's console I get this error :

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

Here's my accueil.html code :

<!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 : when I go to identificationElecteurs.html page and I click on the Accueil tab, I'm redirected to that page. Which is weird since I can't do the same going from the accueil.html to identificationElecteurs.html page nor from the resultatsScrutin.html page to identificationElecteurs.html.

The resultatsScrutin.html code :

<!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>

Upvotes: 1

Views: 456

Answers (1)

GeoSal
GeoSal

Reputation: 333

Problem fixed. Apparently it was just some JS conflict.

Upvotes: 1

Related Questions