Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
New Developer
sabeeshcs
Posts: 10
Registered: ‎09-07-2012
My Device: 8520
My Carrier: Airtel

JQuery-Ajax not working

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

 

    <script type="text/javascript" language="javascript">

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

        function PropertyDetails(property_id) {
            CallService(0, property_id, '', 'DisplayItemDetails');
        }
        </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,

 

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

 

Is any one have this issue.

Please advice how to continue.

 

 

Please use plain text.
BlackBerry Development Advisor
chadtatro
Posts: 614
Registered: ‎10-01-2009
My Device: Z10
My Carrier: Bell

Re: JQuery-Ajax not working

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 

Chad Tetreault | App Development Consultant | BlackBerry Developer Relations | developer.blackberry.com | @chadtatro
Please use plain text.
New Developer
sabeeshcs
Posts: 10
Registered: ‎09-07-2012
My Device: 8520
My Carrier: Airtel

Re: JQuery-Ajax not working

[ Edited ]

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>


<link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
<script src="scripts/jquery-1.7.1.min.js"></script>
<script src="scripts/jquery.mobile-1.1.1.min.js"></script>


<script type="text/javascript" language="javascript">


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%;">
&nbsp;&nbsp;

<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 data-role="page" id="three" data-theme="b">
<div data-role="content">
<div id="itemdetails"></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>

<script type="text/javascript" language="javascript">

$("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.

 

 

Please use plain text.
Developer
Levion
Posts: 137
Registered: ‎12-22-2010
My Device: Curve 8520
My Carrier: Software Developer

Re: JQuery-Ajax not working

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.

Please use plain text.
New Developer
sabeeshcs
Posts: 10
Registered: ‎09-07-2012
My Device: 8520
My Carrier: Airtel

Re: JQuery-Ajax not working

Hi,

Thank you for your reply,

 

I set the access in config.xml like this,

 

<access uri="http://wodux.com/" subdomains="true">
<feature id="blackberry.pim.Memo"/>
<feature id="blackberry.invoke.MemoArguments"/>
</access>

 

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

Please use plain text.
Developer
Levion
Posts: 137
Registered: ‎12-22-2010
My Device: Curve 8520
My Carrier: Software Developer

Re: JQuery-Ajax not working

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.

 

 

Please use plain text.
New Developer
sabeeshcs
Posts: 10
Registered: ‎09-07-2012
My Device: 8520
My Carrier: Airtel

Re: JQuery-Ajax not working

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.

 

 

Please use plain text.
Developer
Levion
Posts: 137
Registered: ‎12-22-2010
My Device: Curve 8520
My Carrier: Software Developer

Re: JQuery-Ajax not working

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

Please use plain text.
New Contributor
hrtsea
Posts: 5
Registered: ‎07-13-2012
My Device: BB10
My Carrier: 13843160392

Re: JQuery-Ajax not working

That is right! there is no cross-domain issue on the device if you have set a permission to the domain
Please use plain text.
New Developer
sabeeshcs
Posts: 10
Registered: ‎09-07-2012
My Device: 8520
My Carrier: Airtel

Re: JQuery-Ajax not working

[ Edited ]

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.

 

 

Please use plain text.