showing loader image with submition using ajax

showing loader image with submition using ajax - javascript

$(document).ready(function(){
$('#registration_form').on('submit',function(e){
/// e.preventDefault();
$("#loading").show();
var email = $('#email').val();
var checkEmail = $("#email").val().indexOf('#');
var checkEmailDot = $("#email").val().indexOf('.');
if(email == ''){
$("#email").addClass('error');
error_flag = 1;
}
if(checkEmail<3 || checkEmailDot<9){
$("#email").addClass('error');
error_flag = 1;
}
$.ajax({
url: "<?=base_url('controller/registration_ajax')?>",
// url: "<?=base_url('controller/register')?>",
type: "POST",
datatype: "JSON",
data: {email: email},
success: function(res){
var data = $.parseJSON(res);
var status = data.status;
var message = data.message;
if(status == 'true'){
// $('#myModal').modal('hide');
$('#message').html('');
$('#message').html(message);
$('#message').css('color',"green");
$("loading").hide();
}
else{
$('#message').html('');
$('#message').html(message);
$('#message').css('color',"red");
}
}
});
e.preventDefault();
});
});
how to use loader with ajax when message is success the load stop when message is or error loader is stop how to use loader image image in this stiuation. if submition is true loading hide if false loading also hide.
how to use loader with ajax when message is success the load stop when message is or error loader is stop how to use loader image image in this stiuation. if submition is true loading hide if false loading also hide.

You can use the always handler to do that.
Also note that, you should so the loader only if the ajax is sent, so in your case only after the validations are done it should be done.
$(document).ready(function() {
$('#registration_form').on('submit', function(e) {
/// e.preventDefault();
var email = $('#email').val();
var checkEmail = $("#email").val().indexOf('#');
var checkEmailDot = $("#email").val().indexOf('.');
if (email == '') {
$("#email").addClass('error');
error_flag = 1;
}
if (checkEmail < 3 || checkEmailDot < 9) {
$("#email").addClass('error');
error_flag = 1;
}
$.ajax({
url: "<?=base_url('controller/registration_ajax')?>",
// url: "<?=base_url('controller/register')?>",
type: "POST",
datatype: "JSON",
data: {
email: email
},
beforeSend: function() {
//show it only if the request is sent
$("#loading").show();
},
success: function(res) {
var data = $.parseJSON(res);
var status = data.status;
var message = data.message;
if (status == 'true') {
// $('#myModal').modal('hide');
$('#message').html('');
$('#message').html(message);
$('#message').css('color', "green");
$("loading").hide();
} else {
$('#message').html('');
$('#message').html(message);
$('#message').css('color', "red");
}
}
}).always(function() {
//irrespective of success/error hide it
$("#loading").hide();
});
e.preventDefault();
});
});

Have a loading image like this:
<img src="loader.gif" id="loader" />
And in the script, before the AJAX call, show it:
$("#loader").fadeIn(); // You can also use `.show()`
$.ajax({
// all your AJAX stuff.
// Inside the success function.
success: function (res) {
// all other stuff.
// hide the image
$("#loader").fadeOut(); // You can also use `.hide()`
} // End success
}); // End AJAX
Solution to your Problem
You are missing # in your call:
$("loading").hide();
//-^ Add a # here.
Change it to:
$("#loading").hide();

I'd do it this way:
function loadsth(){
$('#load_dialog').show();
$.ajax({
method: "POST",
url: "?ajax=ajax_request",
data: { data:"test"},
success:function(data) {
$('#load_dialog').hide();
}
});
});

Try using jquery's ajax function beforeSend
$.ajax({
method: "POST",
url: "/url",
data: { data:"test"},
beforeSend: function() {
//SHOW YOUR LOADER
},
success:function(data) {
//HIDE YOUR LOADER
}
});
});
I hope this has given you some idea.

try this its work for u
$.ajax({
url: "<?=base_url('controller/registration_ajax')?>",
type: 'POST',
beforeSend: function(){
$("#loaderDiv").show();
},
success: function(data) {
$('#output-json-inbox').jJsonViewer(data);
$("#loaderDiv").hide();
},
error: function() {
alert("error");
}
});

