Develop Reference

Phonegap: Received JSON data fails to display

I'm trying to code a dynamic phonegap app that retrieves and format information from a live database.
I use jsonp to get data from a php service I coded.
$(document).ready(function(){
var output = $('#output');
$.ajax({
url: 'http://example.com/service.php',
dataType: 'jsonp',
jsonp: 'jsoncallback',
timeout: 5000,
success: function(data, status){
//data loaded
$.each(data, function(c,comp){
window.alert(comp.filter); // I added this just to check I was getting data correctly.
var company = '<div class="project-post ' +comp.filter+ ' ">'
+'<img src=" ' +comp.img+ ' ">'
+'<div class="hover-box">'
+'<div class="project-title">'
+'<div><i class="fa fa-arrow-right"></i></div>'
+'</div></div></div>';
output.append(company);
});
},
error: function(){
//error loading data
output.text('Error loading data.');
}
});
});
My console doesn't display any errors, I've been trying to solve this for a long time. I have this in my config:
<access origin="*" />
Also I confirmed I was receiving data with window.alert(comp.filter); It's just not displaying at all, maybe something's wrong with my formatting but can't figure out what it is.

I think the issue because of dom formating, the img tag is not closed correctly it should be like:
var company = '<div class="project-post ' +comp.filter+ ' ">' +'<img src=" ' +comp.img+ ' "/>' +'<div class="hover-box">' +'<div class="project-title">' +'<div><i class="fa fa-arrow-right"></i></div>' +'</div></div></div>';
Also take care of your access policy to allow all urls, update your config.xml file with the following code:
<access origin="*" />

Ajax inserts works with browsers but not with phonegap emulator (android)

I am developing an app with phonegap(cordova) version 3.2 and I am having problems with mysql insertion. The following codes works well in browsers (mobile or not) but, when I run the app with an android emulator or in a real device it doesn't work.
The scripts:
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<script type="text/javascript">
$(document).ready(function(e) {
$("#formCadastro").submit(function(){
var campoNome = new String(document.getElementById("txtNome").value);
var campoEmail = new String(document.getElementById("txtEmail").value);
var campoUsuario = new String(document.getElementById("txtUsuario").value);
var campoSenha = new String(document.getElementById("txtSenha").value);
var campoSenhaConf = new String(document.getElementById("txtSenhaConf").value);
$.ajax({
type: "POST",
url: "http://imagect.co.nf/cadastra.php",
crossDomain: true,
data: { nome: campoNome , email: campoEmail, usuario: campoUsuario, senha: campoSenha}
})
.done(function( msg ) {
alert( "Data Saved: " + msg );
window.location="index.html";
})
.fail(function(jqXHR, msg) {
alert( "Errooo:" + msg );
alert( "Errooo:" + jqXHR );
console.log("Erro chato:" + msg);
console.log(jqXHR + " " + msg);
});
});
});
</script>
The problem is that neither the fail function nor the success function happens. It seems that android ignores the ajax...
I have already tried using deviceready, pageinit, mobileinit etc. But nothing works well.
The manifest has the internet permission and the config.xml has the access origin = *.
Could someone please help me?
Thanks, sorry about my English.

Android- Sharing local storage on multiple WebViews/Windows

I'm developping a mobile application, which should connect to a web server. The application is written with jQM and simply imported in an android web view. I tried to solve this problem using the jStorage plugin, but it seems that it's impossible to share the local storage between the different pages. So I tried to implement this, but it does not work and continues sending null.
Here are my code samples:
Javascript:
function getToken(authCode) {
var jsonUrl = mainUrl + "/auth/authorizeToken?grant_type=authorization_code&client_id=bc89fb879a64eb8e422b94d5c39&client_secret=b5c2974b78f7f3f7aee2bed182&redirect_uri=redirection&code="+authCode;
$.ajax({
url: jsonUrl,
type: "GET",
dataType: "jsonp",
success: function(data) {
localStorage.setItem( "access_token", data.access_token);
localStorage.setItem( "refresh_token", data.refresh_token);
localStorage.setItem( "logged", "true");
}
});
}
function valTokens() {
access_token = localStorage.getItem("access_token");
refresh_token = localStorage.getItem("refresh_token");
}
After that the values are set to null. The .java files are the same as in the sample from the link given.

Android Browser Issue with jQuery Ajax and when appcache is used

