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:
Error code is:xhr_proxy?tinyhippos_apikey=ABC&tinyhippos_rurl=http%3A//localhost%3A30673/api/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/user/Get%3Fjson rippleapi.herokuapp.com
Need advice guys.