JQuery-Ajax not working

sabeeshcs · ‎09-07-2012

Hi,

I have an application in blackberry smart phone, which one connected to a external server and get data. I write this code using phonograph and in the index.html ( html5) I write the code for this like,

function CallService(PropertyStatus, PropertyId, searchText, callbackmethod) {

               $.ajax({
                    type: Type, //GET or POST or PUT or DELETE verb
                    url: "http://propsquare.com/new/getprojects.php?callback=" + callbackmethod, // Location of the service
                    data: { "PropertyStatus": PropertyStatus, "PropertyId": PropertyId, "searchText": searchText }, //Data sent to server
                    contentType: ContentType, // content type sent to server

                    crossDomain: true,
                    dataType: DataType,
                    processdata: ProcessData, //True or False
                    jsonp : "callback",
                    jsonpCallback: callbackmethod,
                   error: ServiceFailed,// When Service call fails
                   success: function () { alert('success'); },
                   complete: function () { alert('complete'); }


                });
            }

and this function is called from the script

I install this application in my phone and the application is load, but I did not get the data from server. I checked the response in server and the server get the request from the phone, and the

success: function () { alert('success'); },
complete: function () { alert('complete'); }

is not working. and the "callbackmethod" is not invokde. I test this in android phone and this request is working.

I modify the file config.xml and add the access tag in that file like,

Is any one have this issue.

Please advice how to continue.

chadtatro · ‎10-01-2009

Hello,

The first thing I notice is inside your ajax request...

type: Type, //GET or POST or PUT or DELETE verb

You're not specifying a request type. Instead of "Type" you should be using either GET or POST.

type: "GET",

or

type: "POST",

I would suggest that when you package the application, you enable Web Inspector. It'll allow you to remotely debug your application from the web browser, and save you quite a bit of time when troubleshooting.

To learn more about Remote Web Inspector please visit https://developer.blackberry.com/html5/documentation/web_inspector_overview_1553586_11.html

sabeeshcs · ‎09-07-2012

Hi,

Thank you for your reply.

I declare the variable out side the function like,

var Type = "Get";
var Url;
var Data;
var ContentType;
var DataType = 'jsonp';
var ProcessData = false;
var method;

My all html page is like this,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test Page 1</title>

var Type = "Get";
var Url;
var Data;
var ContentType;
var DataType = 'jsonp';
var ProcessData = false;
var method;
//Generic function to call WCF Service
function CallService(PropertyStatus, PropertyId, searchText, callbackmethod) {
$.ajax({
type: Type, //GET or POST or PUT or DELETE verb
url: "http://propsquare.wodux.com/new/getprojects.php?callback=" + callbackmethod, // Location of the service
data: { "PropertyStatus": PropertyStatus, "PropertyId": PropertyId, "searchText": searchText }, //Data sent to server
contentType: ContentType, // content type sent to server

crossDomain: true,
dataType: DataType,
processdata: ProcessData, //True or False
jsonp : "callback",
jsonpCallback: callbackmethod,

error: ServiceFailed// When Service call fails
});
}

function ServiceFailed(jqXHR, textStatus, errorThrown) {

if (xhr.responseText) {
var err = xhr.responseText;
if (err)
error(err);
else
error({ Message: "Unknown server error." })
}
return;
}

function DisplayItemDetails(result)
{
var itemDetailtemplate = new String($("#ItemDetailTemplate").html());
$.each(result, function (key, value) {
itemDetailtemplate = itemDetailtemplate.replace('#imagepath', 'http://www.mypage.in/my-midtown/common-img/midtown-small.jpg');
itemDetailtemplate = itemDetailtemplate.replace('#propertyname', value.property_name);
itemDetailtemplate = itemDetailtemplate.replace('#propertydesc', value.property_details);
$('#itemdetails').html(itemDetailtemplate);

});
}
function ListItems(result) {
$('#Ul1').empty();
if (DataType == "jsonp") {

var itemtemplate = new String($("#listItemTemplate").html());

$.each(result, function (key, value) {
itemtemplate = itemtemplate.replace('#imagepath', 'http://www.mypage.in/my-midtown/common-img/midtown-small.jpg');
itemtemplate = itemtemplate.replace('#propertyname', value.property_name);
itemtemplate = itemtemplate.replace('#propertydesc', value.property_details);

$('#Ul1').append($('<li/>', { //here appendin `<li>`
'data-role': "listview"
}).append($('<a/>', { //here appending `<a>` into `<li>`
'class': 'Navigationbtns',
'id': 'HyperLink1',
'href': '#three',
'html': itemtemplate,
'data-transition': 'slide',
'onClick': 'PropertyDetails(' + value.property_id + ')',
})));
});
$('#Ul1').listview('refresh');
}
}

</script>
</head>
<body>
<div style="width: 100%;padding-left:0.3%; padding-right:0.3%;">
<h4>HTML Page 1</h4>
<div style="width: 100%;">
  

<div data-role="page" id="one" data-theme="b">
<div data-role="content">

<input type="search" name="search-2" id="search-2" value="" data-theme="b" placeholder="Search Property: Name, Location, Type" />
<a href="#two" data-role="button" data-icon="star" data-theme="b" data-id="1" data-navigate="two" data-transition='slide'>New Projects</a>
<a href="#two" data-role="button" data-icon="star" data-theme="b" data-id="2" data-navigate="two" data-transition='slide'>Upcoming Projects</a>
<a href="#two" data-role="button" data-icon="star" data-theme="b" data-id="3" data-navigate="two" data-transition='slide'>Completed Projects</a>
</div>
</div>
<div data-role="page" id="two" data-theme="b">
<div data-role="content">
<ul data-role="listview" data-inset="true" data-filter="true" id="Ul1">

