i am trying to send ajax post request on two php pages which are 1. properties.php and 2. profile.php the code i am trying it sends ajax request on properties.php so how i can send the same post request on profile.php below is my code
index.php
<div id="div-second-dropdown"></div>
<div id="div-third-dropdown"></div>
ajax.js
$(document).ready(function () {
sendAjax();
});
function sendAjax() {
$.ajax({
url: 'properties.php',
type: 'post',
data: 'account-id=' + $('#account-dropdown').val(),
success: function (html) {
$('#div-second-dropdown').html(html);
$.ajax(
{
url: 'analytics.php',
type: 'post',
data: 'account-id=' + $('#account-dropdown').val(),
success: function (html) {
$('#div-third-dropdown').html(html);
}
}
);
}
});
}
properties.php
<?php
echo $_POST['accountid'];
?>
it display the post value on index.php in #div-second-dropdown.
profile.php
<?php
echo $_POST['accountid'];
?>
it don't display the post value on index.php in #div-third-dropdown
You can take advantage of jquery promise and playing around to execute the 2nd call if the first is successful.
function sendAjax(dest)
{
return $.ajax({
url: dest + '.php',
type: 'post',
data: 'account-id=' + $('#account-dropdown').val(),
success: function (html) {
$('#div-second-dropdown').html(html);
},
error: function(s)
{
return s;
}
});
}
$(document).ready(function () {
sendAjax('properties').then( function(){ sendAjax('profile')} );
});
Just do it:
$(document).ready(function() {
sendAjax();
});
function sendAjax()
{
$.ajax(
{
url: 'properties.php',
type: 'post',
data: 'account-id=' + $('#account-dropdown').val(),
success: function (html) {
$('#div-second-dropdown').html(html);
$.ajax(
{
url: 'profile.php',
type: 'post',
data: {'account-id': $('#account-dropdown').val(),
'profile-id': $('#profile-dropdown').val()},
success: function (html) {
$('#div-third-dropdown').html(html);
}
}
);
}
}
);
}
The first A in ajax stands for asyncronous, so the second request is made before the first one finishes. There might be session locking problem.
Try calling the second page ajax call in the success callback of first ajax call
$(document).ready(function () {
sendAjax();
});
function sendAjax(myUrl) {
$.ajax({
url: 'properties.php',
type: 'post',
data: 'account-id=' + $('#account-dropdown').val(),
success: function (html) {
$('#div-second-dropdown').html(html);
$.ajax({
url: 'profile.php',
type: 'post',
data: 'account-id=' + $('#account-dropdown').val(),
success: function (html) {
$('#div-second-dropdown').html(html);
}
});
}
});
}
Related
I have a very simple php page with a jquery function
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url: "test.php",
type: "POST",
data: {
myvar: 1,
},
success: function(result) {
console.log("it works");
}
});
});
</script>
My AJAX function is supposed to be triggered as soon as the document is ready. My test.php just shows my $_POST.
<?php
var_dump($_POST);
die();
Nothing is happening. I should go to test.php and see the var_dump. It works if I have a button and start the AJAX function on the click but not like that... Isn't possible to do so ?
Since on the Back-end part you expect $_POST the best you can do is to use
FormData API
jQuery(function($) {
// Your object
const data = {
myvar: 1,
foo: "foo",
};
// Create FormData from Object
const FD = new FormData();
Object.entries(data).forEach(([prop, val]) => FD.append(prop, val));
$.ajax({
url: "test.php",
type: "POST",
processData: false, // https://api.jquery.com/jquery.ajax/
data: FD, // pass the formData and enjoy with $_POST in PHP
success: function(result) {
console.log("it works", result);
}
});
});
I test your code work with datatype like :
ajax page:
$(document).ready(function() {
$.ajax({
url: "test.php",
type: "POST",
dataType: 'json', //add that line
data: {
myvar: 1,
},
success: function(result) {
console.log(result);
console.log(result['name']);
}
});
});
I have following code in my send.js:
function send_upload_file(){
var FD = new FormData();
FD.append( $this.name, $this.value);
$.ajax({
url: 'upload',
type: 'POST',
processData: false,
contentType: false,
cache: false,
data: FD,
success: function (data) {
console.log('ok');
},
error: function () {
alert("ERROR in upload");
}
});
}
Can I put two links inside url:? (e.g url: 'upload, send')
No. If you wanna send two AJAX requests, you need to do it twice. But the shorthand for this would be:
var success = function () {
console.log("OK");
};
$.post("upload", FD, success);
$.post("send", FD, success);
The above works asynchronously. If you want to do it synchronously, you need to do:
$.post("upload", FD, function () {
console.log("OK");
$.post("send", FD, function () {
console.log("Sent");
});
});
No you can't but try ajax after the first one success
$.ajax({
url: 'upload',
success: function (data) {
$.ajax({
url: 'send',
});
},
error: function () {
alert("ERROR in upload");
}
});
I have a PHP function where I pass a variable to and it returns an array containing a start date and end date.
<?php
function dateRangeTimeFrame($var1){
...
$date['startDate'] = $startDate;
$date['endDate'] = $endDate;
return $date;
}
?>
I am also trying to use this PHP function in an AJAX call so I can reuse the code. I have added this to the beginning of the page:
if (isset($_POST['dateFunction'])) {
print_r(dateRangeTimeFrame($_POST['dateFunction']));
}
My jQuery code is as follows:
$.ajax({
url: 'includes/functions.php',
type: 'post',
data: { "dateFunction": theDate},
success: function(response) {
console.log(response['startDate']);
console.log(response.startDate);
}
});
My issue is that I do not know how to access the response that the php function is returning.
Here is the response I am getting from the PHP function:
Array
(
[startDate] => 2015/01/17
[endDate] => 2015/02/16
)
How would I go about getting these 2 vars from the PHP response?
You need to use JSON. Your Javascript natively understands and can parse it
if (isset($_POST['dateFunction'])) {
echo json_encode(dateRangeTimeFrame($_POST['dateFunction']));
}
And your jQuery (note I added dataType)
$.ajax({
url: 'includes/functions.php',
dataType: 'json',
type: 'post',
data: { "dateFunction": theDate},
success: function(response) {
console.log(response.startDate);
}
});
<?php
function dateRangeTimeFrame($var1){
...
$date['startDate'] = $startDate;
$date['endDate'] = $endDate;
return json_encode($date);
}
?>
jQuery
$.ajax({
url: 'includes/functions.php',
type: 'post',
data: { "dateFunction": theDate},
dataType: "json",
success: function(response) {
console.log(response.startDate);
}
});
<?php
function dateRangeTimeFrame($var1) {
// ...
$date['startDate'] = $startDate;
$date['endDate'] = $endDate;
echo json_encode($date);
}
?>
Ajax
$.ajax({
url: 'includes/functions.php',
type: 'post',
data: { "dateFunction": theDate },
success: function(response) {
for (var i = 0; i < response.length; i++) {
alert(response[i].startDate);
}
}
});
I'm doing a (simple) ajax call on window load:
$(window).load(function () {
$.ajax({
url: someUrl,
type: "get",
dataType: "",
success: function(data) {
...........
How can I do something, for instance a function or event after this ajax proces is finished. The problem is I have to append something to the data recieved by the ajax call. But I can't append on window load because the data is still being processed.
Put it in the success handler of the ajax call:
$(window).load(function () {
$.ajax({
url: someUrl,
type: "get",
dataType: "",
success: function(data) {
// do whatever you want with data
}
});
});
You can call that in the success callback function of Ajax request
success: function(data) {
myFunction() ; // If function
$('#elementID').click() // If you want to trigger a click event
}
You may use the
`$(document).ready`
So it will be similar to this:
$(document).ready(function(){
$.ajax({
url: someUrl,
type: "get",
dataType: "",
success: function(data) {
//Your code should be here
After
success: function(data) {
for (var ii = 0; ii < data.length; ii++){
building html here
}
your code here
}
you want to enter in your functions within the success function for the ajax call but before the call is complete.
You could also do
$.ajax({
url: someUrl,
type: "get",
dataType: "",
context: document.body
}).done(function() {
// do whatever when is done
onCompleteFunction();
});
this should execute your request when page is just loaded.
$(function(){
$.ajax({
url: someUrl,
type: "get",
dataType: "",
success: function(data) {
// do whatever you want with data
}
});
});
or you can do:
$(function(){
$.ajax({
url: someUrl,
type: "get",
dataType: "",
complete: function(data) {
// do whatever you want with data
}
});
});
I have this function
function onclickRowRecord(recordID) {
$.ajax({
type: "POST",
url: '/file/to/post.to.php' ,
data: {recordID:recordID},
success: function(data) {
//how to post this to function howToPost(recordID) the recordID
}
});
}
function howToPost(recordID){
alert(recordID);
}
so how can I get the response from ajax success and post to the other function
If post you mean call the hotToPost function, then
...
success: function(data) {
howToPost(data.recordID); //or whatever
}
....
Hope this helps.
$.ajax({
type: "POST", url: '/file/to/post.to.php' , data: {recordID:recordID}, success: function(data) {
alert(recordID)
}
});
Does that work? Kinda new to jQuery