Ajax call fails from blackberry OS5 phonegap app - blackberry

why doesnt this ajax call doesnt work on my BB OS5 and works in BB OS6+
$("#HomePg").on('pageinit', function(event) {
$.ajax({
dataType:'json',
url: serviceURL+'linka',
error: function(xhr, status, error) {
alert("Cannot Connect to the Specified URL : "+status);
},
success: function(json) {
$.each(json, function(i, object) {
var cr = "<li id='menuList'><a id="+object.id+"
data-transition='slide' class='menuClass' ><img src=css/images
/"+object.id+".png /> <h3> "+object.menuname+" </h3></a></li>";
$("#mainMenu").append(cr);
$("ul").listview("refresh");
mainloaded = true;
});
},
timeout:60000,
retryMax: 10
});
});
....config.xml
<access subdomains="true" uri="*"/>
<rim:connection timeout="60000">
<id>TCP_WIFI</id>
<id>TCP_CELLULAR</id>
<id>BIS-B</id>
<id>MDS</id>
<id>WAP2</id>
<id>WAP</id>
</rim:connection>
.........
Am using jqm 1.1.1 version with jquery 1.7.2
this works on BB OS6+

Sorted :
Looks like BB OS5 has problem with jQuery-Ajax.. For someone who is trying the same try using XMLHttpRequest.
$("#homePg").on('pageinit', function(event) {
var url = serviceURL+'testgroups'
http.open("GET", url, true);
http.onreadystatechange = function() {//Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) {
//alert(http.responseText);
var json = JSON.parse(http.responseText);
$.each(json, function(i, object) {
var cr = "<li id='menuList'><a id="+object.id+" data-transition='slide' class='menuClass' ><img src=css/images/"+object.id+".png /> <h3> "+object.menuname+" </h3></a></li>";
$("#mainMenu").append(cr);
$("ul").listview("refresh");
$.mobile.hidePageLoadingMsg();
mainloaded = true;
});
}
}
http.send(null);
});

Related

Angular JS custom directive not working on iOS devices

I have deployed my app on Azure, I have a C# backend and AngularJS front end.
I am using a custom directive (called bgSrc) which sets the image source based on the given url (either a background-image or a src) depending on which element the directive is used.
Here is the directive:
app.directive('bgSrc', ['preloadService', function (preloadService) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.hide();
preloadService(attrs.bgSrc).then(function (url) {
if (element[0].tagName === 'DIV' || element[0].tagName === 'MD-CONTENT' || element[0].tagName === 'MAIN' || element[0].tagName === 'FORM') {
element.css({
"background-image": "url('" + url + "')"
});
element.fadeIn();
}
else if (element[0].tagName === 'IMG') {
attrs.$set('src', url);
element.css({
'display': 'block'
});
element.fadeIn();
}
});
}
};
}]);
Here is my preloadService:
app.factory('preloadService', ['$q', '$rootScope', function ($q, $rootScope) {
return function preload(url) {
var deffered = $q.defer(),
image = new Image();
image.src = url;
if (image.complete) {
deffered.resolve(image.src);
$rootScope.loading = false;
} else {
$rootScope.loading = true;
image.addEventListener('load', function () {
deffered.resolve(image.src);
$rootScope.loading = false;
});
image.addEventListener('error', function () {
deffered.reject();
$rootScope.loading = true;
});
}
return deffered.promise;
};
}]);
Here is an example of how I use it on html.
<div ng-if="!loading" bg-src="assets/build/img/ocean_bg.png">
<form name="model.form" ng-submit="login()" bg-src="assets/build/img/scroll.png">
<h1>Log In</h1>
...
</form>
</div>
It works perfectly well on Chrome and Android but keeps failing on iOS devices. I have pinpointed the issue to be my custom directive, if I remove it the page loads fine, if I include it the page is caught in an endless loop not loading my images and stick in the "$rootScope.loading" state which simply displays a circular progress bar.
Any help on the matter is much appreciated
The issue was in my preloadeService, where the loading of the image was stuck in an infinite loop.

jquery mobile $.mobile.showpageloadingmsg() is not working

I wish to show loading message during page transition in jQM and backbone. But the showPageLoadingMeassage isnt working.
Following is my code:
collection.js
findById : function(artistId, page, limit, sort) {
$.mobile.showPageLoadingMsg('a', 'Loading......', false);
var self = this;
if (limit == undefined) {
limit = 10;
}
$.mobile.showPageLoadingMsg('a', 'Loading......', false);
console.log("hello");
$.ajax({
type: "GET",
url: siteURL + 'artists/artist_detail/artist_id' + artistId + '.json',
}).done(function(msg) {
var response = JSON.parse(msg);
if (response.status == true) {
var dataArray = response.data;
console.log(dataArray);
self.reset(dataArray);
if (self.length > 0) {
$.mobile.hidePageLoadingMsg();
}
//return dataArray;
} $.mobile.showPageLoadingMsg($.mobile.pageLoadErrorMessageTheme, 'Sorry! No records found', true);
setTimeout(function() {
$.mobile.hidePageLoadingMsg();
}, 1500);
}
});
}
where am i getting wrong?
edited:
it works when for search page:
... findByTitle : function(keyword, genre, language, page, limit, sort, collection, fan, featured) {
//~ console.log(page);
var self = this;
if (limit == undefined) {
limit = 10;
}
$.mobile.showPageLoadingMsg('a', 'Searching......', false);
$.ajax({....
found the answer on stackoverflow itself- jQuery Mobile - Problems getting showPageLoadingMsg to work with pagebeforeshow or pagebeforeceate.
It says that sometimes jQM doesn't adds the ui-loading class to the body so we have to do it manually.
$('body').addClass('ui-loading');
$.mobile.showPageLoadingMsg('a', 'Searching......', false);
and while hiding the loading msg:
setTimeout(function() {
$('body').removeClass('ui-loading'); //remove class
$.mobile.hidePageLoadingMsg();
}, 1000);
This function was also deprecated and in the current versions is not at all.

dataTable refresh on ajax success

I have the data table from the jquery plugin dataTables (http://datatables.net/) that I want to refresh upon ajax success. I tried the following code but its not working. Any help will be appreciated
$(document).ready(function() {
oTable = $('#mytable').dataTable();
var fa = 0;
$('#submit tbody td ').click(function() {
var gCard = $('#mytable tbody').delegate("tr", "click", rowClick);
});
function rowClick() {
fa = this;
var id = $("td:eq(1)", this).text();
cardNumber = $.trim(id);
$.ajax({
url : 'myurltopostto',
type : 'POST',
data : {
id : id
},
success : function(data) {
oTable.fnDraw(); //wanted to update here
},
error : function() {
console.log('error');
}
});
}
});
You can use : fnDeleteRow which will take care of refreshing the table html and data internally, look up API details here:
http://datatables.net/ref
oTable.fnDeleteRow( fa );
hello my dears programers... sorry... my inglish is very bad but I help you... my following is this:
<script type="text/javascript">
function Ajax()
{
var
$http,
$self = arguments.callee;
if (window.XMLHttpRequest) {
$http = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
$http = new ActiveXObject('Msxml2.XMLHTTP');
} catch(e) {
$http = new ActiveXObject('Microsoft.XMLHTTP');
}
}
if ($http) {
$http.onreadystatechange = function()
{
if (/4|^complete$/.test($http.readyState)) {
document.getElementById('ReloadThis').innerHTML = $http.responseText;
setTimeout(function(){$self();}, 10000);
$( this ).hide( "slow" );
}
};
$http.open('GET', 'cls_Noticias/last_noticias.php', true);
$http.send(null);
}
}
</script>
</head>
<body>
<script type="text/javascript">
setTimeout(function() {Ajax();}, 10000);
</script>
<div id="ReloadThis">Espere a que la pagina se actualice!</div>
</body>
good life!

Jquery UI autocomplete IE 7 issue

I am using jquery UI autocomplete. It works in all other browsers FF, Chrome etc except IE7. Works for higher versions of IE as well but IE7 gives the below error:
SCRIPT3: Member not found.
jquery.min.js, line 2 character 30636
This is my function:
$('input.autocomplete').each( function() {
var $input = $(this);
// Set-up the autocomplete widget.
var serverUrl = $input.data('url');
$(this).autocomplete({
source: function( request, response ) {
var countrySelect = $("#countrySelect").val();
if($input.attr('id') == 'searchJobPostalCode'){
countrySelect = $("#searchJobCountrySelect").val();
}else if($input.attr('id') == 'searchPeoplePostalCode'){
countrySelect = $("#searchUserCountrySelect").val();
}
$.ajax({
url: serverUrl,
dataType: "json",
data: {
term: request.term,
countrySelect: countrySelect
},
success: function( data ) {
$input.removeClass( "ui-autocomplete-loading" );
response( $.map( data, function( item ) {
if(typeof item.companyName != 'undefined'){
return {
label: item.companyName,
value: item.companyName,
id: item.companyID
}
}
if(typeof item.locationId != 'undefined'){
return {
label: item.postalCode +','+item.placeName+','+item.adminName1+','+item.countryCode,
value: item.postalCode +','+item.placeName+','+item.adminName1+','+item.countryCode,
postalCode: item.postalCode,
city: item.placeName,
state: item.adminName1,
country: item.countryCode
}
}
//to show user alias autocomplete on compose message
if(typeof item.userAlias != 'undefined'){
var label1 = item.userAlias;
if(typeof item.city != 'undefined'){
label1 = label1+','+item.city;
}
if(typeof item.state != 'undefined'){
label1 = label1+','+item.state;
}
if(typeof item.country != 'undefined'){
label1 = label1+','+item.country;
}
return {
label: item.userAlias,
userAlias: item.userAlias
}
}
}));
}
});
},
minLength: 3,cacheLength:0,keyDelay:900,
select: function( event, ui ) {
$("#companyId").val(ui.item.id);
if(typeof ui.item.userAlias != 'undefined'){
$(".toUser").val(ui.item.userAlias);
}
if(typeof ui.item.postalCode != 'undefined'){
$("#postalCode").val(ui.item.postalCode);
$("#city").val(ui.item.city);
$("#state").val(ui.item.state);
$("#country").val(ui.item.country);
if($input.attr('id') == 'searchJobPostalCode'){
$("#searchPostalCodeJobsSearch").val(ui.item.postalCode);
$("#searchCityJobsSearch").val(ui.item.city);
$("#searchStateJobsSearch").val(ui.item.state);
$("#searchCountryJobsSearch").val(ui.item.country);
}else if($input.attr('id') == 'searchPeoplePostalCode'){
$("#searchPostalCodePeople").val(ui.item.postalCode);
$("#searchCityPeople").val(ui.item.city);
$("#searchStatePeople").val(ui.item.state);
$("#searchCountryPeople").val(ui.item.country);
}
}
},
change: function( event, ui ) {
if($(this).attr('id') !='companyName'){
if ( ui.item == null) {
valid = false;
}else{
valid = true;
}
if ( !valid ) {
// remove invalid value, as it didn't match anything
$( this ).val( "" );
select.val( "" );
input.data( "autocomplete" ).term = "";
return false;
}
}
},
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
$( this ).removeClass( "ui-autocomplete-loading" );
}
});
});
I tried to debug and it errors out at line : $(this).autocomplete({
Any idea? Thanks in advance
Looks like the problem is with my OS. I had installed Windows 8 consumer preview and was running IE using dev tools in IE7 compatibility. It works in windows 7. thanks.
My guess is that one of the scripts is not loading properly. This happened to me once, with jquery and IE 7. Here's how I solved the issue:
In the HTML, BEFORE all of your script tags, add this:
<script type="text/javascript"></script><!--this is here because of an IE bug-->
When I included that line before my tag for jquery.min.js, the problem went away.
IE7 is a frustration.
I resolved with change ui version. Now I use 1.9.1.custom.min.js (before was jquery UI 1.8) and it work with IE7 compatibility. I use jquery v1.7.2

jQuery Dialog leaving page on getScript() call

I have the following jQueryUI Dialog element.. I'm trying to make an AJAX call to populate the form when it launches.. I'm also using Ajax to load the actual form..
Problem happens when the populateForm method is invoked..
The Dialog disappears and the browser leaves my page when the $.getScript method is invoked..
any ideas?
I'm stuck!
DIALOG
$('#highValueSurvey').dialog({
autoOpen: false,
modal: true,
width: 900,
resizable: false,
open: function(event, ui) {
$("#highValueSurvey").load('/longstoryshort/forms/high.html');
$("#highValueSurvey").dialog('option', 'position', 'center');
populateForm('#FY12-Q1-AM-ALL-ECMC-VML-ProfilingForm');
},
buttons: {
'Submit': function() {
var path = $(this).data('link').href; // Get the stored result
doAjaxPost('#FY12-Q1-AM-ALL-ECMC-VML-ProfilingForm');
setCookie(highValueCookieName, -1, 1000);
window.location.href = path;
}
}
});
CLICK EVENT
$("a.clickHighValueAsset").click(function(e) {
cookie_value = getCookie(highValueCookieName);
if (cookie_value != -1) {
e.preventDefault();
e.stopImmediatePropagation();
$("#highValueSurvey")
.data('link', this)// bind the url from the HREF to the dialog UI for redirect later
.dialog('open');
}
else {
return true;
}
});
POPULATE METHOD
function populateForm(formName) {
if (typeof eMail != 'undefined') {
elqServlet = window.location.protocol + '//' + window.location.host + '/longstoryshort/forms/lookup.jsp?email=';
$.getScript(elqServlet + eMail, function() {
$(':input', '#' + formName).each(function() {
var field = '#' + this.name + '';
$(field).val(GetElqContentPersonalizationValue(this.name));
});
});
}
}
Wrap the populateForm() which is async.. And then call the window.href redirect within it's success callback!
Example:
'Submit': function() {
$.ajax({
type: "POST",
async: true,
url: $("#FY12-Q1-AM-ALL-ECMC-VML-ProfilingForm").attr('action'),
data: $("#FY12-Q1-AM-ALL-ECMC-VML-ProfilingForm").serialize()
});
setCookie(highValueCookieName, -1, 1000);
$(":button:contains('Submit')").hide();
$("#highValueSurvey").load('/longstoryshort/forms/confirmation.html');
$("#highValueSurvey").dialog({
close: function() {
var path = $(this).data('link').href; // Get the stored result
window.location.href = path;
}
});
}

Resources