</ul>

</div>
</div>

</div>
</div>
</div>
</div>

<div id="listItemTemplate" style="visibility:hidden">
<div style="float:left">
<img src='#imagepath' width='50px' height='50px' />
</div>
<div style="float:left;margin-left:10px;">
<div >#propertyname</div>
<div style="font-size:12px">#propertydesc</div>
</div>
</div>

<div id="ItemDetailTemplate">
<table>
<tr>
<td rowspan="2"> <img src='#imagepath' width='100px' height='200px' /></td>
<td>#propertyname</td>
</tr>
<tr>

<td><div style="font-size:12px">#propertydesc</div></td>
</tr>
</table>

</div>

$("a").bind("click", function (event, ui) {
CallService($(this).data("id"), 0 ,'', 'ListItems');
});

function PropertyDetails(property_id) {
CallService(0, property_id, '', 'DisplayItemDetails');
}
</script>
</body>
</html>

Please advice how to continue.

Levion · ‎12-22-2010

I also had trouble with cross-domain callings a couple of times. I learned two thinks.

1. If you want to use $.ajax from the ripple-chrome-extension. You have to start chrome with the Paramater --disable-web-security. I created a batch like this to handle this.

start C:\Users\<username>\AppData\Local\Google\Chrome\Application\chrome.exe --disable-web-security

2. You have to set a permission to the domain in your config.xml to get this work on smartphone.

<access subdomains="true" uri="http://wodux.com/" />

This could be your problem.

sabeeshcs · ‎09-07-2012

Hi,

Thank you for your reply,

I set the access in config.xml like this,

Is this correct?

After this I re-build the application and install it in my phone, But I did not get the out put.

I add an "alert" in function

"

function ListItems(result) {
alert(result);

"

This alert is not displayed. But when I check the response in the server, then the server get the request from my phone.

Thankyou

Levion · ‎12-22-2010

Do you think it's really necessary to use jsonp? I am not sure but I solved my JSON-Call-Problems without it. I think jsonp is just needed if you want to do cross domain calls. Is your index.html local packed to your application?

Here is an example I do this job.

$.ajax({
	url: "http://example.com/profile",
	type: "GET",
	success: function (result) {
		alert("nice!");
	},
	error: function (jqXHR, textStatus, errorThrown) {
		var errortext;

		switch (jqXHR.status) {
			case 401:
				errortext = "Invalid username/password combination.";
				break;
			case 404:
				errortext = "Cannot resolve service address. Check your internet connection and make sure the latest version of this app is installed.";
				break;
			case 503:
				errortext = "The service is down for maintenance. Please try again later.";
				break;
			default:
				errortext = "The host isn't available. Check your internet connection.";
				break;
		}

		alert(jqXHR.status + ":" + errortext);
	}
});

BTW: You can use the code tags to envelope (Insert Code-Button). It's much easier to read.

sabeeshcs · ‎09-07-2012

Hi Levion,

Thank you fro your reply.

I am using Phonegap for the development and the index.html is local packed inmy application. And I need the cross domain calls.

Please advice how to contineu.

Levion · ‎12-22-2010

If your index.html is local (like in my app) it isn't really "cross domain". It's client to server. Try it in my way. I have a MVC-.NET Application in Background and it's JSON.

best regards

hrtsea · ‎07-13-2012

That is right! there is no cross-domain issue on the device if you have set a permission to the domain

sabeeshcs · ‎09-07-2012

Hi,

Thank you for your reply,

I implement the functionality using classic ajax like this

           var xmlHttp;
            var Type = "Get";
            var Url;
            var Data;
            var ContentType;
            var DataType = 'json';
            var ProcessData = false;
            var method;
            //Generic function to call WCF  Service
            function CallService(PropertyStatus, PropertyId, searchText, callbackmethod) {
               
          var params = 'PropertyStatus=' + PropertyStatus + '&PropertyId=' + PropertyId  + '&searchText=' + searchText; 
	
        var urlSync = "http://propsquare.wodux.com/new/getprojects.php";
				
	if (window.XMLHttpRequest)
	{
   	    // code for IE7+, Firefox, Chrome, Opera, Safari
	   xmlHttp=new XMLHttpRequest();	
	}
	else
	{
		// code for IE6, IE5
		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	
 	 xmlHttp.open('GET', urlSync, true);
	xmlHttp.onreadystatechange = function () {
	
 	     if(checkReadyState()){
		var response = xmlHttp.responseText;
		 if( PropertyStatus == 0 )
			DisplayItemDetails(response)
			else
			ListItems(response);
		} };
				
 	  xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
          xmlHttp.send(params);

and it is working. But I need to implement it using the JQUERY AJAX.

I am new in ajax. So please advice how can I implement it.

Welcome!

Web and WebWorks Development

JQuery-Ajax not working

Re: JQuery-Ajax not working

Re: JQuery-Ajax not working

Re: JQuery-Ajax not working

Re: JQuery-Ajax not working

Re: JQuery-Ajax not working

Re: JQuery-Ajax not working

Re: JQuery-Ajax not working

Re: JQuery-Ajax not working

Re: JQuery-Ajax not working