pass multiple datas in to the ajax - ajax

Here for sending multiple values to the ajax i had done my code like this please have a look
$("#btnSubmit").on("click", function (e) {
e.preventDefault();
var toPost = $('.row_selected input').serialize();
var form_data={
date: $('#transfer_date').val(),
group: $('#lo_group').val(),
name: $('#name').val(),
phone: $('#phone').val(),
location: $('#loc_id').val()
}
$.ajax({
type: 'POST',
url: '<?php echo base_url();?>admin_control/transfer_tool/<?php echo $result->id;?>',
data: 'toPost='+toPost+'&form_data='+form_data,
cache: false,
dataType:"json",
});
});
Here only first value is getting and the second value is not passing,tried a lot but couldn't find a solution.please help me to solve

Convert javascript object to data parameters
use jQuery.param(form_data)
$.ajax({
type: 'POST',
url: 'www.test.com/admin_control/transfer_tool/',
data: 'toPost='+toPost+'&form_data='+jQuery.param(form_data),
cache: false,
dataType:"json",
});

Related

How to include two URL in json ajax

Currently, the searchform hit, the form get submitted. Then it will fetch data from specified URL which is search/ajax2.php and return data here.
All I want to add is, to include another URL beside the above mentioned one, so that two actions can be performed at the same time.
Now, in the search/ajax2.php it runs a select query. Whereas in additional page that I want to include, which could be writedb.php it inserts data taken from this jason into database. It doesn't have to return anything back to ajax page though!
How to achieve this?
$("#searchform").on("submit", function () {
//$(this).find(':submit').attr('disabled','disabled');
var data = {
"action": "test"
};
data = $(this).serialize() + "&" + $.param(data);
$.ajax({
type: "POST",
dataType: "json",
url: "search/ajax2.php",
data: data,
success: function (data) {
}
});
Try adding your second url in sucess function like this :
$.ajax({
type: 'POST',
url: 'some_url1',
data: 'some data',
success: function(data){
$.ajax ({
type: 'POST',
url: 'some_url2',
data: 'some data',
success: function(data){}
});
}
});

recursive ajax or setInterval(), WHICH ONE IS BETTER?

I am trying to fetch the message table and append the response on the previous fetched results...
here are 2 approaches I have tried, but all failed
1st: recursive fetch
function fetch(){
$.ajax({
url: url,
type: "post",
data:data,
timeout: 3000,
success: function(data){
$(selector).append(data);
setTimeout(function(){fetch()},3000);
}
})
}
2nd: setInterval()
setInterval(function(){fetch()},3000);
function fetch(){
$.ajax({
url: url,
type: "post",
data:data,
timeout: 3000,
success: function(data){
$(selector).append(data);
}
})
}
after few successful ajax call, the browser went frozen and console shows "net::ERR_EMPTY_RESPONSE " OR "ERR_CONNECTION_TIMED_OUT"
please advise
thank you
You may this this if you want to make a recursive call after success or failure
function fetch(url, selector){
$.ajax({
url:url,
type:"post",
data:data,
timeout:3000,
success:function(data){
$(selector).append(data);
fetch();
},
error:function(data){
fetch();
}
});
}

AJAX call return undefined

This AJAX call is returning "undefined". I'm not sure what I'm doing wrong and why this isn't working:
var xmlfile;
$.ajax({
type: 'GET',
url: 'sample.xml',
dataType: 'xml',
success: function(data){
xmlfile = $(data);}
});
console.log(xmlfile);
This is likely to be a timing issue since you're referring to the xmlFile variable before the call returns. Instead you have to move the reference into the success callback.
$.ajax({
type: 'GET',
url: 'sample.xml',
dataType: 'xml',
success: function(data){
xmlfile = data;
console.log(xmlfile);
}
});
Try the above.
you can do this by
$.ajax({
type: 'GET',
url: 'sample.xml',
dataType: 'xml',
success: function(data){
xmlfile = data ;}
});
or set the async : false,
you can detect error/problem by debugging so you can see where are you doing wrong
like see alert(data) it it does it mean you are getting successful response by ajax call
var xmlfile;
$.ajax({
type: 'GET',
url: 'sample.xml',
dataType: 'xml',
async : false,
success: function(data){
xmlfile = $(data);}
});
console.log(xmlfile);
try This, you are getting undefined due to asyn call, your log executes before you got result from server

Send FormData and String Data Together Through JQuery AJAX

I have the below that uploads an image using JQuery's AJAX function
var id = <?php echo $id; ?>;
var img_data = new FormData($("form")[0]);
$.ajax({
url: 'add.php',
data: img_data,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
alert(data);
}
});
I'd like to include a string with the FormData sent. I tried the following, but no luck
data: img_data {id: id},
What's the correct syntax here?
Use append
var img_data = new FormData($("form")[0]);
img_data.append('id', id);
You could create a JSON data object and pass that as application/json and process the data within add.php:
var data = {
id : <?php echo !empty($id) ? $id : "''",
img_data : new FormData($("form")[0])
};
$.ajax({
url: 'add.php',
data: data,
contentType: "application/json",
type: 'POST',
success: function(data){
alert(data);
}
});
Although unconventional, you could also append the data as a query string to the URL with the POST. You'd also need to edit add.php to get this parameter.
$.ajax({
url: 'add.php?id=' + id,
data: img_data,
processData: false,
type: 'POST',
success: function(data){
alert(data);
}
});

Ajax Success Function not working

I am using Ajax to add contents on my database. And here's the code:
function addToFavorites(){
var recipe_id = $("#recipe_id").val();
var url = connect_url+'addFavorite.php?user_id='+user_id+'&recipe_id='+recipe_id;
$.ajax({
type: 'POST',
data: [{
user_id: user_id,
recipe_id: recipe_id
}],
url: url,
async: true,
jsonpCallback: 'userCallback',
contentType: "application/json",
dataType: 'jsonp',
success: function (data) {
alert("HELLO!!!");
},
error: function (e) {
alert("ERROR!");
}
});
}
The Ajax call was successful and I was able to add records on the database but I'm just wondering why is it not displaying the alert message if the calling was successful? Is there something wrong with my code? Or is there something wrong with my understanding? Thanks!
you must give a response with some info to the ajax or it won't know the response succeeded

Resources