Related

jQuery AJAX url to PHP file doesn´t work

On my website I have a normal contact form in which you can put in your name, email and a message.
For this form I have script.js, which proofs if the user input is correct and complete. If everything is alright, an AJAX call should point to form-mail.php, in which I send the request from the user to the owner.
script.js and form-mail.php work, but I don´t know the mistake in the AJAX call?
if (sum == 0) {
document.getElementById("name").style.borderColor = "green";
document.getElementById("email").style.borderColor = "green";
document.getElementById("nachricht").style.borderColor = "green";
$.ajax({
type: "POST",
url: "mailform/form-mail.php",
data: $("#myForm").serialize(),
beforeSend: function() {$("#myForm").css({"opacity": "0.2"})}
}).done(function(msg) {
$("#emailform").fadeOut(1000);
setTimeout(function () {
$("#myForm").append('<p id=\"adder-content\" style=\"display:block;width:100%;margin:0 auto;padding-top: 3em;text-align:center;color:green\"><span>' + msg + '</span></p>').css({"opacity": "1"});}, 1000);
});
e.preventDefault();
window.location.href = "http://www.just.a.test";
}
I had this code in two other projects and it worked, but since yesterday there´s a problem with it.

I think the problem is with
window.location.href = "http://www.just.a.test";
before the completion of the ajax call it redirects. Remove it or place it in the done section of the ajax call.
This should work
if (sum == 0) {
document.getElementById("name").style.borderColor = "green";
document.getElementById("email").style.borderColor = "green";
document.getElementById("nachricht").style.borderColor = "green";
$.ajax({
type: "POST",
url: "mailform/form-mail.php",
data: $("#myForm").serialize(),
beforeSend: function() {$("#myForm").css({"opacity": "0.2"})}
})
.done(function(msg) {
$("#emailform").fadeOut(1000);
setTimeout(function () {
$("#myForm").append('<p id=\"adder-content\" style=\"display:block;width:100%;margin:0 auto;padding-top: 3em;text-align:center;color:green\"><span>' + msg + '</span></p>').css({"opacity": "1"});
window.location.href = "http://www.just.a.test";
}, 1000);
});
e.preventDefault();
// window.location.href = "http://www.just.a.test";
};

Try this
$.ajax({
url: 'mailform/form-mail.php',
type: 'POST',
data: {data:data},
before:function(){
$("#myForm").css({"opacity": "0.2"});
}
success:function(response){
console.log(response);
}
});

page redirect is not working in jquery

