Develop Reference

not able to pass value using ajax in php file

I am not able to pass value using ajax in php file.
Corrected Code
<script>
$("body").on('change', '#area', function () {
//get the selected value
var selectedValue = $(this).val();
//make the ajax call
$.ajax({
url: 'box.php',
type: 'POST',
data: {option: selectedValue},
success: function () {
console.log("Data sent!");
}
});
});
</script>
here the php code
<?php $val=$_POST['option'];echo $val; ?>

There are a few problems here:
It should be url, not rl. Also, you have type: POST' with it ending in a ', but no starting '.
It should be type: 'POST'.
It should then look like this:
$("body").on('change', '#area', function() {
var selectedValue = this.value;
$.ajax({
url: 'box.php',
type: 'POST',
data: {
option : selectedValue
},
success: function() {
console.log("Data sent!");
}
});
});
If you want to view your data on the same page after (as on box.php, you are echo'ing the value.), you can do this:
success: function(data) {
console.log(data);
}
This will then write in the console what option is, which is the value of #area.

Try the following code
$("body").on('change',function(){
$.ajax({
URL:<you absolute url>,
TYPE:POST,
Data:"variable="+$("#area").val(),
Success:function(msg){
<do something>
}
});
});
Hope this will help you in solving your problem.

Your just miss ajax method parameter spelling of 'url' and single quote before value of type i.e. 'POST'. It should be like
$.ajax({
url: 'box.php',
type: 'POST',
data: {option : selectedValue},
success: function() { console.log("Data sent!");}
});

Ajax not being called in javascript function

In the success function I want to call a function. The problem is that ajax does not fire, so the data is never triggered and display. Here is my ajax call with a javascript function call in the success function.
$.ajax({
type: "POST",
url: "./api/login.php",
data: dataString,
cache: false,
success: function(data){
if(data){
//FUNCTION CALL WHEN USER LOGGING IN
retrieveUserBlogData();
window.location = "api/home.php";
}else{
$('.alert').show();
}
}
});
function retrieveUserBlogData(){
$.ajax({
type: "GET",
url: 'retrievePostData.php',
data: "",
dataType: 'json',
success: handleData
});
}
function handleData(data) {
alert(data);
var blog_file = data[3];
$('#imageDiv')
.append('<img id="blog_img" src="upload/' + blog_file + '"><br>');
}
I cant figure out why the ajax in the retrieveUserBlogData() function is not being triggered.
Any help would be appreciated Thanks.

Even if the AJAX succeeds, you are redirecting the browser to a different page after the first AJAX request:
window.location = "api/home.php";
So I would suggest removing that.

Try the following code for redirecting to another window
window.location.assign(URL);
then it may work.

Try it like this
$.ajax({
type: "POST",
url: "./api/login.php",
data: dataString,
cache: false,
success: function(data){
if(data){
//FUNCTION CALL WHEN USER LOGGING IN
retrieveUserBlogData();
}else{
$('.alert').show();
}
}
});
function retrieveUserBlogData(){
$.ajax({
type: "GET",
url: 'retrievePostData.php',
data: "",
dataType: 'json',
success: function(data){
alert(data);
var blog_file = data[3];
$('#imageDiv')
.append('<img id="blog_img" src="upload/' + blog_file + '"><br>');
window.location = "api/home.php";
}
});
}

JSP AJAX return NULL

i using JQuery Ajax to call REST api in jsp but it return null no matter how i call but it can work in html. is there any way to solve this problem. Cant seem to find a solution in the net.
$(document).ready(function () {
alert('ready');
var accessKey = 'xkg8VRu6Ol+gMH+SUamkRIEB7fKzhwMvfMo/2U8UJcFhdvR4yN1GutmUIA3A6r3LDhot215OVVkZvNRzjl28TNUZgYFSswOi';
var thisUrl = 'http://www.onemap.sg/API/services.svc/getToken?accessKEY=' + accessKey;
$.ajax({
type: "GET",
url: thisUrl,
dataType: 'application/json',
success: function (data) {
alert('data is:' + data.GetToken[0].NewToken);
}
});
alert(thisUrl);
});

dataType should be jsonp
$(document).ready(function () {
var thisUrl = 'http://www.onemap.sg/API/services.svc/getToken?accessKEY=' + accessKey;
$.ajax({
type: "GET",
url: thisUrl,
dataType: 'jsonp',
success: function (data) {
console.log(data)
alert('data is:' + data.GetToken[0].NewToken);
}
});
});

Refer to this article:
http://www.isgoodstuff.com/2012/07/22/cross-domain-xml-using-jquery/
You only need "jquery.xdomainajax.js" that is there in the sample source-code to make it work.
$.ajax({
url: 'https://asdf/asdf',
dataType: "xml",
type: 'GET',
success: function(res) {
var myXML = res.responseText;
alert(myXML);
}
});

Going reusable with data attributes and jquery

I have many Bootstrap Type-ahead attached to my text-box.
I was using there id to select then and attach typeahead.
Sample
$("#SireTag").typeahead({
source: function (query, process) {
$.ajax({
url: '/Bull/GetSireTag',
type: 'POST',
data: 'query=' + query,
dataType: 'JSON',
async: true,
success: function (data) {
console.log(data);
process(data);
}
});
}
});
Now i decided to make it more readable and short by using a single java-script code to attach type ahead to all my text-boxes.
<input data-typeahead-url="/Bull/GetSireTag" id="SireTag" name="SireTag" type="text" value="">
New Javascript
$('*[data-typeahead-url]')
.each(function () {
alert(this);
$(this).typeahead({
source: function (query, process) {
$.ajax({
url: $(this).data("typeahead-url"),
type: 'POST',
data: 'query=' + query,
dataType: 'JSON',
async: true,
success: function (data) {
console.log(data);
process(data);
}
})
}
});
});
But its not working i am not so proficient with java-script anyone now whats wrong.
I tried developers tool ajax request is not made.

$('*[data-autocomplete-url]') doesn't select your elements because you're using data-typeahead-url.

You need to return the ajax result to the source, also don't use alert() to debug, use console.log() instead:
$('input[data-typeahead-url]').each(function () {
$(this).typeahead({
source: function (query, process) {
return $.ajax({
url: $(this).data("typeahead-url"),
type: 'POST',
data: { query: query },
dataType: 'json',
async: true,
success: function (resp) {
console.log(resp);
return process(resp);
}
});
}
});
});
Hope it helps.

$('*[data-typeahead-url]')
.each(function () {
var url = $(this).data("typeahead-url");
$(this).typeahead({
source: function (query, process) {
$.ajax({
url: url,
type: 'POST',
data: 'query=' + query,
dataType: 'JSON',
async: true,
success: function (data) {
console.log(data);
process(data);
}
})
}
});
});
Problem: The code was making ajax request but to the same address.
Diagnose: I tried log($(this).data("typeahead-url");) which gave desired output.
Solution: I created and stored the Url the used it as a parameter in ajax call
var url = $(this).data("typeahead-url");
Hope this help.

Variable not working in simple Ajax post

Can't seem to get the variable getID to work. I'm trying to change the html of the div. I know that the variable has the right value.
$('.cardid').change(function() {
var getID = $(this).attr('value');
$.ajax({
type: "POST",
url: "inc/change_thumbnail.php",
data: "id="+getID,
cache: false,
success: function(data) {
$("#"+getID).html(data);
alert("success");
},
error: function (err) {
alert("error");
}
});
});

Write data in $.ajax as data: {id : getID}, instead of data: "id="+getID,

Use val to get the value of an input :
var getID = $(this).val();
As you're making a POST request, you should also use the data argument to let jQuery properly send the value :
$.ajax({
type: "POST",
url: "inc/change_thumbnail.php",
data: {id:getID},
cache: false,
success: function(data) {
$("#"+getID).html(data);
alert("success");
},
error: function (err) {
alert("error");
}
});

You can try this:
$('[id="'+getID+'"]').html(data);
and yes you should pass it this way:
data:{id:getID}