Load and then append on AJAX Success - javascript

I'm using AJAX to send inputted data to the database which I've managed to achieve. Where I'm struggling is on the success parameter. I'm trying to load and then append a PHP file once the initial AJAX call is successfully completed.
var data = $("#form_write_post").serializeArray()
$.ajax({
type: "POST",
url: $("#form_write_post").attr("action"),
data: data,
async: false,
success: $.get("test.php", function(data) {
$('ul.timeline').append(data);
});
});
I managed to append JavaScript data but I need to be able to get other data from the database.
Thanks

remove $.get(){} in success
$.ajax({
type: "POST",
url: 'test.php', //if ur action is test.php
data: data,
async: false,
success: function(data) {
$('ul.timeline').append(data);
});
});

Related

getting entire json data from API with AJAX

With my AJAX call, I want to get the json data entirely.
For example www.abc.com/api/3 gives {"information":.... json data with many levels...}}
I want to store this data in variable.So I try this:
$.ajax({
async: false,
type: 'GET',
dataType: 'json',
url: url,
data: data,
success: function(data) {
x=data;// It's wrong, but I don't know how to put whole json into x
}
})
You can use $.ajax() as a Promise:
$.ajax({
type: 'GET',
url: url,
}).then((data) => {
console.log(data);
});

Why is my JQuery variable not sending to php?

I have a variable which contains data, i'm then using a ajax function to send this variable data to this php file. I'm slightly unsure I can store this variable into php and echo it out. This is the code that I currently have...
var data = 1
// Sending this data via ajax to php file/
$.ajax({
type: 'post',
cache: false ,
url: 'function.php',
data: data,
success: function(data) {
alert ( data );
}
});
This is my php code
$noteone = $_POST['data'];
echo $noteone;
Any help would greatly be appreciated
data of your ajax call should be like below. Hope it will solve your problem.
data: { "data": data }
You also need to set the data type:
var data = 1
// Sending this data via ajax to php file/
$.ajax({
type: 'post',
cache: false ,
url: 'function.php',
data: { "data": data },
dataType: "json", // <---- THIS ONE
success: function(data) {
alert ( data );
}
});
Try this :
var data = 1
// Sending this data via ajax to php file/
$.ajax({
type: 'post',
cache: false ,
url: 'function.php',
data: JSON.stringify(data),
contentType: "application/json",
success: function(data) {
alert ( data );
}
});
PHP requires data to be submitted in key=value format when building $_POST/$_GET. You didn't do that. You only submitted value, so PHP has no key to populate $_POST with. You need to have:
data: { "whatever_you_want": data }
which becomes
$_POST['whatever_you_want']

Send data from a javascript ajax function to a jsp

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) {
...
}
});

How to pass data using jQuery/ Ajax to a URL

How to pass the fetched data using $.get() from a URL to a particular URL with query_string that can be retrieved using $_GET() in PHP. I'm using following but not working. I want to pass the fetched data into following parameter http://example.com/data?data=FETECHED_DATA
<?php
$ip_address=$_SERVER['REMOTE_ADDR'];
echo '<script>
$.get( "http://ipinfo.io/'.$ip_address.'/org", function( data ) {
$.ajax({
type: "GET",
url: "http://example.com/data",
data: data,
success: success,
dataType: dataType
});
});
</script>';?>
Well, don't recommended PHP to fetch and send data
I believe this will do what you want
<?php
$ip_address=$_SERVER['REMOTE_ADDR'];
echo '<script>
$.get("http://ipinfo.io/'.$ip_address.'/org", function(data) {
$.ajax({
type: "GET",
url: "http://example.com/data",
data: {data : data},
success: success,
dataType: dataType
});
});
</script>';?>
the only change is data: data changed to data: {data: data}
that's a lot of data :p
see this cut down mock up, http://jsfiddle.net/cm8o5dk8/ if you have a decent browser that can show you the network "usage" you'll see that the mockup fails trying to GET http://example.com/data?data=AS15169+Google+Inc.%0A - the %0A comes back from ipinfo.io
Thanks it worked
$.get("http://ipinfo.io/8.8.8.8/org", function(data) {
$.ajax({
type: "GET",
url: "http://example.com/data",
data: {data : data},
success: function() {},
dataType: 'json'
});
});

How to get json data coming from ajax and show it prefilled in input box

Following is the code that Ii have used to get the response in json.
but when I add alert alert(response.Subject); it returns "undefined"
HTML:
<input type="text" id="subject" value='Subject'>
Javascript:
$.ajax({
url: "/ebays/prefilledcontentajax",
type: "POST",
cache: false,
async: true,
data: {
Type: $("#Type").val(),
},
success: function (response) {
console.log(response); // it show the json that response returns. I want to show in the input box prefilled with the data that response return
}
});
please help me out.
You can use val to set value in the textbox
$('#subject').val(response[0].Subject);
Also, you might want to change the ajax call:
$.ajax({
url: "/ebays/prefilledcontentajax",
type: "POST",
cache: false,
async: true,
data: {
Type: $("#Type").val(),
},
dataType: "json",
// ^^^^^^^^^^^^^
success: function (response) {
// response is JSON
$('#subject').val(response[0].Subject);
}
});
val
Set the value of each element in the set of matched elements.
http://api.jquery.com/val/#val2
ajax
Perform an asynchronous HTTP (Ajax) request.
http://api.jquery.com/jQuery.ajax/
It really depends the construction of your JSON object, but standart is responseText that you parse with JS
maybe you try to get the response text or response JSON
$.ajax({
url: "/ebays/prefilledcontentajax",
type: "POST",
cache: false,
async: true,
data: {
Type: $("#Type").val(),
},
success: function (response) {
console.log(JSON.parse(response.responseText));
//or
console.log(JSON.parse(response.responseJSON));
}
});
you can write like this:
$('#subject').val(response.Subject);
I thinks it's really easy. Just add:
$('#subject').val(response.Subject);
in your success handler.

Categories

Resources