JavaScript无法在模拟器中执行(Android中的PhoneGap)

时间:2013-10-01 06:00:28

标签: javascript android jquery html cordova

我在PhoneGap应用程序中遇到了一个奇怪的行为。我是新手,所以你的每一个帮助都会很明显。

我在PhoneGap(Cordova)中创建了一个应用程序,我在其中设计了两个Index.html 文件。 单击Icon(my_notification_new)时使用Index.html文件,我移至 Notification.html 。(从服务器加载的列表视图中显示的数据)。

A) Index.html(效果很好)

<!DOCTYPE html>
<html>
<head>

    <!-- /* Title */ -->
    <title>Newa: HTML Template</title>

    <!-- /* Meta Tags */ -->
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- /* Stylesheets */ -->
    <link rel="stylesheet" href="css/my-custom-theme.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div data-role="page">
    <div class="header">
        <p>Smart Self-Service</p>
    </div>
    <div class="content">
        <div class="bar">
        /***********Move to Notification.html******************/

            <div class="one_half">
                <a href="Notification.html">
                    <img src="images/my_notification_new.png" align="center" /></a>
                    <p class="dashfont" align="center">Notifications</p>
            </div> 
       /********************************************************/
            <div class="one_half">
                <a href="#">
                    <img src="images/new_request_new.png" align="center" /></a>
                     <p class="dashfont" >Self-Service request</p>
            </div>
        </div>
        <div class="bar">
            <div class="one_half">
                <a href="#">
                    <img src="images/setting.png" align="center" /></a>
                    <p class="dashfont" align="center">Settings</p>
            </div>
            <div class="one_half">
                <a href="#">
                    <img src="images/exit.png" align="center" /></a>
                    <p class="dashfont" align="center"ali>Exit</p>
            </div>
        </div>
    </div>
    <div class="footer">
    </div>
    </div>
</body>
</html>

现在改变了一些设计之后,我已经制作了这个Index.html

B)Index.html (当我转到Notification.html时,我无法看到列表视图中的数据,JS无法执行)

<!DOCTYPE html> 
<html> 
<head> 
    <title>Worklist</title>

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

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <style type="text/css">
    #center_content{
        text-align:center;
        min-height:400px;
    }
    #dashboard{

        width:350px;
        margin:0px auto;
        display:block;
        clear:both;
        text-align:center;

    }
    .dashaboard_icon{
        padding:block;
        padding:35px;
        float:center;
        margin-bottom:10px;

    }

    </style>
    </head>
<body>
<div data-role="page" data-theme="f"> 

    <div data-role="header" data-position="fixed">
        <h1 style="white-space:pre-wrap">Smart Self Service</h1>
    </div><!-- /header -->

    <div data-role="content"  data-theme="f">

        <div id="center_content">
        <div id="dashboard">
        /********* Move to Notification.html**********/ 
        <a href="Notification.html"><img id="dIcon_notification" src="images/mdpi/my_notification_new.png" class="dashaboard_icon" alt="" ></a>
                  /*******************/ 
        <a href="#"><img id="dIcon_request" src="images/mdpi/new_request_new.png" class="dashaboard_icon" alt="" ></a>
        <a href="#"><img id="dIcon_setting" src="images/mdpi/setting.png"         class="dashaboard_icon" alt="" ></a>
        <a href="#"><img id="dIcon_exit" src="images/mdpi/exit.png"               class="dashaboard_icon" alt="" ></a>

    </div>
    </div>
    </div><!-- /content -->

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

这是我的 Notification.html。,效果很好。

