2013-08-23 21 views
9

Sto sviluppando un'applicazione PhoneGap. Quando provo la mia applicazione nel browser non ci sono problemi. Tutto funziona bene. Ma quando lo provo in ripple, il mio javascript non funziona. In dettaglio: l'utente può accedere al sistema e se reindirizza correttamente a un'altra pagina (jquery mobile utilizzato) funziona bene in chrome, internet explorer e firefox. Ma non funziona in ripple. è mostrato mio codice qui sotto:Applicazione PhoneGap non funziona su Google Ripple

<!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> 

La mia struttura dell'applicazione è la seguente:

enter image description here

codice di errore è:? Xhr_proxy tinyhippos_apikey = ABC & tinyhippos_rurl = http% 3A // localhost% 3A30673/ap i/user/Get% 3Fjson rippleapi.herokuapp.com Codice di stato: 500 Errore interno del server Sto ricevendo i dati dal mio indirizzo posthost locale: localhost: 30673/api/user/Get '; Funziona bene nel browser. E ottenere dati da localhost: 30673/api/utente/Get. Ma in ondulazione si cerca di ottenere i dati da lì:? Xhr_proxy tinyhippos_apikey = ABC & tinyhippos_rurl = http% 3A // localhost% 3A30673/api/u ser/Get% 3Fjson rippleapi.herokuapp.com

bisogno di consigli ragazzi.

+0

Vedi errori nella console? –

+0

codice di errore è: xhr_proxy tinyhippos_apikey = ABC & tinyhippos_rurl = http% 3A // localhost% 3A30673/api/user/Get% 3Fjson rippleapi.herokuapp.com Codice di stato:? 500 Internal Server Error I'am dati ottenendo dal mio localhost post indirizzo: http: // localhost: 30673/api/user/Get ' Sta funzionando bene nel browser. E ottenere dati da http: // localhost: 30673/api/user/Get. Ma in ondulazione si cerca di ottenere i dati da lì: xhr_proxy tinyhippos_apikey = ABC & tinyhippos_rurl = http% 3A // localhost% 3A30673/api/user/Get% 3Fjson rippleapi.herokuapp.com – fuat

risposta

24

Il problema che probabilmente si sta verificando è che si sta utilizzando il proxy di dominio incrociato di Ripple che è attivato nelle impostazioni per impostazione predefinita.

Il proxy del dominio incrociato ha 3 impostazioni: "remoto", "locale" e "disabilitato". Nella mia situazione ho dovuto disabilitarlo, ma in alcuni casi si sarebbe in grado di utilizzare "locale".

possibili scenari:

1) tua applicazione locale chiama un servizio remoto da qualche parte su un altro server:

si sia usare "a distanza" o "disabilitato" a seconda della configurazione sul server remoto .

2) l'applicazione locale è su "localhost" e si sta effettuando una chiamata ad un altro URL accessibili localhost:

si usare sia "locale" o "disabilitato" a seconda delle impostazioni del dominio croce e come.

3) si esegue un'applicazione locale che chiama un server che è anche locale, ma in una macchina virtuale o qualcosa che lo rende inaccessibile a un proxy su "localhost":

è necessario averlo impostato su "disabilitato" e assicurarsi che il server api abbia le impostazioni per consentire le richieste tra domini. In particolare si vorrebbe impostare l'intestazione "Access-Control-Allow-Origin".

+0

per quanto ne so per (1) scenario? si può anche usare "locale". L'utilizzo del proxy locale è un approccio standard per la gestione di Ajax tra domini diversi –

2

Ho avuto lo stesso problema. Stava succedendo quando stavo cercando di connettermi al mio servizio WebAPI ospitato su IISExpress.

Dopo aver modificato l'hosting sul server locale IIS, l'errore è scomparso e sono riuscito a collegarmi al servizio WebAPI utilizzando Ripple. Ovviamente, dovrai modificare l'url che punta al tuo servizio (nel tuo caso è http://localhost:30673).

Problemi correlati