We Keep Coding

Undefined index in post method of JSON object sent by jQuery AJAX

I've tried almost all suggestions but it doesn't work. My ids are working properly in the JavaScript function when I alert my array using arr['id']. However, when I try $_POST['id'] on a different PHP file (I've used AJAX and specified the URL) is gives me an error.
scriptfile.php:
<script>
function detailsmodal(cid, pid) {
var arr = { "cid": cid, "pid": pid };
jQuery.ajax({
url: '/frontend/include/detailsmodal.php',
method: "post",
data: arr,
success: function(data) {
jQuery('body').append(data);
jQuery('#details-modal').modal('toggle');
},
error: function() {
alert("something went wrong");
}
});
}
detailsmodal.php
<?php
echo $_POST['cid'];
?>

You could try sending your data as json like this:
$.ajax({
type: "POST",
url: "/frontend/include/detailsmodal.php",
contentType: "application/json",
dataType: "json",
data: JSON.stringify({ cid: cid, pid: pid }),
success: function(data) {
jQuery('body').append(data);
jQuery('#details-modal').modal('toggle');
},
error: function() {
alert("something went wrong");
}
});
For the decoding you could use javascript JSON.parse
var myObj = JSON.parse(this.responseText);
or
$data = json_decode(file_get_contents('php://input'), true);
print_r($data);
echo $data["cid"];

how to get the json string in a variable

i got my json string inside the ajax as function like this way
$.ajax({
type: "POST",
url: "http://localhost/./Service/GetPageInfo",
dataType: "json",
contentType: 'application/json',
data: JSON.stringify({
filename: filename
}),
success: function (data) {
alert('Success');
},
error: function () {
alert('Error');
}
});
here i get data like
[{"main":{"sub":[],"tittle":"manu","startvalue":"","stopvalue":"","status":"","accumalated":"","comment":""}}]
i want it in a variable like
var myjsonobject =[{"main":{"sub":[],"tittle":"manu","startvalue":"","stopvalue":"","status":"","accumalated":"","comment":""}}]

There you go :
$.ajax({
type: "POST",
url: "http://localhost/./Service/GetPageInfo",
dataType: "json",
contentType: 'application/json',
data: JSON.stringify({
filename: filename
}),
success: function (data) {
alert('Success');
var jsonobject = data;
},
error: function () {
alert('Error');
}
});
Also I strongly advise you to use promises to make API calls: https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise

var jsonobject= null;
$.ajax({
type: "POST",
url: "http://localhost/./Service/GetPageInfo",
dataType: "json",
contentType: 'application/json',
data: JSON.stringify({
filename: filename
}),
success: function (data) {
jsonobject=data;
alert('Success');
},
error: function () {
alert('Error');
}
});
If you want wait for ajax response and fill up variable then pass async: false in ajax request options.

Based on your comment, you need to parse the JSON in your success handler,
success: function (data) {
alert('Success');
var myjsonobject = JSON.parse( data );
},

JQuery shortcut for sending ajax/JSON requests

I am working on a application that uses a REST architecture style. Hence, I often do some calls to the backend with JSON data.
jQuery is new to me and up to now, the only syntax that worked for me is :
$.ajax({
url: '/api/something/',
type: 'POST',
contentType:"application/json", //Or I will get 400 : Bad request
data: JSON.stringify({key : "value"}),
success: function (data) {
console.log("data : %o", data);
}
});
But I do not want to write explicitly contentType:"application/json" and JSON.stringify at every call. I would prefer something like :
$.someFunction({
url: '/api/something/',
type: 'POST',
data: {key : "value"},
success: function (data) {
console.log("data : %o", data);
}
});
Maybe I could make a function in order to factorize this but I feel that jQuery should have a pre-existing function for that.
Anyone knows such function?

Just wrap everything in a function and pass the parameters you need.
var thinPostWrapper = function(url, data, success) {
return $.ajax({
url: url
type: 'POST',
contentType: "application/json",
data: JSON.stringify(data),
success: success
});
}
thinPostWrapper('/api/something/', {"key" : "value"}, function(data) {
console.log("data : %o", data);
});

Try extending jQuery:
$.extend({doPost: function(url, data, success, error) {
$.ajax({
url: url,
type: 'POST',
contentType: "application/json",
data: JSON.stringify(data),
success: success,
error: error
});
}
});
$.doPost('/api/something/', {"key" : "value"}, function(data) {
console.log("data : %o", data);
});

Try
$.post(
'api/something',
{ key: 'value' },
function( data ) {
...
},
'json'
);
See http://api.jquery.com/jquery.post/ for more details

Try with $.post
$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType
});