we are having a problem with the built in browser on Android 4.0, 4.1 and 4.2 (we haven't got anything lower to test on).
The problem is that the ajax call will work perfectly on first load, you can press the run Ajax button as many times as you like and it will be fine. You can disconnect from the internet and it will work properly.
But if you exit (FULLY, make sure its not just running in the background) the browser then relaunch it, it will fail on load and on button press. It doesn't matter if you are on-line or off-line.
The error that is been returned from the ajax call is "Error" with status = 0 and readyState = 0.
When its successful you get a message back says "respose from Ajax Call" with a status = 200 and a readyState = 4.
The code works find on every other browser we have tested on Android Chrome, Firefox and Opera. on IOS 5 and 6 it works and every desktop browser we can find.
Is there something that I missing or have we found a bug in the built in browser. Any help on this would be appreciate especially if it just something stupid I have done.
We have created a test script that demonstrates this problem well I have attached it to the bottom of this message.
Thanks
Tim
test.php
<?php
function displayPage() {
?>
<!DOCTYPE html>
<html manifest="test.manifest" debug="true">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" >
<title>test</title>
<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script type="text/javascript">
function runAjaxGet() {
var XMLHttpRequest = $.ajax({
url: "test.php",
dataType: "json",
data: "test=test",
traditional: "true",
success: function( responseData ) {
alert('good\n responseData: '+responseData+ '\n res:' + XMLHttpRequest.responseText +'\n readyState: '+ XMLHttpRequest.readyState + '\n Status: '+XMLHttpRequest.status );
console.log(XMLHttpRequest);
},
error: function (xhr, ajaxOptions, thrownError, responseData) {
alert('bad\n responseData: '+responseData+ '\n res:' + XMLHttpRequest.responseText +'\n readyState: '+ XMLHttpRequest.readyState + '\n Status: '+XMLHttpRequest.status);
console.log(XMLHttpRequest);
}
});
}
$(document).ready(function() {
runAjaxGet();
});
</script>
</head>
<body>
<button Name="Run Ajax" onclick="runAjaxGet();">Run Ajax</button>
</body>
</html>
<?php
}
function processRequests() {
header("Content-Type: application/json; charset=UTF-8" );
echo (json_encode("respose from Ajax Call"));
}
date_default_timezone_set ( "UTC" );
if (isset($_REQUEST['test'])) {
$which = $_REQUEST['test'];
} else {
$which = '';
}
switch ($which) {
case "test":
processRequests();
break;
default :
displayPage();
break;
}
?>
test.manifest
CACHE MANIFEST
test.php
jquery-1.9.0.min.js
test.php?test=test

Just add NETWORK section with asterisk and it will work
CACHE MANIFEST
test.php
jquery-1.9.0.min.js
test.php?test=test
NETWORK:
*

I hit this same problem and determined that when retrieved from the cache, 0 indicates success. This is likely because there is no actual http request involved since the request is resolved entirely locally.
Appcache manifest file:
CACHE MANIFEST
CACHE:
/config
Javascript:
var request = new XMLHttpRequest();
request.open('GET', '/config', false); // async=false is ok because this file will always come from AppCache
request.send(null);
// Older versions of android return 0 when ajax request retrieved from appcache
if (request.status == 200 || request.status == 0) {
return JSON.parse(request.responseText);
} else {
console.log("ERROR: config not retrievable");
throw "Attempt to retrieve config return http status " + request.status;
}

how do i call a webservice using phonegap for android

How do I make a webservice call from my phonegap app? I found two javascript libraries one from IBM and another IvanWebService http://wiki.phonegap.com/w/page/43725416/SOAP%20Web%20Service that allow you to make such calls but i couldnt get them to run any of my webservices. I am passing in a wsdl link as the service link and i have updated the envelope parameters, still nothing.

If it were me, I would use jQuery.
http://www.bennadel.com/blog/1853-Posting-XML-SOAP-Requests-With-jQuery.htm
http://openlandscape.net/2009/09/25/call-soap-xm-web-services-with-jquery-ajax/
http://weblogs.asp.net/jan/archive/2009/04/09/calling-the-sharepoint-web-services-with-jquery.aspx

<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
<script type="text/javascript">
$(function() {
$("#requestXML").click(function() {
$.ajax({
type: "POST",
url: "http://YOURSITE/script.php",
data: "{}",
cache: false,
dataType: "xml",
success: onSuccess
});
});
$("#resultLog").ajaxError(function(event, request, settings, exception) {
$("#resultLog").html("Error Calling: " + settings.url + "<br />HTTP Code: " + request.status);
});
function onSuccess(data)
{ alert(data);
}
});
</script>
</head>
Button to call the above method:
<input id="requestXML" type="button" value="Request XML" />