My page not showing a gif image while page in ajax request. Its a registration page and while clicking on submit button it should show a spin image and it should disapper after a success
this is my ajax code
$("#register-form").on("submit", function() {
var uname = $('#username').val();
var phone = $('#phone').val();
var mail = $('#email').val();
// $(".loader").show();
$.ajax({
type : "POST",
url : "registerUser",
secureuri : false,
cache : false,
async : false,
data : {
"username" : uname,
"phone" : phone,
"email" : mail
},
success : function(response) {
$(".status").fadeIn("slow");
$(".loader").hide();
$(".status").html(response);
if (response == "Please check your mail to verify account") {
$(".status").css({
"border" : "1px solid green",
"background-color" : "#B2D47F"
});
}
},
error : function() {
alert("error occured");
}
});
return false;
});
here I am binding ajaxstart
$(document).ajaxStart(function() {
$(".loader").show();
});
but it is not showing.. is anything wrong in my code?
Try adding beforeSend and complete handlers to your ajax call, and show/hide the loader in it. This will also work in case of error, because if you are hiding the loader in success handler and error happens, it will stay visible after ajax is completed.
$.ajax({
type : "POST",
url : "registerUser",
secureuri : false,
cache : false,
async : false,
data : {
"username" : uname,
"phone" : phone,
"email" : mail
},
beforeSend : function() {
$(".loader").show();
},
success : function(response) {
...
},
error : function() {
alert("error occured");
},
complete : function() {
$(".loader").hide();
},
});
Related
Trying to display json data from PHP into a jQuery datatable, I get an error.
This is my code:
function fetchProjectTable()
{
$.ajax({
url: Domain+"/include/process.php",
method: "POST",
data: { getProjectResult: 1 },
success : function(data)
{
//var o = JSON.parse(JSON.stringify(data));
//var o = JSON.parse(data);
$('#project_table').dataTable({
data : data,
columns: [
{"data" : "id"},
{"data" : "p_name"},
{"data" : "p_amount"}
],
});
//console.log(o);
/*alert(o);
console.log(o);*/
}
});
I want to implement a progress bar dialog in thymeleaf bootstrap with spring boot website.
Scenario: when I click on submit button for file uploading, the progress bar should display and go off when file uploading is completed.
I implemented this ajax call but it's not working:
$.ajax({
type: 'POST',
data: { value : value },
url : 'result',
beforeSend : function() {
$("#progressbarloader").show();
},
complete : function() {
$("#progressbarloader").hide();
},
success : function(data) {
console.log('success');
}
});
There is a trick
I suppose that you are using bootstrap Progress bar
you can use a js thread in jquery where you change values of displayed progress
Here is a psoeudo code to help you
process = true;
$.ajax({
type: 'POST',
data: { value : value },
url : 'result',
beforeSend : function() {
$("#progressbarloader").show();
value = 0;
finalValue = 100;
while(process){
// create new thread with timeout 700 ms
// thread function
// value = value + (finalValue-value)/4;
// change progress bar value using jquery
}
},
complete : function() {
$("#progressbarloader").hide();
},
success : function(data) {
console.log('success');
value = 0;
process = false;
}
});
I am trying to implement custom form validation rules for my username field, which should check the database for duplicated or not.
After Searching on the internet, I had write out some code, and it successful getting the response "true / false" from my server. But the fields in the form doesn't update as it should. Below was my javascript code.
$.fn.form.settings.rules.checkUsername = function(value) {
var res = true;
$.ajax({
async : false,
url: '<?= Yii::app()->createAbsoluteUrl('home/doCheckUsername') ?>',
type : "POST",
data : {
username : value
},
dataType: "json",
success: function(data) {
if (data.result == true) {
console.log(data.result);
return false;
} else {
console.log(data.result);
return true;
}
}
});
};
$('.ui.form').form({
username: {
identifier : 'username',
rules: [{
type : 'checkUsername',
prompt : 'Username Already Exists'
}]
}
// some other rules
}, {
inline : true,
on : 'blur',
onSuccess : function(){
//post to controller
}
});
The console.log showing me the correct result as I want, but I keep getting "Username Is Exist" as show at the picture
Semantic UI form Validation result
May I know where are the place I doing it wrong ?
Somehow, Added Async at the ajax solve the problem.
$.ajax({
async : false,
url: '<?= Yii::app()->createAbsoluteUrl('home/doCheckUsername') ?>',
type : "POST",
async: false,
data : {
username : value
},
dataType: "json",
success: function(data) {
if (data.result == true) {
console.log(data.result);
res = false;
}
}
});
Put result in the res variable and return the res variable after the ajax call !
Work for me :
$.fn.form.settings.rules.checkemail = function(value) {
var res = true;
$.ajax({
async : false,
url: '../php/email_exist.php',
type : "POST",
async: false,
data : {
email : value
},
success: function(data) {
console.log(data);
if (data == "0") {
console.log("OK");
res = true;
} else {
console.log("KO");
res = false;
}
}
});
return res;
};
$.fn.form.settings.rules.checkUsername = function(value) {
var res = true;
$.ajax({
async : false,
url: '<?= Yii::app()->createAbsoluteUrl('home/doCheckUsername') ?>',
type : "POST",
data : {
username : value
},
dataType: "json",
success: function(data) {
if (data.result == true) {
//console.log(data.result);
//return false;
**value = 0;**
} else {
//console.log(data.result);
//return true;
**value = 1;**
}
}
});
**return (value == 1 )? true : false;**
};
$('.ui.form').form({
username: {
identifier : 'username',
rules: [{
type : '**checkUsername[value]**',
prompt : 'Username Already Exists'
}]
}
// some other rules
}, {
inline : true,
on : 'blur',
onSuccess : function(){
//post to controller
}
});
$.fn.form.settings.rules["checkUsername"] = function(value) {
var url = "/Index/checkUsername";
var res = true;
$.ajax({
async : false,
url : url,
type : "POST",
data : {
username : value
},
dataType: "json",
success: function(data){
if(data['code']==1){
res = false;
}else {
res = true;
}
console.log(res);
return res;
}
});
};
var validation = {
username : {
identifier : 'username',
rules : [
{ type : 'empty', prompt : 'Please enter your email' },
{ type : 'checkUsername', prompt : 'Username already existed' }
]
}
};
It did not work, but the console log is right.
I am using similar kind of validation but not doing an ajax call.
Curious: Can you put a logging statement just after the ajax call and see if the validation rule is returning before the ajax call?
I would also consider putting the return statement below the ajax call (still inside of the validation function)
How to pass extra data to an ajax success event?
var extra_data = 'some data';
var a = {
type : 'post',
async : true,
cache : false,
dataType : 'json',
timeout : 15000,
contentType : 'application/x-www-form-urlencoded;charset=UTF-8',
global : true,
url : url,
success : [
function(response, textStatus, jqXHR, extra_data){
}
]
};
You can just declare extra_data as a global variable if i remember (without var before) and you can use it inside the scope of the success method, and you don't need to pass it through methods arguments
extra_data = 'some data';
var a = {
type : 'post',
async : true,
cache : false,
dataType : 'json',
timeout : 15000,
contentType : 'application/x-www-form-urlencoded;charset=UTF-8',
global : true,
url : url,
success : [
function(response, textStatus, jqXHR){
console.log(extra_data); //for example
}
]
};