appMobi xhr.js loses jquery post return data
https://stackoverflow.com//questions/10661236
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Maybe I am working with it wrong. I don't know. All I know is its something to do specifically with the XHR.js that comes with appMobi. I have the latest build as of what ever was on there site 2 days ago. I am developing on a Macbook Pro. I am attempting to Test locally with the XDK and via Local Wifi/Test anywhere with an HTC Evo 3D using the Android platform. As well as I am using an iPhone 4S and iPad2. Its the same result every time.
I see no errors in the console debug window. All I see is the words "RemoteBridge" or "RemoteBridge2". My script is simple over all. Just a plain jQuery based $.ajax post and a little html to go with it. The URL though I will be changing it when I post it as I don't want it visible via public forum is a valid URL and drops a valid JSON object as its output. So I need input, I have no idea where to go from here as my app requires a lot of dynamic data that updates on the fly. And allegedly all I had to do was include xhr.js and my standard jQuery should have worked.
Anyway here is my code.
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" media="all" href="./src/global.css">
</head>
<body>
<div id="header">
<div id="logo"></div>
<div id="coname">COMPANY</div>
</div>
<div id="content"></div>
<div id="footer">
<div id="advert"></div>
</div>
<script type="text/javascript" charset="utf-8" src="./src/appmobi.js"></script>
<script type="text/javascript" charset="utf-8" src="./src/xhr.js"></script>
<script type="text/javascript" charset="utf-8" src="./src/jquery-1.7.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="./src/global.js"></script>
</body>
</html>
and the contents of global.js
// This event handler is fired once the AppMobi libraries are ready
function onDeviceReady() {
//use AppMobi viewport to handle device resolution differences if you want
//AppMobi.display.useViewport(768,1024);
//hide splash screen now that our app is ready to run
AppMobi.device.hideSplashScreen();
}
//initial event handler to detect when appMobi is ready to roll
document.addEventListener("appMobi.device.ready",onDeviceReady,false);
$(document).ready(function()
{
/*
var request = $.ajax({
url: "http://this.url-has-been-changed.net/geo/suggest",
type: "POST",
data: {"entry" : "951"},
dataType: "json"
});
request.done(function(data){$('#advert').append('done');});
request.fail(function(data){$('#advert').append('fail');})
request.error(function(data){$('#advert').append('error');})
request.complete(function(data){$('#advert').append('complete');})
request.success(function(data){$('#advert').append('success');})
*/
$.ajax({
type: 'POST',
url: "http://this.url-has-been-changed.net/geo/suggest?entry=951",
success: function(data){$('#advert').html('success');},
error : function(data){$('#advert').html('failed');},
complete : function(data){$('#advert').html('complete');},
dataType: "json"
});
});
all other files found to be included are stock from appmobi
Solution
Chris,
Just a couple of things to help you figure this one out.
- Make sure you reference appMobi.js and XHR.js from
http://localhost:58888/_appMobi
in order to take advantage of JavaScript API bridge commands (http://www.appmobi.com/documentation/jsAPI.html).
- Wait until the "appMobi.device.ready" event has fired before using those JavaScript API bridge commands. In your case, the XHR.js library is actually translating XMLHttp calls to native AppMobi.device.getRemoteData calls.
Try this index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<!--
<link rel="stylesheet" media="all" href="./src/global.css">
-->
</head>
<body style="background-color:white;">
<div id="header">
<div id="logo"></div>
<div id="coname">COMPANY</div>
</div>
<div id="content"></div>
<div id="footer">
<div id="advert"></div>
</div>
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/appmobi.js"></script>
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/xhr.js"></script>
<script type="text/javascript" charset="utf-8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="global.js"></script>
</body>
</html>
Along with this global.js
// This event handler is fired once the AppMobi libraries are ready
function onDeviceReady() {
//use AppMobi viewport to handle device resolution differences if you want
//AppMobi.display.useViewport(768,1024);
//hide splash screen now that our app is ready to run
AppMobi.device.hideSplashScreen();
$.ajax({
type: 'POST',
url: "http://this.url-has-been-changed.net/geo/suggest?entry=951",
success: function(data){$('#advert').html('success');},
error : function(data){$('#advert').html('failed');},
complete : function(data){$('#advert').html('complete');},
dataType: "json"
});
}
//initial event handler to detect when appMobi is ready to roll
document.addEventListener("appMobi.device.ready",onDeviceReady,false);
The XHR.js and appMobi.js libraries are provided by the wrapping application itself in order to "listen" for JavaScript calls that would require native-level functionality. For example, the AppMobi.device.getRemoteData command that would allow you to make a cross-domain data request. For convenience, the XHR.js library translates XmlHTTP calls into the AppMobi.device.getRemoteData command.
For more information on the JavaScript API, check out the documentation at:
