I'm loading data to my application using an async AJAX call. This call takes some time as the server is very slow. Loading the application on the desktop or a phone as a web site shows the expected behaviour: Page loaded - some delay - site update with loaded data. Executing the page using phonegap is showing the splash screen, than a black screen and after a very long time (the time for executing the ajax call) the normal screen. I assume there's any reason that Phonegap is waiting for the call to be finished before displaying the content. Can this be prevent/configured?
Code sample:
function connect(){
var username = window.localStorage.getItem( 'username' );
var password = window.localStorage.getItem( 'password' );
if(username!=null&&password!=null){
jQuery.ajax({
async: true,
type : "GET",
dataType: 'json',
url : loginURL,
success : function(data) {
token=data.token;
connected=true;
oSettingsTile.setInfo("Connected");
oSettingsTile.setInfoState(sap.ui.core.ValueState.Success);
var oFeedModel=new sap.ui.model.json.JSONModel();
jQuery.ajax({
type : "GET",
url : feedURL,
dataType : "json",
async: true,
success : function(data,textStatus, jqXHR) {
oFeedModel.setData(data);
oFeedTile.setInfoState(sap.ui.core.ValueState.None);
oFeedTile.setNumber(oFeedModel.getProperty("/list/length"));
},
error : function(err){
oFeedTile.setInfo("Error loading");
oFeedTile.setInfoState(sap.ui.core.ValueState.Error);
}
});
var oGroupModel=new sap.ui.model.json.JSONModel();
jQuery.ajax({
type : "GET",
url : groupURL,
dataType : "json",
async: true,
success : function(data,textStatus, jqXHR) {
oGroupModel.setData(data);
oGroupTile.setInfoState(sap.ui.core.ValueState.None);
oGroupTile.setNumber(oGroupModel.getProperty("/list/length"));
},
error : function(err){
oGroupTile.setInfo("Error loading");
oGroupTile.setInfoState(sap.ui.core.ValueState.Error);
}
});
feedView.setModel(oFeedModel);
feedDetailView.setModel(oFeedModel);
groupView.setModel(oGroupModel);
groupDetailView.setModel(oGroupModel);
},
error : function(err,status,errT){
token="";
oGroupTile.setNumber(0);
oFeedTile.setNumber(0);
connected=false;
oSettingsTile.setInfo("Error");
oSettingsTile.setInfo(sap.ui.core.ValueState.Error);
}
});
}
}
you may think, that page is being loaded while splashscreen is on, but its not. Whole html/css/js is loaded after splashscreen is gone, thus if you have slow server, it will last some time until you see the content.
Related
I am trying to write on my firebase real time database through https triggered function with Admin SDK, When a button (id=change) is clicked.
This is is the ajax get method in client side code
$('#change').click(function(){
$.ajax({
url: 'https://<CLOUD FUNCTION URL>/verifyuser?uid='+user.uid,
type: "GET",
cache: false,
dataType: "text",
crossDomain: true,
success : function(result){console.log(result);},
error : function(error){console.log(error);}
});
});
Given below is my firebase cloud function which triggers on http request.
const functions = require('firebase-functions');
const admin=require('firebase-admin');
admin.initializeApp(functions.config().firebase);
const cors=require('cors')({origin: true});
exports.verifyuser = functions.https.onRequest((req, res) => {
cors(req, res, () => {
const uid=req.query.uid;
admin.database.ref('/tathva17/users/'+uid+'/hospitality').set(
{'status':'confirmed'}).then(function(){
res.status(200).send("Success!");
});
});
});
Error shown in my console after clicking button (id="change")
error seen in Logs
Try using ajax like this, as a cross domain access, you need to set dataType as jsonp
$.ajax({
url: 'https://<CLOUD FUNCTION URL>/verifyuser?uid='+user.uid,
type: "GET",
cache: false,
dataType: "jsonp",
success : function(result){console.log(result);},
error : function(error){console.log(error);}
});
I am trying a make a cross domain AJAX call. It works in Chrome and Firefox but not in IE11. IE11 seems to drop the AJAX call. IE11 Developer Tools Network reveals that a request is not even made to the url. Here is snippet of code I have.
$(function() {
var url = "https://example.com?abc=xyz";
$.ajax({
type : "GET",
contentType : "text/plain",
url : url + "&callback=?",
dataType : 'jsonp',
xhrFields : {
withCredentials : false
},
headers : {},
success : function() {
console.log("success");
},
error : function() {
console.log("error");
},
complete : function() {
console.log("complete");
}
});
});
$.ajax({
type : "GET",
cache: false,
or before ajax call
$.ajaxSetup({ cache: false });
$.ajax({
type : "GET",
I referred this link, but with no luck. When I use the following link in the address bar, the browser shows json data.
http://xxxx.xxx.com:1234/products.json // Only a sample link
But when I try the following code,
$.ajax({
url : 'http://xxxx.xxx.com:1234/products.json',
dataType: 'json',
async: false,
success: function(data) {
alert( "test" );
},
error : function() {
alert("Sorry, The requested property could not be found.");
}
});
It always shows the error message. What is wrong in my method?
I'm debugging my JavaScript code that runs well in most browsers so far... but Chrome keeps refusing my Ajax.Request at the moment. Please have a look at the following code:
var base = document.location.pathname.substr(0, document.location.pathname.indexOf('/',1));
new Ajax.Request(base + '/status.json', {
method : 'get',
dataType : 'json',
contentType : 'application/json',
onSuccess : function(res) {
updateProgressBar(res.responseJSON);
},
onFailure : function(res) {
console.error("ProgressBar AJAX failed!");
},
onCreate : function(res) {
console.error("ProgressBar AJAX onCreate!");
},
onUninitialized : function(res) {
console.error("ProgressBar AJAX onUninitialized!");
},
onLoading : function(res) {
console.error("ProgressBar AJAX onLoading!");
},
onLoaded : function(res) {
console.error("ProgressBar AJAX onLoaded!");
},
onInteractive : function(res) {
console.error("ProgressBar AJAX onInteractive!");
},
on200 : function(res) {
console.error("ProgressBar AJAX on200!");
},
onComplete : function(res) {
console.error("ProgressBar AJAX onComplete!");
}
});
All those onSomethings have been added for debugging... I normally need onSuccess only. But that is never called by Chrome at the moment. It only fires the following events:
onCreate
onLoading
That's it. No onLoaded or anything else.
Is this a known bug of this version? We use RichFaces v3.3.3.Final which comes with ProtoType. If this simply won't work I'll code my own AJAX Request for Chrome... but I want to make sure that I've not made a simple mistake first. Thanks.
PS: I saw Prototype's Ajax.Request not working in Chrome which is rather old... so I started a new topic.
I'm pretty sure prototype does not have the dataType attribute, try removing that and check again.
Here are the default prototype AJAX options
this.options = {
method: 'post',
asynchronous: true,
contentType: 'application/x-www-form-urlencoded',
encoding: 'UTF-8',
parameters: '',
evalJSON: true,
evalJS: true
};
What happens when we create setTimeout or Ajax call?
I have a problem with invoking autoplay in HTML5 player on iPad.
If I call thing like that:
function playItem()
{
var playerArea = $('#playerArea');
var flowplayerAjdi = getFlowplayerId();
playerArea.empty();
playerArea.append(createQualityChooserHTML()+'');
clipProperties.url = 'http://192.168.100.107:1935/ia/live/playlist.m3u8';
playLiveFlowplayer(flowplayerAjdi, getWowzaUrl('ia'), '', '', true, true);
}
everything works fine. But you can see that url is hardcoded - it has to be assigned by ajax call. So here is what I did:
function playItem()
{
$.ajax({
url : 'playVODServlet',
type : 'GET',
data : JSON.stringify(playItemParams),
timeout : 5000,
dataType : "json",
error : function(xhr, ajaxOptions, thrownError)
{
console.error("Error");
},
success : function(searchResult)
{
var playerArea = $('#playerArea');
var flowplayerAjdi = getFlowplayerId();
playerArea.empty();
playerArea.append(createQualityChooserHTML()+'');
clipProperties.url = searchResult.assetId;
playLiveFlowplayer(flowplayerAjdi, getWowzaUrl('ia'), '', '', true, true);
}
});
}
An how autostart doesn't work. So my question is: what could be the problem? It looks it is related with ajax call breaks normally code execution and creates error and success function. Same thing happens if I put player constructor to setTimeout.
Phones & tablets do not allow you to autoplay audio/video. This is precaution so the user doesn't get a hefty bill because your application automatically streamed video/audio.
You could try triggering a click event on the player once your page has loaded, but I doubt it'll work.