Clever Geek Handbook

Javascript stops working after $ .mobile.changePage ()

I have two pages: index.html and main.html

When I set the main.html page as the default page for my application the java script works, but when I set the index.html as the main one, after redirecting, the javascript on the main .html just stops working.

here is the HTML of the two pages:

index.html

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>      

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.css" />
<style>
    /* App custom styles */
</style>
<script src="jquery.mobile-1.0.1/jquery.min.js"></script>
<script src="jquery.mobile-1.0.1/jquery.validate.min.js"></script>
<script src="jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script>

$.mobile.allowCrossDomainPages = true; 
$.mobile.ajaxLinksEnabled = false; 

 function onLoad(){
    document.addEventListener("deviceready", onDeviceReady, true);
 }
 function onDeviceReady(){
    // request the persistent file system
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onSuccess, null);
 }


function onSuccess(fileSystem) {       
    fileSystem.root.getFile("kuapodata.xml", null, gotMe, failFile);
}


// se o arquivo não existir
 function failFile(error) {
    $("#formLogin").show();
 }


// se o arquivo existir
function gotMe(fileEntry) {
    $.mobile.changePage("main.html", null, false, false);       
}



</script>
</head>
<body onload="onLoad();">

   <div data-role="page" id="page1">
        <div data-theme="a" data-role="header">
            <h3>
                Header
            </h3>
        </div>
        <div data-role="content" id="formLogin">
            <form id="loginFrm">
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup">
                        <label for="textinputEmail">
                        </label>
                        <input id="textinputEmail" placeholder="email" value="" type="email" />
                    </fieldset>
                </div>
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup">
                        <label for="textinputPassword">
                        </label>
                        <input id="textinputPassword" placeholder="senha" value="" type="password" />
                    </fieldset>
                </div>
                <input value="entrar" type="submit" />
            </form>
        </div>

    </div>


<script>
var xml;



function gotFS(fileSystem) {
    fileSystem.root.getFile("kuapodata.xml", {create: true, exclusive: false}, gotFileEntry, fail);
}

function gotFileEntry(fileEntry) {
    fileEntry.createWriter(gotFileWriter, fail);
}

function gotFileWriter(writer) {
         writer.write(xml);
}

function fail(error) {
    alert(error.code);
}



// ao fazer o login
$("form").submit(function() {
    // chama função que valida usuário
    ValidateUser();
    return false;
});


// verifica se o usuário existe
function ValidateUser(email, password) {
    $.ajax({
    type: 'POST',
        url: 'http://********/oauth.aspx',
        data: "email=" + $("#textinputEmail").val() + "&password=" +  $("#textinputPassword").val(),
        success: function(data) {
            // se o usuário existir
            if (data != "false") {
                xml = data;

                // cria o arquivo xml se ainda não existir
                window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);

                // muda o usuário de  página
                $.mobile.changePage("main.html");
            }
            else {
                alert("Dados inválidos. Tente novamente.");
            }
        }
    });
}

</script>

 </body>
 </html>

main.html

    <!DOCTYPE HTML>
<html>
  <head>
        <title>PhoneGap</title>


    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" href="jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.css" />
    <style>
        /* App custom styles */
    </style>
    <script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>  
    <script src="jquery.mobile-1.0.1/jquery.min.js"></script>
    <script src="jquery.mobile-1.0.1/jquery.validate.min.js"></script>
    <script src="jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.js"></script>

    <script>

$(document).ready(function() {
   alert("yesss");
});





  </script>
  </head>
  <body>

       <div data-role="page" id="page1">
            <div data-theme="a" data-role="header">
                <h3>
                    Header
                </h3>
            </div>
            <div data-role="content" id="main">

            </div>

        </div>


  </body>
</html>
+3


source to share


1 answer


jQuery Mobile retrieves remote pages via AJAX. When it does this, it only pulls in the first item data-role="page"

it finds. This means that anything outside the element is data-role="page"

discarded.

The best job is to put the entire JS application in a file custom.js

and include it at the top of every page, this way all the code for your site is always available (for this you will need to use event delegation).



You can also put JS for each page inside the element data-role="page"

so that it is captured by jQuery Mobile and not just discarded:

   <div data-role="page" id="page1">
        <script>
            alert('hello');
        </script>
        <div data-theme="a" data-role="header">
            <h3>
                Header
            </h3>
        </div>
        <div data-role="content" id="main">

        </div>

    </div>
+9


source






More articles:


All Articles