<script>
$(document).ready(function() {
$("#btnSubmit").live('click',function(){
var sum = '0';
$("[id^=FormData_][id$=_c_data]").each(function(){
var c_data = $(this).val();
var required = $(this).attr("data-required");
var label = $(this).attr("data-label");
if(required == '1'){
if(c_data == ""){
sum += '1';
}
}
});
if(sum == "0"){
$("[id^=FormData_][id$=_c_data]").each(function(){
var c_data = $(this).val();
var admin = $(this).attr("data-admin");
var form = $(this).attr("data-form");
var component = $(this).attr("date-component");
var unic = $(this).attr("data-unic");
var user = $(this).attr("data-user");
var url = "<?php echo Yii::app()->createUrl('formdata/admin&id='.$form_id);?>";
if(c_data == ""){
var site_url = "<?php echo Yii::app()->createUrl('/formdata/deleteDetail' ); ?>";
jQuery.ajax({
type: "POST",
url: site_url,
data: {new_value:c_data,admin:admin,form:form,component:component,unic:unic,user:user},
cache: false,
async: false,
success: function(response){
}
});
} else {
var site_url = "<?php echo Yii::app()->createUrl('/formdata/updateDetailValue' ); ?>";
jQuery.ajax({
type: "POST",
url: site_url,
data: {new_value:c_data,admin:admin,form:form,component:component,unic:unic,user:user},
cache: false,
async: false,
success: function(response){
}
});
}
});
window.location = "http://www.example.com";
}else {
if(sum != ""){
bootbox.dialog({
message: 'Please Fill All Required Field !',
title: 'Alert',
buttons: {
main: {
label: 'OK',
className: 'blue'
}
}
});
return false;
}
}
});
});
</script>
in this script window.location = "http://www.example.com"; is not working.
But I check alert message it is working fine. why its not working in if condition.
I need to redirect page when each function was completed.
please any one help me:-((((((((((((((((((((((((((((

Try this.,
window.location.href = 'http://www.google.com';
This may work for you.
Window.location.href and Window.open () methods in JavaScript

jQuery is not necessary, and window.location.replace(url) will best simulate an HTTP redirect.
still you want to do this with jQuery use this $(location).attr('href', 'url')

If I got your question correct, you want to redirect the user when all your ajax requests, within your each function, are completed. For this, you can create an array that will hold the success status of each ajax request, and depending on this array you may do your redirection task.
Add below few snippets to your existing code:
In your #btnSubmit click function (Though, I recommend you use .on() delegation method)
var ajax_succ_arr = []; // success status container
var this_ajax_succ = false; // flag
In you success function of both ajax calls (within your each function).
if(c_data == ""){
...
jQuery.ajax({
...
success: function(response){
if(response == "1"){
this_ajax_succ = true; // set true if required response is received
}
}
});
ajax_succ_arr.push(this_ajax_succ); // push it to the success array
} else {
...
jQuery.ajax({
...
success: function(response){
if(response == "1"){
this_ajax_succ = true; // set true if required response is received
}
}
});
ajax_succ_arr.push(this_ajax_succ); // push it to the success array
}
And finally your redirection. Put this just after each function ends.
if(ajax_succ_arr.indexOf(false)<0){ // if all statuses are ok
window.location="http://www.example.com";
}
Hope this helps.

ajax loading indicator stopped in between

I am saving data on a save button click that calls ajax and passing json data to a controller method but when we save it loading starts and suddenly stop though the data is not saved.
It is not working I have tried it in all way but not working please help me on this.
<button type="button" id="saveDeleg" class="btn_reg_back btnmainsize btnautowidth btngrad btnrds btnbdr btnsavesize " aria-hidden="true" data-icon="">#Resources.Resource.Save</button>
$('#saveDeleg').click(function() {
var response = Validation();
if (!response) {
return false;
}
$("#overlay").show();
$('.loading').show();
if ($('#organName').val() == '') {
$('#validorganisation').show();
return false;
} else {
$('#validorganisation').hide();
}
//Contact name
var SubDelegation = $('#subdelegation').is(':checked');
var CopyNotification = $('#copynotification').is(':checked');
var ArrangementId = $("#ArrangementId").val();
var paramList = {
ArrangementId: ArrangementId,
ArrangementName: $('#arrangName').val(),
OrganisationName: $('#organName').val(),
OrganisationId: $('#OrganisationId').val(),
ContactName: $('#contactName').val(),
ContactId: $('#ContactId').val(),
SubDelegation: $('#subdelegation').is(':checked'),
CopyNotification: $('#copynotification').is(':checked'),
ContactType: $('#ContactType').val(),
SelectedTypeName: $("input[name$=SelectedType]:checked").val()
};
setTimeout(function() {
$.ajax({
async: false,
type: "POST",
url: '#Url.Action("SaveDelegation", "Structures")',
dataType: "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(paramList),
processdata: true,
success: function(result) {
//stopAnimation()
paramList = null;
if (result == 0) {
window.location.href = '../Structures/MyDelegationArrangement';
} else if (result == 1) {
window.location.href = '../Structures/CreateDelegation';
} else if (result == 2) {
window.location.href = '../Home/Error';
} else if (result == 3) {
window.location.href = '../Account/Login';
} else {
//validation message
alert('Error');
}
},
error: function() {},
complete: function() {
$("#overlay").hide();
$('.loading').hide();
}
});
}, 500);
});

The problem with the loading indicator is because you used async: false which locks up the UI. Remove that setting.
Also note that if the data is not being saved I would assume that your AJAX call is returning an error. If so, check the console to see the response code. It may also be worth putting some logic in the error callback function to give you some information on whats happened, as well as inform your users about what to do next.

Codeigniter load page from another server

Newbie and Need helps for Codeigniter and Javascript, i need load page from another server with CI too..
What should i do to make it works...
$("#select").change(function(){
if($('#textbox').val() == ""){
alert("Warning");
return;
}else{
$('#overlay').show();
var tglpayslip = $('#tglpayslip').val();
var url = "http://192.168.88.7/index.php/home/payslip.php";
$.post(url, tglpayslip, function(response){
$('#overlay').hide();
$('#payslip').html(response);
});
}
});

For cross domain, you have to use JSONP.
$("#select").change(function(){
if($('#textbox').val() == ""){
alert("Warning");
return;
}else{
$('#overlay').show();
var tglpayslip = $('#tglpayslip').val();
var url = "http://192.168.88.7/index.php/home/payslip.php";
$.ajax({
type:"post",
url:url,
dataType: "jsonp",
data:tglpayslip,
success:function(response){
$('#overlay').hide();
$('#payslip').html(response);
}
});
}
});

Try this
var tglpayslip = $('#tglpayslip').val();
var url = "http://192.168.88.7/index.php/home/payslip.php";
$.ajax({
crossDomain: true,
type:"post",
url:url,
dataType: "jsonp",
data:tglpayslip,
success:function(response){
$('#overlay').hide();
$('#payslip').html(response);
}
});

auto submit form to a url if textfield is not empty

I'm trying to auto submit a form when the username column is not null. i've got my script down there but since i'm new to jquery, i've got it missed up and its not working
$(function() {
var $username = $('#username'),
if ($username != null){
$("#form1").submit,function(event){
event.preventDefault();
data = $(this).serialize();
$.ajax({
type: "POST",
url: "http://mysample.com/ans.php",
data: data,
success: function(data) {
$('#log_msg').html(data);
var result = $.trim(data);
if(result==="ok"){
window.location = 'page.html';
}
});
});
});

Try to use on change listener, like
$(document).on('change', '#input_id', function(e) {
$('form_selector').submit();
});
$(document).on('submit', 'form_selector', function(e) {
//Your ajax submit logic
});

If you want to do an AJAX submission, just call $.ajax in the if:
$(function() {
var $username = $("#username").val();
if ($username != '') {
$.ajax({
type: "POST",
url: "/ans.php",
data: $("#form1").serialize(),
success: function(data) {
$('#log_msg').html(data);
var result = $.trim(data);
if(result==="ok"){
window.location = 'page.html';
}
});
}
});
You don't need to define a $("#form1").submit() handler for this.

Develop Reference

JavaScript is the programming language of the Web.

showing loader image with submition using ajax - javascript

I'd do it this way: function loadsth(){ $('#load_dialog').show(); $.ajax({ method: "POST", url: "?ajax=ajax_request", data: { data:"test"}, success:function(data) { $('#load_dialog').hide(); } }); });

Try using jquery's ajax function beforeSend $.ajax({ method: "POST", url: "/url", data: { data:"test"}, beforeSend: function() { //SHOW YOUR LOADER }, success:function(data) { //HIDE YOUR LOADER } }); }); I hope this has given you some idea.

try this its work for u $.ajax({ url: "<?=base_url('controller/registration_ajax')?>", type: 'POST', beforeSend: function(){ $("#loaderDiv").show(); }, success: function(data) { $('#output-json-inbox').jJsonViewer(data); $("#loaderDiv").hide(); }, error: function() { alert("error"); } });

Related

jQuery AJAX url to PHP file doesn´t work

page redirect is not working in jquery

ajax loading indicator stopped in between

Codeigniter load page from another server

auto submit form to a url if textfield is not empty

Categories

Resources