Develop Reference

How do I redirect to another page in JS / jQuery after sending a form?

I'm trying to make a JS script that works on the same form page. Everything works up until redirecting after a successful login.
$(document).ready(function() {
$('#loginForm').submit(function(e) {
e.preventDefault();
$.ajax({
url: 'goLogin.php',
type: 'POST',
data: $(this).serialize(),
dataType: 'html'
}).done(function(data) {
$('#results').fadeOut('slow', function() {
$('#results').fadeIn('slow').html(data);
window.setTimeout(function() {
window.location.href = 'index.php';
}, 5000);
});
}).fail(function() {
alert('Error!');
});
});
});

$.ajax({
url: 'goLogin.php',
type: 'POST',
data: $(this).serialize(),
dataType: 'html',
success: function(data){
$('#results').fadeOut('slow', function() {
$('#results').fadeIn('slow').html(data);
window.setTimeout(function() {
window.location.href = 'index.php';
}, 5000);
});
},
error: function(data){
alert('Error!');
}
});
Please check this code...Replace your ajax section...

ajax error in codeigniter

showing this error: XHR failed to load: AJAX
This is ajax code:
$.ajax({
url:"<?php echo base_url();?>food/register_user/",
type:"ajax",
traditional:true,
data:{data},
dataType:"json",
success:function(data){
console.log(data);
alert(data);
},
error: function() {
alert("Error");
}
});

Try this
$.ajax({
url:"<?php echo base_url();?>food/register_user/",
type:"post",
traditional:true,
data:{data},
dataType:"json",
success:function(data){
console.log(data);
alert(data);
},
error: function() {
alert("Error");
} });

I think the closing braces on the error function is the problem it should look like this
$.ajax({
url: "<?php echo base_url();?>food/register_user/",
type: "ajax",
traditional: true,
data: {
data
},
dataType: "json",
success: function(data) {
console.log(data);
alert(data);
},
error: function() {
alert("Error");
}
});

Transfer data from Ajax to php

i am trying to send datas from ajax to php, but php doesnt show it. both scripts are on the same site: "testpage.php".
jQuery/Ajax:
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#button").click(function() {
var test = "bla";
$.ajax({
url: "testpage.php",
type: "post",
data: test,
success: function (response) {
alert("test ok");
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
});
});
</script>
PHP:
<?php
if(isset($_POST["test"])) {
$test2 = $_POST;
echo $test2;
echo "Test";
}
?>
I do not see the result of PHP

use data: {test:test}, & alert your response to see your result.
success: function (response) {
alert(response);
},
Or Just append your response to html.

You need to use data: {test:sometext} if you want to do a POST request.

