Develop Reference

how to call function inside ajax call

I am trying to call function within ajax success block which is not happening.
Below I have given code which i was tried.
$("#form-data").submit(function(e) {
e.preventDefault();
var me = this;
$.ajax({
type: "POST",
url: "{{route('storeData.store')}}",
data: fd,
processData: false,
contentType: false,
success: function(data) {
me.callFunc(); // here i need to call that fucntion once data is stored in database
}
});
})
$(document).ready(function(e) { // here i need to call that fucntion when page loads
this.callFunc();
})
function callFunc() { // this is the function needs to call
$.ajax({
type: "GET",
url: "{{route('getData.get')}}",
success: function(data) {
console.log("output data", data)
}
})
}

Call your "callFunc()" without me / this as per below.
$("#form-data").submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "{{route('storeData.store')}}",
data: fd,
processData: false,
contentType: false,
success: function(data) {
callFunc(); // here i need to call that fucntion once data is stored in database
}
});
})
$(document).ready(function(e) { // here i need to call that fucntion when page loads
callFunc();
})
function callFunc() { // this is the function needs to call
$.ajax({
type: "GET",
url: "{{route('getData.get')}}",
success: function(data) {
console.log("output data", data)
}
})
}

You don't have to use this
$(document).ready(function (e) {
function callFunc() { // this is the function needs to call
$.ajax({
type: "GET",
url: "{{route('getData.get')}}",
success: function (data) {
console.log("output data", data)
}
})
}
$("#form-data").submit(function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "{{route('storeData.store')}}",
data: fd,
processData: false,
contentType: false,
success: function (data) {
callFunc(); // here i need to call that fucntion once data is stored in database
}
});
});
callFunc(); // here i need to call that fucntion when page loads
});

Your function is globally available so just call it like any other javascript function inside any other function
callFunc()

How to pass javascript variable into php function on an Ajax url?

I am trying to insert the value of parent into the "getFaculties()" function when i call the function using Ajax.
function ajaxfunction(parent)
{
$.ajax({
type: 'GET',
url: 'Connection.php?getFaculties('+parent')',
success: function(data) {
$("#selFaculty").html(data);
}
});
}

please use a proper way to pass data from ajax to php
function ajaxfunction(parent)
{
$.ajax({
type: 'GET',
url: 'Connection.php',
data: {method:'getFaculties', value:parent}
success: function(data) {
$("#selFaculty").html(data);
}
});
}

The correct syntax is
url: 'Connection.php?faculties='+getFaculties(parent),
Since that is query parameter, given a name to it.

use like this function Declaration was wrong
function ajaxfunction(parent)
{
$.ajax({
type: 'GET',
url: 'Connection.php?getFaculties='+getFaculties(parent),
success: function(data) {
$("#selFaculty").html(data);
}
});
}

Call your function first and get return value in variable and then send your ajax request.
function ajaxfunction(parent)
{
var data_in = getFaculties(parent);
$.ajax({
type: 'GET',
url: 'Connection.php?getFaculties='+data_in,
success: function(data) {
$("#selFaculty").html(data);
}
});
}

call and end ajax function