<!DOCTYPE html> 
<html> 
<head> 
    <title>My Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>
    <script src="moment.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <script type="text/javascript">
        function soap() {

            Hr_Offer();
            Hr_Vacancy();
            function Hr_Offer() {

            var xmlhttp = new XMLHttpRequest();
            xmlhttp.open("POST","http://180.211.97.41:7777/orabpel/default/XXNotificationListRetrieval/1.0",true);

            /*** Soap Envelop ***/      
            var sr= "<?xml version='1.0' encoding='UTF-8'?>";
                sr+="<soap:Envelope xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\" xmlns:wsu=\"http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-utility-1.0.xsd\">";
                sr+="<soap:Header>";    
                sr+="<wsse:Security xmlns:wsse=\"http:\//docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd\" xmlns=\"http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd\" xmlns:env=\"http://schemas.xmlsoap.org/soap/envelope/\" soap:mustUnderstand=\"1\">";
                sr+="<wsse:UsernameToken xmlns:wsse=\"http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd\" xmlns=\"http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd\">";
                sr+="<wsse:Username>CBROWN<\/wsse:Username>";
                sr+="<wsse:Password Type=\"http:\//docs.oasis-open.org\/wss\/2004\/01\/oasis-200401-wss-username-token-profile-1.0#PasswordText\">welcome<\/wsse:Password>";
                sr+="<\/wsse:UsernameToken>";
                sr+="<\/wsse:Security>";
                sr+="<\/soap:Header>";  
                sr+="<soap:Body xmlns:ns1=\"http://xmlns.oracle.com/bpel/mobile/Notificationlist\">";
                sr+="<ns1:NotificationlistRetrievalREQ>";
                sr+="<ns1:NotificationlistType>HR_OFFER<\/ns1:NotificationlistType>";
                sr+="<ns1:Status>TODO<\/ns1:Status>";
                sr+="<\/ns1:NotificationlistRetrievalREQ>";
                sr+="<\/soap:Body>";
                sr+="<\/soap:Envelope>";


            /*** Send the POST request ***/
            xmlhttp.setRequestHeader("Accept", "application/xml", "text/xml", "\*/\*");
            xmlhttp.setRequestHeader("SOAPAction", "process");
            xmlhttp.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
            xmlhttp.send(sr);


            xmlhttp.onreadystatechange = function () {

                if (xmlhttp.readyState == 4) {

                    if (xmlhttp.status == 200) {

                        //alert('Response'+xmlhttp.responseXML);
                        var xmlResult=xmlhttp.responseXML;
                        /*** Pull out the quote and author elements ***/
                        var notificationId = xmlResult.getElementsByTagName('NotificationId');
                        var notificationContext = xmlResult.getElementsByTagName('NotificationContext');
                        var subject = xmlResult.getElementsByTagName('Subject');
                        var startDate = xmlResult.getElementsByTagName('BeginDate');
                        var dueDate = xmlResult.getElementsByTagName('DueDate');

                        /*** Create arrays***/
                        var arrNotificationId=new Array();
                        var arrNotificationContext=new Array();
                        var arrSubject=new Array();
                        var arrStartDate=new Array();
                        var arrDueDate=new Array();

                        /*** Loop through each quote elements yanking out the values and pushing them into the array ***/
                        for (i=0; i<notificationId.length; i++)
                        {
                            arrNotificationId.push(notificationId[i].childNodes[0].nodeValue);
                            arrNotificationContext.push(notificationContext[i].childNodes[0].nodeValue);
                            arrSubject.push(subject[i].childNodes[0].nodeValue);
                            //alert(startDate[i].childNodes[0].nodeValue);

                            var tempStart=startDate[i].childNodes[0].nodeValue;
                            var date_start = moment(tempStart).format("DD-MM-YYYY");
                            arrStartDate.push(date_start);

                            var tempDue=startDate[i].childNodes[0].nodeValue;
                            var date_due= moment(tempDue).format("DD-MM-YYYY");
                            arrDueDate.push(date_due);
                        }

                        /*** Display in Listview ***/
                        for (var s in arrNotificationId) {
                            //alert(arrSubject[s]);
                            $("#list_workList").append($("<li><a style=\"white-space:pre-wrap;\" href='" + arrSubject[s].link + "'>"+ arrSubject[s].toString()  +"\n"+"Start Date :"+arrStartDate[s]+"   "+"Due Date :"+arrDueDate[s]+ "</a></li>"));

                        }
                        $('#list_workList').listview('refresh');
                    }
                    else
                    {
                        alert('Error '+xmlhttp.status);
                    }
                }
            }               
        }

        function Hr_Vacancy() {

            var xmlhttp = new XMLHttpRequest();
            xmlhttp.open("POST","http://ip:port/orabpel/default/XXNotificationListRetrieval/1.0",true);

            /*** Soap Envelop ***/      
            var sr= "<?xml version='1.0' encoding='UTF-8'?>";
                sr+="<soap:Envelope xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\" xmlns:wsu=\"http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-utility-1.0.xsd\">";
                sr+="<soap:Header>";    
                sr+="<wsse:Security xmlns:wsse=\"http:\//docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd\" xmlns=\"http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd\" xmlns:env=\"http://schemas.xmlsoap.org/soap/envelope/\" soap:mustUnderstand=\"1\">";
                sr+="<wsse:UsernameToken xmlns:wsse=\"http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd\" xmlns=\"http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd\">";
                sr+="<wsse:Username>Hello<\/wsse:Username>";
                sr+="<wsse:Password Type=\"http:\//docs.oasis-open.org\/wss\/2004\/01\/oasis-200401-wss-username-token-profile-1.0#PasswordText\">world<\/wsse:Password>";
                sr+="<\/wsse:UsernameToken>";
                sr+="<\/wsse:Security>";
                sr+="<\/soap:Header>";  
                sr+="<soap:Body xmlns:ns1=\"http://xmlns.oracle.com/bpel/mobile/Notificationlist\">";
                sr+="<ns1:NotificationlistRetrievalREQ>";
                sr+="<ns1:NotificationlistType>HR_VACANCY<\/ns1:NotificationlistType>";
                sr+="<ns1:Status>TODO<\/ns1:Status>";
                sr+="<\/ns1:NotificationlistRetrievalREQ>";
                sr+="<\/soap:Body>";
                sr+="<\/soap:Envelope>";


            /*** Send the POST request ***/
            xmlhttp.setRequestHeader("Accept", "application/xml", "text/xml", "\*/\*");
            xmlhttp.setRequestHeader("SOAPAction", "action_name");
            xmlhttp.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
            xmlhttp.send(sr);


            xmlhttp.onreadystatechange = function () {

                if (xmlhttp.readyState == 4) {

                    if (xmlhttp.status == 200) {

                        //alert('Response'+xmlhttp.responseXML);
                        var xmlResult=xmlhttp.responseXML;
                        /*** Pull out the quote and author elements ***/
                        var notificationId = xmlResult.getElementsByTagName('NotificationId');
                        var notificationContext = xmlResult.getElementsByTagName('NotificationContext');
                        var subject = xmlResult.getElementsByTagName('Subject');
                        var startDate = xmlResult.getElementsByTagName('BeginDate');
                        var dueDate = xmlResult.getElementsByTagName('DueDate');

                        /*** Create arrays***/
                        var arrNotificationId=new Array();
                        var arrNotificationContext=new Array();
                        var arrSubject=new Array();
                        var arrStartDate=new Array();
                        var arrDueDate=new Array();

                        /*** Loop through each quote elements yanking out the values and pushing them into the array ***/
                        for (i=0; i<notificationId.length; i++)
                        {
                            arrNotificationId.push(notificationId[i].childNodes[0].nodeValue);
                            arrNotificationContext.push(notificationContext[i].childNodes[0].nodeValue);
                            arrSubject.push(subject[i].childNodes[0].nodeValue);

                            var tempStart=startDate[i].childNodes[0].nodeValue;
                            var date_start = moment(tempStart).format("DD-MM-YYYY");
                            arrStartDate.push(date_start);

                            var tempDue=startDate[i].childNodes[0].nodeValue;
                            var date_due= moment(tempDue).format("DD-MM-YYYY");
                            arrDueDate.push(date_due);
                        }

                        /*** Display in Listview ***/
                        for (var s in arrNotificationId) {
                            //alert(arrSubject[s]);
                            $("#list_workList").append($("<li><a style=\"white-space:pre-wrap;\" href='" + arrSubject[s].link + "'>"+ arrSubject[s].toString() +"\n"+"Start Date :"+arrStartDate[s]+"   "+"Due Date :"+arrDueDate[s]+ "</a></li>"));

                        }
                        $('#list_workList').listview('refresh');
                    }
                    else
                    {
                        alert('Error '+xmlhttp.status);
                    }
                }
            }               
        }        
}
    </script>
</head> 
<body onload="soap()">
<div data-role="page" data-theme="f"> 
    <form name="Worklist" action="" method="post">
        <div>
            <div id="response" />
        </div>
    </form>


    <div data-role="header" data-position="fixed">
        <h1>Worklist</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <ul data-role="listview" data-theme="c" id="list_workList">
        </ul>
    </div><!-- /content -->

</div><!-- /page -->

</body>
</html>

奇怪的是它适用于eclipce浏览器和预览。

1 个答案:

答案 0 :(得分:3)

if you want to redirect page on Notification.html then add data-ajax="false" in your anchor tag


<a href="Notification.html" data-ajax="false">