The PHP can't see the value in the post because you only send bla in the PHP body. You have to send test=bla. But jQuery can do it automatically by sending data : { test : test }.
$(document).ready(function() {
$("#button").click(function() {
var test = "bla";
$.ajax({
url: "testpage.php",
type: "post",
data: {
test : test
},
success: function (response) {
alert("test ok");
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
});
});

You can use serialize() method into your $.ajax();
Something like:
$.ajax({
url: "testpage.php",
type: "post",
data: $("#myForm input").serialize(),
success: function (response) {
alert("test ok");
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
Then try to accessing your post data by form input name.

var data = {
'test': "bla",
};
$.ajax({
type: "POST",
url: "testpage.php",
data: data,
dataType: "json"
}).done(function(response){
console.log(response);
}).fail(function(response){
console.log(response);
});

Load reveal modal while an ajax is running

Hi I am calling an ajax from my php page and while the ajax is running i would like to load a image on foundation reveal modal.
this in my code.
<div id="loadinimg" class="reveal-modal" data-reveal>
Loading!!!!!!!!!!!!!!!
</div>
$('.print-button').click(function() {
$.when(
$.ajax({
url: 'newphp1.php',
type: "POST",
beforeSend: function() {
$('#loadinimg').foundation('reveal', 'open');
},
data: {
selected_date: '<?php echo $GLOBALS["selected_date"] ?>'
},
error: function(data){
},
success: function(response){
alert(response);
console.log(response);
},
complete: function() {
$('#loadinimg').foundation('reveal', 'close');
}
})).done(
$.ajax({
url: 'newph2p.php',
type: "POST",
data: {
selected_date: '<?php echo $GLOBALS["selected_date"] ?>'
},
error: function(data){
},
success: function(response){
console.log(response);
console.log(response);
location.reload();
}
}));
});
but the reveal modal is getting popped up only at the end of the ajax execution. what can be the problem?

You can use beforeSend and complete option of ajax like one below:
$.ajax({
url: 'newphp.php',
type: "POST",
async: false,
beforeSend: function() {
$('#loadinimg').foundation('reveal', 'open');
},
error: function(data){
},
success: function(response){
alert(response);
console.log(response);
},
complete: function() {
//close the loading image
}
}
UPDATE
$.when(
$.ajax({
url: 'newphp.php',
type: "POST",
beforeSend: function() {
$('#loadinimg').foundation('reveal', 'open');
},
error: function(data){
},
success: function(response){
alert(response);
console.log(response);
},
complete: function() {
//close the loading image
}
})).done(function(){
//make another ajax call here
});
UPDATE 2
This might be the only way left now!! Just set a global variable in js file like one below:
var ajax1Complete=false;
$.when(
$.ajax({
url: 'newphp.php',
type: "POST",
beforeSend: function() {
$('#loadinimg').foundation('reveal', 'open');
},
error: function(data){
},
success: function(response){
alert(response);
console.log(response);
ajax1Complete=true;//set it on success
},
complete: function() {
//close the loading image
}
})).done(function(){
if(ajax1Complete)
{
//make another ajax call here and onsuccess set ajax1Complete to false
}
});

Can I call ajax function inside another ajax function? [duplicate]

Is it possible to make an ajax request inside another ajax request?
because I need some data from first ajax request to make the next ajax request.
First I'm using Google Maps API to get LAT & LNG, after that I use that LAT & LNG to request Instagram API (search based location).
Once again, is this possible, and if so how?
$('input#search').click(function(e) {
e.preventDefault();
var source = $('select[name=state] option:selected').text()+' '+$('select[name=city] option:selected').text()+' '+$('select[name=area] option:selected').text();
var source = source.replace(/ /g, '+');
if(working == false) {
working = true;
$(this).replaceWith('<span id="big_loading"></span>');
$.ajax({
type:'POST',
url:'/killtime_local/ajax/location/maps.json',
dataType:'json',
cache: false,
data:'via=ajax&address='+source,
success:function(results) {
// this is where i get the latlng
}
});
} else {
alert('please, be patient!');
}
});

Here is an example:
$.ajax({
type: "post",
url: "ajax/example.php",
data: 'page=' + btn_page,
success: function (data) {
var a = data; // This line shows error.
$.ajax({
type: "post",
url: "example.php",
data: 'page=' + a,
success: function (data) {
}
});
}
});

Call second ajax from 'complete'
Here is the example
var dt='';
$.ajax({
type: "post",
url: "ajax/example.php",
data: 'page='+btn_page,
success: function(data){
dt=data;
/*Do something*/
},
complete:function(){
$.ajax({
var a=dt; // This line shows error.
type: "post",
url: "example.php",
data: 'page='+a,
success: function(data){
/*do some thing in second function*/
},
});
}
});

This is just an example. You may like to customize it as per your requirement.
$.ajax({
url: 'ajax/test1.html',
success: function(data1) {
alert('Request 1 was performed.');
$.ajax({
type: 'POST',
url: url,
data: data1, //pass data1 to second request
success: successHandler, // handler if second request succeeds
dataType: dataType
});
}
});
For more details : see this

$.ajax({
url: "<?php echo site_url('upToWeb/ajax_edit/')?>/" + id,
type: "GET",
dataType: "JSON",
success: function (data) {
if (data.web == 0) {
if (confirm('Data product upToWeb ?')) {
$.ajax({
url: "<?php echo site_url('upToWeb/set_web/')?>/" + data.id_item,
type: "post",
dataType: "json",
data: {web: 1},
success: function (respons) {
location.href = location.pathname;
},
error: function (xhr, ajaxOptions, thrownError) { // Ketika terjadi error
alert(xhr.responseText); // munculkan alert
}
});
}
}
else {
if (confirm('Data product DownFromWeb ?')) {
$.ajax({
url: "<?php echo site_url('upToWeb/set_web/')?>/" + data.id_item,
type: "post",
dataType: "json",
data: {web: 0},
success: function (respons) {
location.href = location.pathname;
},
error: function (xhr, ajaxOptions, thrownError) { // Ketika terjadi error
alert(xhr.responseText); // munculkan alert
}
});
}
}
},
error: function (jqXHR, textStatus, errorThrown) {
alert('Error get data from ajax');
}
});