guys. I have a juerymobile multi-page, and I have a button in #page-index, when click it, will send a ajax request to server, and changepage to #page-column, It run will in PC, but when i deploy the multi-page in phonegap, the button click can just run only twice, code is below:
function test()
{
$.mobile.changePage('#page_column');
$.ajax({
url: "http://192.168.168.120:8090/fcmobile/getTest",
dataType: "json"
}).done(function(data) {
alert(data.content);
});
}
I found if I remove $.mobile.changePage('#page_column');, the ajax request can be run well any times. but when I add the changePage code, it only can be run twice, in third time, ajax request can't even be send. Dose anybody know reason?
AJAX is made to be asynchronous, so no need to set async to false to get it working. Use events instead.
For example:
function test () {
$.ajax({
'url': "http://192.168.168.120:8090/fcmobile/getTest",
'dataType': 'json',
'success': function (json_data) {
$(document).trigger('test_json_data_loaded');
console.log(data);
}
});
}
$(document).on('test_json_data_loaded', function () {
$.mobile.changePage('#page_column');
});
When you set async to false, you're basically making it so that every time this AJAX request is made, the user will have to wait until all the data is fully loaded before the application/website can do/execute anything else...not good.
Related
I would like to send Ajax request in launch function and based on the response to open either login window or main window.
Application.js
launch: function () {
debugger;
Ext.Ajax.request({
url: 'php/foo.php',
params: {
email: 'test#gg.com',
password: '12345',
},
success: function(response, opts){console.log('OK');},
failure: function(response, opts){console.log('ERROR');},
});
debugger;
console.log('This should be printed after Ajax response (either OK/ERROR)');
debugger;
foo.php
<?php
$login=$_POST['email'];
$pass=$_POST['password'];
$result = array();
echo json_encode(array(
"success" => $pass=="123456",
"data" => $result
));
But, I've noticed the response from the Ajax call is not ready before the function ends (Figure 1)
Ajax requests are asynchronous and in the above code example, the ajax request is submitted to the server and then the program steps to the next line of code (debugger). Any action to be performed upon a successful request needs to be done inside of the success callback function.
Since this is ExtJS, one pattern I have used, is to fire a global event, something like this:
Ext.GlobalEvents.fireEvent('applicationstart')
The main application listens for this event and that in turn opens the main application. These are other ways of doing this though.
You can do it by setting async:false to request to be synchronous, but this is not recommended.
Ex.
Ext.Ajax.request({
async: false,
url: 'php/foo.php',
params: {
email: 'test#gg.com',
password: '12345',
},
success: function(response, opts){console.log('OK');},
failure: function(response, opts){console.log('ERROR');},
});
I have the following code I am using to submit my form to a processing script. the form gets submitted but I am getting redirected to the response html from the server. I want to stay on the same page and run the callback function inside success:
the response header is sending
location:http://url-I-am-Redirected-to-and-don't-want-to-be.html
I am working with third party and have no control over the server side code I am submitting to.
$('#go').click (function () {
$.ajax ( {
type: 'POST',
data: $('#newsletter form').serialize(),
url: $('#newsletter').attr('action'),
success: function(){
$('#image_container').hide (1000,
);
}
});
}
At the end of the click block add
return false
It is working right now , but I have some feedback of user saying that the facebook popup is blocked by the browser
So what I am doing right now: I have a form that is being validated via ajax (making a call to a php page) , then if the response is successful, it ask for the user login/permissions. I assume that the popup is sometime blocked because the browser consider the ajax response not as an user action.
So my code looks like this :
$("#submit").click(function (event) {
event.preventDefault();
$.ajax({
url: url,
type: type,
data: form_data,
success: function(result){
if(result==""){
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
FB.api('/me/permissions', function (response) { ... });
} else if (response.status === 'not_authorized') {
FB.login(function (response) { ... });
}
}
}
}
});
Any idea other than putting the facebook calls before the form validation?
You can make ajax request as synchronous call. I don't like it though
btw, what kind of validation you are doing?
function bindALLFunctions() {
..all triggers functions related go here
};
$.ajax({
type: 'POST',
url: myURL,
data: { thisParamIdNo: thisIdNo },
success: function(data){
$(".incContainer").html(data);
bindALLFunctions();
},
dataType: 'html'
});
I am new to ajax and JQuery.
I have the above ajax call in my js-jquery code. bindALLFunctions(); is used to re-call all the triggers and functions after the ajax call. It works all fine and good as expected. However, I have read somewhere that is better to load something after the initial action is finished, so I have tried to add/edit the following two without any success.
Any ideas?
1) -> $(".incContainer").html(data, function(){
bindALLFunctions();
});
2) -> $(".incContainer").html(data).bindALLFunctions();
Perhaps you should have a look to the live and delegate functions. You can set a unique event handler at the beggining of your app and all your loaded ajax code will be automatically binded:
$("table").delegate("td", "hover", function(){
$(this).toggleClass("hover");
});
But if you prefer to use Jquery.ajax call you have to do something like this:
$.ajax({
type: 'POST',
url: myURL,
data: { thisParamIdNo: thisIdNo },
success: function(data){
$(".incContainer").html(data);
bindALLFunctions(".incContainer");
},
dataType: 'html'
});
and transform bindALLFunctions as:
function bindALLFunctions(selector) {
..all triggers functions related go here. Example:
$('#foo', selector).bind('click', function() {
alert('User clicked on "foo."');
});
};
that will only bind events "under" the given selector.
Your initial code was fine. The new version does not work because html() function does not have a callback function.
It's hard to tell from your question just what you intend to ask, but my guess is that you want to know about the ready function. It would let you call your bindALLFunctions after the document was available; just do $(document).ready(bindALLFunctions) or $(document).ready(function() { bindALLFunctions(); }).
i used jQuery with Ajax By this code it works fine
$.ajax({
type : 'POST',
url: 'http://localhost/msite/index.php/site/ajax',
data : catdata,
success : function (msg){
$('body').html(msg);
}
});
but i want to show the ajax-loading gif while fetching that information from database?
And , is that way secure Or i have to add some security to it?
$('body').html("<img src='spin.gif' />").fadeIn(100, function () {
$.ajax({
type: 'POST',
url: 'http://localhost/msite/index.php/site/ajax',
data: catdata,
success: function (msg) {
$('body').html(msg);
}
});
});
If you make your database query synchronous on the server then your Ajax will be spinning as long as the request is being processes, including a database query and server request/response roundtrip.
I believe you have to do this yourself within the jQuery. Create a hidden image on the page, call .show() just before calling the ajax command and be sure to call .hide() inside the complete event...
complete: function () {
$("#ticker").hide();
}
You can download a suitable image from ajaxload.info.