Mobile.changepage in jQuery not working(white screen)

Question

i'm using html css and js for building my phonegap project on eclipse and i included my jquery and jquery mobile libraries to use mobile.changepage function in my js file but it keeps giving me white screen then returns to the same page (no change occurs)

here are my files:

 document.addEventListener('touchmove', function(e) { e.preventDefault(); }, false); document.getElementById("Golds").addEventListener('touchstart', function(){ alert("omar"); $.mobile.changePage('login.html'); }); document.getElementById("Titans").addEventListener('touchstart', function(){ $.mobile.changePage("login.html"); }); //End Login Form//

 <!DOCTYPE html> <html> <head> <title>Phone Gap trial</title> <link rel= 'stylesheet' href='css/bootstrap.css' /> <link rel= 'stylesheet' href='css/font-awesome.min.css' /> <link rel= 'stylesheet' href='css/style.css' /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"> </head> <body> <div class="ourteam text-center"> <!--start container--> <div class="team"> <section class="header"> <div> <h1>Train & Game</h1> </div> </section> <div class="container"> <div class="row"> <div class="col-xs-4"> <div class="person"> <img id="Golds" class="teamphotos img-circle" src="img\\golds-gym-logo.png"/> <h6>Gold's Gym</h6> </div> </div> <div class="col-xs-4"> <div class="person"> <img id="Titans" class="teamphotos img-circle" src="img\\Titans.jpg"/> <h6>Titans Gym</h6> </div> </div> <div class="col-xs-4"> <div class="person"> <img id="Smart" class="teamphotos img-circle" src="img\\smart.png"/> <h6>Smart Gym</h6> </div> </div> </div> <br> <div class="row"> <div class="col-xs-6"> <div class="person"> <img id="SamiaAllouba" class="teamphotos img-circle" src="img\\Samia-Allouba.jpg"/> <h6>Samia Allouba</h6> </div> </div> <div class="col-xs-6"> <div class="person"> <img class="teamphotos img-circle" src="img\\fibers.jpg"/> <h6>Fibers Gym</h6> </div> </div> </div> </div> <!--end container--> </div> <!--end team--> </div> <!--Our team div end--> <script src="js/index.js"></script> <script src="js/jquery-2.1.4.min.js"> </script> <script src="js/jquery.mobile-1.4.5.min.js"> </script> <script src="js/bootstrap.min.js"> </script> </body> </html>

Answer 1

<!DOCTYPE html>
<html>
<head>
<title>Phone Gap trial</title>
<link rel= 'stylesheet' href='css/bootstrap.css' />
<link rel= 'stylesheet' href='css/font-awesome.min.css' />
 <link rel= 'stylesheet' href='css/style.css' />
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
</head>

<body>
    <div class="ourteam text-center">
    <!--start container-->
    <div  class="team">
    <section class="header">
        <div>
        <h1>Train & Game</h1>
        </div>
        </section>
        <div class="container">

            <div class="row">

            <div class="col-xs-4">
            <div class="person">
            <img id="Golds" class="teamphotos img-circle" src="img\golds-gym-logo.png"/>
            <h6>Gold's Gym</h6>
            </div>
            </div>

            <div class="col-xs-4">
            <div class="person">
            <img id="Titans" class="teamphotos img-circle" src="img\Titans.jpg"/>
            <h6>Titans Gym</h6>
            </div>
            </div>

            <div class="col-xs-4">
            <div class="person">
            <img id="Smart" class="teamphotos img-circle" src="img\smart.png"/>
            <h6>Smart Gym</h6>
            </div>
            </div>

            </div>
            <br>
            <div class="row">

            <div class="col-xs-6">
            <div class="person">
            <img id="SamiaAllouba" class="teamphotos img-circle" src="img\Samia-Allouba.jpg"/>
            <h6>Samia Allouba</h6>
            </div>
            </div>

            <div class="col-xs-6">
            <div class="person">
            <img class="teamphotos img-circle" src="img\fibers.jpg"/>
            <h6>Fibers Gym</h6>
            </div>
            </div>

            </div>

            </div>
            <!--end container-->
    </div> 
    <!--end team-->
    </div>
<!--Our team div end-->


<!--<script src="js/index.js"></script>--> <!-- Commented this Line in your code -->
<script src="js/jquery-2.1.4.min.js"> </script>
<script src="js/jquery.mobile-1.4.5.min.js"> </script>
<script src="js/bootstrap.min.js"> </script>
<script src="js/index.js"></script> <!-- Added this line -->
</body>
</html>

And Javascript could also be

$(document).on('touchmove', function(e) {
    e.preventDefault();
}, false);


$("#Golds").on('touchstart', function(){
    alert("omar");
    $.mobile.changePage('login.html');
});


$("#Titans").on('touchstart', function(){
    $.mobile.changePage("login.html");
});

Mobile.changepage in jQuery not working(white screen)

Question

1 answers

solution1
0 2015-09-24 19:24:09

Mobile.changepage in jQuery not working(white screen)

Question

1 answers

solution1 0 2015-09-24 19:24:09

solution1
0 2015-09-24 19:24:09