Develop Reference

JQuery no Alerting success data

I have some ajax here that getting the response but not the alert success and goes for error
<script>
$(document).ready(function(){
$('#manual').click(function(){
alert('a');
$.ajax({
url: "<?php echo base_url(); ?>index.php/admin/get_data_id",
type: "POST",
data: { tag: $('#manual_text').val() },
success: function(data)
{
alert(data);
},
error: function()
{
alert("Error");
}
})
});
});

Ajax, failed to load PHP from server

I'm trying to make a PHP connection, but I keep getting this error. I am hoping someone can help.
My code gives the following error:
{
"readyState": 0,
"status": 0,
"statusText": "NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'http://localhost/php/busca.php'."
}
My code is:
SendSQL.onclick = function() {
var dataString='a=hello&b=world';
$.ajax({
type: "POST",
url:"http://localhost/php/busca.php",
data: dataString,
async: false,
dataType:'html',
success: function(data){
alert(data);
},
error: function(data){
alert(JSON.stringify(data)); //Better diagnostics
}
});
};
And the file busca.php is:
<?php
$a = $_POST['a'];
$b = $_POST['b'];
echo "$a, $b";
?>

Try this approach...
SendSQL.onclick = function() {
var dataString='a=hello&b=world';
$.ajax({
type: "POST",
url:"http://localhost/php/busca.php",
data: {
"a":"hello",
"b":"world"
},
async: false,
dataType:'text',
success: function(data){
alert(data);
},
error: function(data){
console.log(data);
}
});
};

Your dataString is the way for sending parameter of GET request.
Let's change to JSON like
var dataString = { "a":"hello", "b":"world" };
$.ajax({
type: "POST",
url:"http://localhost/php/busca.php",
data: {data: JSON.stringify(dataString)},
async: false,
dataType:'json',
success: function(data){
alert(data);
},
error: function(data){
alert(JSON.stringify(data)); //Better diagnostics
}
});
And in php code, use json_decode($_POST['data'])

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');
}
});