Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
595 views
in Technique[技术] by (71.8m points)

jquery - PhoneGap application not working on Google Ripple

I'm developing a phoneGap application. When I test my application in the browser there is no problem. Everythings works well. But when I am try it in ripple, my javascript does not work. In detail: The user can login the system and if it successfully redirects to another page (used jquery mobile) it works well in chrome, internet explorer, and firefox. But does not work in ripple. My code is shown below:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title></title>
    <link rel="stylesheet" href="css/jquery.mobile-1.3.2.css">

    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/jquery.mobile-1.3.2.js"></script>
    <script src="js/jquery.base64.js"></script>
    <script src="js/cordova.js"></script>
    <script type="text/javascript">
        $(function() {
            var credentials = 'admin:adminabc';
            var authType = "Basic " + credentials;
            $('#loginForm').submit(function() {
                $.ajax({
                    type : "GET",
                    url :  'http://localhost:30673/api/user/Get',
                    data : 'json',
                    beforeSend : function(xhr) {
                         xhr.setRequestHeader("Authorization", authType);
                    },
                    success : function(data, textStatus) {
                        $.mobile.changePage("#menu", {
                            transition : "slideup"
                        });
                    }
                });
            });

            $("#aboutUs").click(function() {
                $.ajax({
                    type : "GET",
                    url :  'http://localhost:30673/api/AboutMeWA/',
                    data : 'json',
                    beforeSend : function(xhr) {
                         xhr.setRequestHeader("Authorization", authType);
                    },
                    success : function(data, textStatus) {
                        $('#aboutMeTitle').val(data);
                    }
                });
            });
        });

        function onBodyLoad() {
            document.addEventListener("deviceready", onDeviceReady, false);

            function onDeviceReady() {
                document.addEventListener("pause", onPause, false);
                document.addEventListener("resume", onResume,  false);
            }

            function onPause() {
                alert("paused");
            }

            function onResume() {
                alert("resume");
            }

        }
    </script>
</head>
<body onload="onBodyLoad()">
    <div data-role="page" id="mainPage">
        <div data-role="header" data-theme="a" >
            <h4> Ziro </h4>
        </div>
        <div data-role="content">
            <form id="loginForm">
                <div data-role="fieldcontain">
                    <label for="textinput1"> Kullan?c? Ad?:     </label>
                    <input name="" id="userName"  placeholder="username" value="" type="text">
                </div>
                <div data-role="fieldcontain">
                    <label for="textinput2"> Password</label>
                    <input name="" id="password"  placeholder="password" value="" type="password">
                </div>
                <input type="submit" data-theme="a" data- icon="arrow-r" data-iconpos="left"
                value="Login">
            </form>
            <a href="#menu" class="ui-link" data- transition="flip">Menü</a>
        </div>
        <div data-role="footer" data-theme="a"  data-position="fixed">
            <h3> FF Yaz?l?m </h3>
        </div>

    </div>
    <div data-role="page" id="menu" data-add-back-btn="true" data-back-btn-text="Geri">
        <div data-role="header" data-theme="a" >
            <h4> Ziro Mobilya </h4>
        </div>
        <div data-role="content">
            <ul data-role="listview" data-divider-theme="a" data- inset="true">
                <li data-role="list-divider" role="heading">
                    Panel
                </li>
                <li data-theme="c">
                    <a href="#about" data-transition="flip"  id="aboutUs"> Hakk?m?zda </a>
                </li>
                <li data-theme="c">
                    <a href="#page1" data-transition="slide">  Referans Resimleri </a>
                </li>
                <li data-theme="c">
                    <a href="#page1" data-transition="slide"> Servis Resimleri </a>
                </li>
                <li data-theme="c">
                    <a href="#page1" data-transition="slide"> Slogan </a>
                </li>
                <li data-theme="c">
                    <a href="#page1" data-transition="slide"> ?statistikler </a>
                </li>
                <li data-theme="c">
                    <a href="#page1" data-transition="slide">  Button </a>
                </li>
            </ul>
        </div>
        <div data-role="footer" data-theme="a"  data-position="fixed">
            <h3> FF Yaz?l?m </h3>
        </div>
    </div>

    <div data-role="page" id="about" data-add-back-btn="true" data-back-btn-text="Geri">
        <div data-theme="a" data-role="header">
            <h3> Hakk?m?zda </h3>
        </div>
        <div data-role="content">
            <div style="">
                <img style="width: 288px; height: 100px"  src="http://aknera.com/temp/default/images/background3.jpg">
            </div>
            <a data-role="button" data-theme="a" href="#page1" data-icon="arrow-l"
            data-iconpos="left"> Galeriden Resim Se? </a>
            <div data-role="fieldcontain">
                <label for="textinput2"> Ba?l?k: </label>
                <input name="" id="aboutMeTitle" placeholder=""  value="" type="text" data-mini="true">
            </div>
            <div data-role="fieldcontain">
                <label for="textarea2"> A??klama </label>
                <textarea name="" id="textarea2" placeholder=""  data-mini="true"></textarea>                                                           




            </div>
            <a data-role="button" data-theme="a" href="#page1" data-icon="alert" data-iconpos="left"> Kaydet </a>
        </div>
        <div data-role="footer" data-theme="a"  data-position="fixed">
            <h3> FF Yaz?l?m </h3>
        </div>
    </div>
</body>
 </html>

My application structure is shown below:

enter image description here

Error code is:xhr_proxy?tinyhippos_apikey=ABC&tinyhippos_rurl=http%3A//localhost%3A30673/ap??i/user/Get%3Fjson rippleapi.herokuapp.com Status Code:500 Internal Server Error I'am getting data from my localhost post adress:localhost:30673/api/user/Get'; It is working well in browser . And getting data from localhost:30673/api/user/Get. But in ripple it tries to get data from There: xhr_proxy?tinyhippos_apikey=ABC&tinyhippos_rurl=http%3A//localhost%3A30673/api/u??ser/Get%3Fjson rippleapi.herokuapp.com

Need advice guys.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

The issue that you are likely running into is that you are using Ripple's cross-domain proxy which is turned on in settings by default.

The cross-domain-proxy has 3 settings: "remote", "local" and "disabled". In my situation I actually had to disable it, but in some cases you would be able to use "local".

Possible scenarios:

1) your local application calls a remote service somewhere on another server:

you would either use "remote" or "disabled" depending on the configuration on the remote server.

2) your local application is on "localhost" and you are making a call to another localhost accessible URL:

you would either use "local" or "disabled" depending on your cross domain settings and such.

3) you are running a local app that calls a server that is also local but in a vm or something that makes it inaccessible to a proxy on "localhost":

you need to have it set to "disabled", and make sure your api server has settings to allow cross-domain requests. Most notably you would want to set the "Access-Control-Allow-Origin" header.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...