Home/ Questions/Q 7639849
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T08:31:41+00:00

I have two pages: index.html and main.html When i set the main.html page to

  • 0

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

When i set the main.html page to be the default page of my app, the java script works, but when I set the index.html to be the main one, after the redirect, 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    jQuery Mobile pulls in remote pages via AJAX. When it does this, it only pulls in the first data-role="page" element it finds. This means that anything outside the data-role="page" element is discarded.

    The best work-around is to put all of your app’s JS into a custom.js file and include it in the head of every page, this way all the code for your site is always available (to do this you will need to use event delegation).

    You can also put the JS for each page inside the data-role="page" element so it is grabbed 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>
    • 0