Develop Reference

Getting error trying to submit data using JQuery ajax

When I try to run the following JQuery ajax, I get an error saying that a parameter is missing and it will not send the data. I can't find any syntax errors. What am I doing wrong?
Here is the javascript with the JQuery ajax code:
function submitAction(actionname) {
if (actionname == "illustrationgenerate.htm") {
var thisForm = document.getElementById("illustrationTypeForm");
var fd = new FormData(thisForm);
$.ajax({
url: "illustrationgenerate.htm",
type: "POST",
data: fd,
datatype: "xml",
cache: false,
success: function (result, status, xhr) {
document.getElementById('errorMessage0').value="Success";
},
error: function (xhr, status, error) {
alert(xhr.status);
alert(request.responseText);
}
});
} else {
document.forms[0].action = actionname;
document.forms[0].method = "POST";
document.forms[0].target = '';
document.forms[0].submit();
}
}

Why not use jQuery native form encoder?
$.ajax({
...
data: $('#illustrationTypeForm').serializeArray(),
...
});

Try This
Here is the javascript with the JQuery ajax code:
function submitAction(actionname) {
if (actionname == "illustrationgenerate.htm") {
var thisForm = document.getElementById("illustrationTypeForm");
var fd = new FormData(thisForm);
$.ajax({
url: "illustrationgenerate.htm",
type: "POST",
data: $('#illustrationTypeForm').serializeArray(),
datatype: "xml",
cache: false,
success: function (result, status, xhr) {
document.getElementById('errorMessage0').value="Success";
},
error: function (xhr, status, error) {
alert(xhr.status);
alert(request.responseText);
}
});
} else {
document.forms[0].action = actionname;
document.forms[0].method = "POST";
document.forms[0].target = '';
document.forms[0].submit();
}
}

To make ajax request using jQuery a type 'POST' you can do this by following code :
$.ajax({
url: "test.php",
type: "post",
data: values ,
success: function (response) {
// you will get response from your php page (what you echo or print)
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});

Sent Variable to Controller via Ajax in Blade

I have a variable contains this data below
{"_method":"PUT","_token":"rs8iLxwoJHSCj3Cc47jaP5gp8pO5lhGghF1WeDJQ","id":"1"}
I want to sent it to controller via Ajax
I've tried
$( "form#edit" ).on( "submit", function( event ) {
event.preventDefault();
$("#edit :input").each(function() {
inputs[$(this).attr("name")] = $(this).val();
});
var $inputs = JSON.stringify(inputs);
$.ajax({
url: $url,
type: 'PUT',
dataType: 'json',
data: $inputs ,
success: function (data, textStatus, xhr) {
console.log(data);
},
error: function (xhr, textStatus, errorThrown) {
console.log('PUT error.', xhr, textStatus, errorThrown);
}
});
});
It kept failing on me.
Did I do anything wrong ?

I think that your jQuery code is over complicated. Something just like that should work :
$.ajax({
type: "PUT",
url: $url,
data: $("form").serialize(),
success: function () {
},
error: function () {
}
});
The jQuery function serialize() is the key here.

ajax not called..even alerts are not working

i am writing this code in my html page to hide one id in that page..alerts are also not working..method is not called
*<script>
alert("yo");
$(function checkUsertype(email_id)
{
alert("yup")
var usertype = $("#txtusertype").val();
$.ajax({
alert("hide")
url: 'rest/search/userType?email_id='+email_id,
type : "GET",
datatype : 'json',
cache : false,
success : function(data)
{
if(usertype=='webuser')
{
$("#themer").hide();
}
},
error : function(xhr, data, statusText,errorThrown)
{
}
});
})
alert("yo");
<script/>*

This is the problem.
$.ajax({
alert("hide")
You're trying to alert inside the ajax which is Syntax error. Try removing the alert inside ajax and it should work.
You can use alert in success, error callbacks as follow:
$(function checkUsertype(email_id) {
var usertype = $("#txtusertype").val();
$.ajax({
url: 'rest/search/userType?email_id=' + email_id,
type: "GET",
datatype: 'json',
cache: false,
success: function(data) {
alert('In Success'); // Use it here
console.log(data); // Log the response
if (usertype == 'webuser') {
$("#themer").hide();
}
},
error: function(xhr, data, statusText, errorThrown) {
alert('In Error'); // Use it here
console.log(errorThrown); // Log the error
}
});
});

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

Checking if one ajax call is in progress that I don't fire another

I have a javascript function like this :
addGas = function(options){
var working = false;
$(document).ajaxSend(function(event, jqxhr, settings) {
if (settings.url == '/add_gas') {
working = true;
}
});
if(working) {
return;
}
$.ajax({
url: options.url,
data: options,
type: "POST",
success: function(data, textStatus, jqXHR){
$(".btn").addClass("added").text(" Added gas ").prepend("<i></i>");
},
error: function(jqXHR, textStatus, errorThrown){
}
});
}
So the way I test this is that I put 10 seconds sleep in my controller, and try to click the button again, and it makes a post request who is waiting, because my server can server one request at a time.
But I wanted not to send a post request if one is already running, alternatively alert a message if the request is already running.
How can I do that?

Create a singleton handling its own state, this way you dont pollute the rest of the code with unused variables
gasHandlerBuilder = function(){
var ajaxInProgress = false;
return {
add_gas: function(options){
if(ajaxInProgress){ return; };
ajaxInProgress = true;
$.ajax({
url: options.url,
data: options,
type: "POST",
success: function(data, textStatus, jqXHR){
ajaxInProgress = false;
$(".btn").addClass("added").text(" Added gas ").prepend("<i></i>");
},
error: function(jqXHR, textStatus, errorThrown){
ajaxInProgress = false;
}
});
}
}
}
var gasHandler = gasHandlerBuilder();
gasHandler.add_gas(options);

You should use some flag, something like this :
var recieved = false;
$.ajax({
url: "http://first.call/",
})
.done(function( data ) {
// Do something with that data and enable the flag
recieved = true;
});
addGas = function(options){
var working = false;
$(document).ajaxSend(function(event, jqxhr, settings) {
if (settings.url == '/add_gas') {
working = true;
}
});
if(!recieved) {
return;
}
$.ajax({
url: options.url,
data: options,
type: "POST",
success: function(data, textStatus, jqXHR){
$(".btn").addClass("added").text(" Added gas ").prepend("<i></i>");
},
error: function(jqXHR, textStatus, errorThrown){
}
});
}