Ajax call to database not works

in my application I have to make an ajax call to php file.it works proper in all devices. but when I tried it on ipad mini it not calls the php, so that the functionality not works, I've seen so many question about this problem and edited my code like this.
jQuery.ajax({
type: "POST",
async: true,
cache: false,
url: "directory/phpfile.php",
data: data,
success: function(response) {
}
});
my old code is
jQuery.ajax({
type: "POST",
url: "wp-admin/admin-ajax.php",
data: data,
success: function(response) {
}
});
and the problem still cant resolve . so please any one tell me how to resolve this.

Please use this code
$("#ajaxform").submit(function(e)
{
var postData = $(this).serializeArray();
var formURL = $(this).attr("action");
$.ajax(
{
url : formURL,
type: "POST",
data : postData,
success:function(data, textStatus, jqXHR)
{
//data: return data from server
},
error: function(jqXHR, textStatus, errorThrown)
{
//if fails
}
});
e.preventDefault(); //STOP default action
e.unbind(); //unbind. to stop multiple form submit.
});
$("#ajaxform").submit(); //Submit the FORM

<script type='text/javascript'>
$(document).ready(function startAjax() {
$.ajax({
type: "POST",
url: "test.php",
data: "name=name&location=location",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
});

How to group rules in jquery

Hi I've got a simple question. I've this code below, i use ajax three times in very similiar ways the only things that change are the data passed and the id of the target. Is there a way to group these instructions in a simple one?
Thx
D.
$('#fld_email').focusout(function() {
var request_email = $(this).val();
$.ajax({type:"GET",
url: "autocomplete.asp",
data: "fld=firstname&email="+request_email,
beforeSend: function(){$('#fld_firstname').addClass('ac_loading');},
success: function(msg){$('#fld_firstname').val(msg);$('#fld_firstname').removeClass('ac_loading'); }
});
$.ajax({type:"GET",
url: "autocomplete.asp",
data: "fld=lastname&email="+request_email,
beforeSend: function(){$('#fld_lastname').addClass('ac_loading');},
success: function(msg){$('#fld_lastname').val(msg);$('#fld_lastname').removeClass('ac_loading');}
});
$.ajax({type:"GET",
url: "autocomplete.asp",
data: "fld=phone&email="+request_email,
beforeSend: function(){$('#fld_phone').addClass('ac_loading');},
success: function(msg){$('#fld_phone').val(msg);$('#fld_phone').removeClass('ac_loading');}
});
}
);

try:
$('#fld_email').focusout(function() {
var request_email = $(this).val();
processAjax("fld=firstname&email="+request_email, '#fld_firstname');
processAjax("fld=lastname&email="+request_email, '#fld_lastname');
processAjax("fld=phone&email="+request_email, '#fld_phone');
});
function processAjax(data, id){
$.ajax({type:"GET",
url: "autocomplete.asp",
data: data,
beforeSend: function(){$(id).addClass('ac_loading');},
success: function(msg){$(id).val(msg).removeClass('ac_loading');}
});
}

Use an object and the for control structure:
var fields = {firstname:1, lastname:1, phone:1};
for (field in fields) {
$.ajax({
type:"GET",
url: "autocomplete.asp",
data: "fld=" + field + "&email=" + request_email,
beforeSend: function() {
$('#fld_'+field).addClass('ac_loading');
},
success: function(msg) {
$('#fld'+field).val(msg);
$('#fld'+field).removeClass('ac_loading');
}
});
}