This is what I am trying to do. On a home page.. say /home.jsp, a user clicks on a link. I read value of the link and on the basis of which I call a RESTful resource which in turn manipulates database and returns a response. Interaction with REST as expected happens with use of JavaScript. I have been able to get information from REST resource but now I want to send that data to another JSP.. say /info.jsp. I am unable to do this.
I was trying to make another ajax call within success function of parent Ajax call but nothing is happening. For example:
function dealInfo(aparameter){
var requestData = {
"dataType": "json",
"type" : "GET",
"url" : REST resource URL+aparameter,
};
var request = $.ajax(requestData);
request.success(function(data){
alert(something from data); //this is a success
//I cannot get into the below AJAX call
$.ajax({
"type": "post",
"url": "info.jsp"
success: function(data){
alert("here");
("#someDiv").html(data[0].deviceModel);
}
});
How do I go about achieving this? Should I use some other approach rather than two Ajax calls? Any help is appreciated. Thank You.
You can use the following function:
function dealInfo(aparameter) {
$.ajax({
url: 'thePage.jsp',
type: "GET",
cache: false,
dataType: 'json',
data: {'aparameter': aparameter},
success: function (data) {
alert(data); //or you can use console.log(data);
$.ajax({
url: 'info.jsp',
type: "POST",
cache: false,
data: {'oldValorFromFirstAjaxCall': data},
success: function (info) {
alert(info); //or you can use console.log(info);
$("#someDiv").html(info);
}
});
}
});
}
Or make the AJAX call synchronous:
function dealInfo(aparameter) {
var request = $.ajax({
async: false, //It's very important
cache: false,
url: 'thePage.jsp',
type: "GET",
dataType: 'json',
data: {'aparameter': aparameter}
}).responseText;
$.ajax({
url: 'info.jsp',
type: "POST",
cache: false,
data: {'oldValorFromFirstAjaxCall': request},
success: function (info) {
alert(info); //or you can use console.log(info);
$("#someDiv").html(info);
}
});
}
In this way I'm using.
"type": "post" instead of type: 'post'
Maybe it will help. Try it please. For Example;
$.ajax({
url: "yourURL",
type: 'GET',
data: form_data,
success: function (data) {
...
}
});
Related
what should I write in the script to make javascript asynchronously implement firstly ajax method GET and then another simple function(in the order of my script)?
because here while debugging I see that getCategories() is implemented before WriteCategories(categories)
$.ajax({
url: '/api/ListingAPI/GetCategoriesById?id=1',
type: 'GET',
dataType: 'json',
success: function WriteCategories(categories) {
// ...
}
});
var test = getCategories();
Actually you want synchronous execution,
you need to add async: false in ajax request, (But be aware of this it will freeze your UI until your request completes, actually it is not recommended)
$.ajax({
url: '/api/ListingAPI/GetCategoriesById?id=1',
type: 'GET',
async: false,
dataType: 'json',
success: function WriteCategories(categories) {
// ...
}
});
var test = getCategories();
or either you can call your function on ajax success callback,
$.ajax({
url: '/api/ListingAPI/GetCategoriesById?id=1',
type: 'GET',
dataType: 'json',
success: function WriteCategories(categories) {
var test = getCategories();
}
});
For your knowledge, You can pass your query string params in data option in ajax rather than query string itself,
var queryStringData = {id : 1}
$.ajax({
url: '/api/ListingAPI/GetCategoriesById',
type: 'GET',
dataType: 'json',
data: queryStringData,
success: function WriteCategories(categories) {
var test = getCategories();
}
});
Try this code.
$.ajax({
url: '/api/ListingAPI/GetCategoriesById?id=1',
type: 'GET',
dataType: 'json',
success: function WriteCategories(categories) {
var test = getCategories();
}
});
You can call this function after ajax success. By this way AJAX get will be executed first.
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";
}
});
}
I am trying to make two jQuery ajax calls, the second should be made from the success callback of the first. I have tried a couple variations of code e.g just messing with the brackets.
Here is what I tried.
$.ajax({
url: 'inc/grab_talk.php?name='+encoded_name+'&loc='+encoded_address+'&lat='+encoded_lat,
type: 'post',
success: function () {
$.ajax({
url: 'inc/talk_results.php',
type: 'post',
success: function (dat) {
alert(dat);
}
});
}
});
I am receiving '500 (internal server error) in console
Try this, you can use either POST or GET, but in your case GET seems to be more appropriate.
$.ajax({
type: "GET",
url: "some.php",
data: { name: "somename", location: "somelocation" },
success: function(){
$.ajax({
type: "GET",
url: "someother.php",
success: function(){
alert('test');
}
});
}
});
Check this example
$.ajax({
type: "post",
url: "ajax/example.php",
data: 'page='+btn_page,
success: function(data){
$.ajax({
var a=data; //edit data here
type: "post",
url: "example.php",
data: 'page='+a,
success: function(data){
});
});
I use $.ajax to send some data to testajax.phpenter code here where data are processing. Result of this proces is link. How to get access to this? I think about sessions or cookies. Set in session $test and get access in another files.
$.ajax({
url: 'testajax.php',
type: 'post',
dataType: 'json',
success: console.log('success');
data: { json : jsonObj }
});
In testajax.php I have someting like this
echo "PDF: <a href=images/test.pdf>$dir.pdf</a>";
$test = "PDF: <a href=images/test.pdf>$dir.pdf</a>";
How to get the $test or output the echo after call $.ajax
You can use success' function to get request from PHP.
$.ajax({
url: 'testajax.php',
type: 'post',
dataType: 'html',
data: { json : jsonObj }
success: function(data) {
var request = data;
console.log(data);
$('#link_container').html(data);
}
});
Your console now holds PDF: <a href=images/test.pdf>($dir content).pdf</a>.
Also the variable request holds the same result that you can use anywhere in the script.
Result is appended to #link_container.
Use the success() method for display the result.
$.ajax({
url: 'testajax.php',
type: 'post',
dataType: 'json',
success: function (data){ // <= define handler for manupulate the response
$('#result').html(data);
}
data: { json : jsonObj }
});
Use below code It may help you.
$.ajax({
url: 'testajax.php',
type: 'post',
dataType: 'json',
data: { json : jsonObj },
onSuccess: successFunc,
onFailure: failureFunc
});
function successFunc(response){
alert(response);
}
function failureFunc(response){
alert("Call is failed" );
alert(response);
}
I have this code that works well:
{"livre":"empty_name"}
$.ajax({
url: "sent.php",
type: "post",
dataType: "json",
data: formdata,
success: function (data) {
switch (data.livre) {
case 'empty_name':
break;
}
});
but when i try this code (i need the id), the case "empty name" didn't works. The option selected will be the default case:
{"id":"","livre":"empty_name"}
$.ajax({
url: "sent.php",
type: "post",
dataType: "json",
data: formdata,
success: function (id, data) {
switch (data.livre) {
case 'empty_name':
break;
}
});
Why? and how can be solved? thanks
If I understand correctly with the object up top being the JSON response, I think you want this...
{"id":"","livre":"empty_name"}
$.ajax({
url: "sent.php",
type: "post",
dataType: "json",
data: formdata,
success: function (data) {
var jsonId = data.id;
}
});
The data parameter of the success callback contains your response (in this case, JSON data). You access your JSON content there.
You just need to understand how the data is being returned. In this case data is the object containing all the fields. Your success callback would continue to look like success: function(data) the code you need to change is in the method block itself.
$.ajax({
url: "sent.php",
type: "post",
dataType: "json",
data: formdata,
success: function (data) {
var id = data.id; //ID lives in data.
switch (data.livre) {
}
});
Since you redefined the function, the switch will fail because in the example posted livre will reside in the id object and not in the data object.