When I call ajax function such
$(save_Data()).ajaxStop(function()
{
new_Form(code);
}
function save_Data()
{
// here send data to php and save it
}
Now, I call another ajax function such
$(get_Data()).ajaxStop(function()
{
// doing some thing
}
function get_Data()
{
$.ajax
({
type: 'POST',
url: 'insert_Stock.php',
data: { insert_Data : inserted_Data },
dataType: 'json',
success:function(data)
{
// doing some thing such call another function to control on form
}
});
}
When I call save_Data function already new_Form function execute, after that when I call get_Data function the new_Form function execute automatically.
Why new_Form function execute?

If I understood you this is what you want.
function doSomething(){
//your code here if success
}
function doSomethingElse(){
//your code here if error
}
function finallyDoSomethingElse(){
//your code here no matter what is the result of post
}
$.ajax({
type: 'POST',
url: 'insert_Stock.php',
data: { insert_Data : inserted_Data },
dataType: 'json',
success: doSomething,
error: doSomethingElse,
complete: finallyDoSomethingElse
});

How to set a conditional delay for making a request?

I have an array of symbols as shown below.
For each element of the array I am making an Ajax request.
var symbols = ["SSS", "SEE"]
$(document).ready(function () {
$.each(symbols, function (index, value) {
loadXMLDoc(value);
});
});
function loadXMLDoc(value) {
$.ajax({
type: 'POST',
url: 'https://ganaga/aaaa/sss',
success: function (data) {}
}
In the browser console, I see many XHR requests under pending state.
Is it possible to make the next Ajax request only when the response has been obtained for the previous array element?

var symbols = ["SSS", "SEE"]
$(document).ready(function () {
loadXMLDoc(symbols);
});
function loadXMLDoc(symbols) {
if(symbols[0]) {
$.ajax({
type: 'POST',
url: 'https://ganaga/aaaa/sss',
success: function(data){ loadXMLDoc(symbols.slice(1)) }
});
}
}
There is no value being used in loadXMLDoc in your question, I suppose you want:
url: 'https://ganaga/aaaa/'+ symbols[0],
Also, I would rename function to loadXMLDocs.

I would just use a little recursion:
var symbols = ["SSS", "SEE"]
$(document).ready(function () {
loadXMLDoc(0);
});
function loadXMLDoc(idx) {
value = symbols[idx];
if (value) {
$.ajax({
type: 'POST',
url: 'https://ganaga/aaaa/' + value,
success: function (data) {
//...
loadXMLDoc(idx+1);
}
});
}
}

Invoke the next AJAX call in the callback function.
function loadXMLDoc(n) {
var value = symbols[n];
$.ajax({
type: 'POST',
url: 'https://ganaga/aaaa/sss',
success: function (data) {
if (n < symbols.length-1) {
loadXMLDoc(n+1);
}
}
}
}
Start it with:
loadXMLDoc(0);

How to write a jQuery function with a callback that you can pass Params to?

I have the following function:
function loadProjects(pID) {
$.ajax({
url: myURL,
success: function (dataJS) {###Run any supplied call back here####}
});
}
I call this function like so loadProjects(1);
Issue is I want to be able to define a callBack function after success, and I'd like to include it when I do loadProjects(1, pong(12)). I want to be able to supply params to the callback.
How can I have a function accept a callback?
How can I pass a callback to that function?
Something like
function loadProjects(pID, callback) {
$.ajax({
url: myURL,
success: function (dataJS) {###Run any supplied call back here####}
});
}
Where I could then call:
loadProjects(22, pong(12))
Problem is when I try this, pong(12) is running immediately, and not later when called in the loadProjects function?
Ideas? Thanks

try this:
function loadProjects(pID, callback) {
$.ajax({
url: myURL,
success: function (dataJS) {
if ($.isFunction(callback))
callback();
}
});
}
loadProjects(1, function() { pong(12); });
or:
function loadProjects(pID, callback, value) {
$.ajax({
url: myURL,
success: function (dataJS) {
if ($.isFunction(callback)) {
if (value) {
callback(value);
}else{
callback();
}
}
}
});
}
loadProjects(1, pong, 12);

loadProjects(22, function(){pong(12);});

Try something like this:
var loadProjects = (function(pID, callback) {
var params = { "property" : "value" }
$.ajax({
url: myURL,
success: function (dataJS) { callback(params); }
});
})
loadProjects(22, function(p){ console.log(p); });

function loadProjects(pID, callback) {
var callbackArgs = arguments;
callbackArgs.shift();
callbackArgs.shift();
$.ajax({
url: myURL,
success: function (dataJS) {
// Null or this can be used depending on desired behavaiour
// See https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/function/apply
callback.apply(null, callbackArgs);
}
});
}
Example usage:
loadProjects(22, pong, 12);
loadProjects(22, pong, 12, 'foo', 'bar');
12, foo, and bar are all passed to the pong callback.