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()
Related
Data is not display after insert through bootstrap modal with ajax in php mysqli.
jQuery Ajax code:
$(document).ready(function() {
fetch_data();
function fetch_data() {
var action = "fetch";
$.ajax({
url: 'action.php',
method: 'post',
data: {action: action},
success: function (data) {
$("#all_table_data").html(data);
}
});
}
});
function addData() {
var formData = new FormData($('#employee_insert_form')[0]);
formData.append('action', 'add');
$.ajax({
method: 'post',
url: 'action.php',
data: formData,
processData: false,
contentType: false,
cache: false,
success: function (response) {
$("#all_table_data").html(response);
$('#empInsert').modal('hide');
fetch_data();
}
});
}
Your PHP code never return anything to your view. So try to echo result of select * from tbl_employee after the insertion
I have ajax call function which have parameter function and it's looks like this
function selectedLang(func) {
let selected = selectLang.options[selectLang.selectedIndex].value;
$.ajax({
url: 'lang.php',
type: "POST",
dataType: 'json',
data: { language: selected },
success: function (data) {
// call here displayData function with parameter
func(data);
}
});
}
inside success i want to call function displayData with parameter data
function displayData(data) {
// some data
}
selectedLang(displayData);
Right now i'm getting an error that func is not a function
It looks like it is working.
https://jsfiddle.net/bpomehv5/
Check out this fiddle
function selectedLang(func) {
$.ajax({
url: 'https://randomuser.me/api',
type: "GET",
dataType: 'json',
success: function (data) {
// call here displayData function with parameter
func(data);
}
});
}
function showIt (data) {
console.log(data);
}
selectedLang(showIt);
Once again I've been beating my head against the wall, trying to pull this part of returned data from ajax to a variable outside the function.
When I return the value it always comes up undefined when I alert() inside it shows the proper values.
function getItemInfo(itemHashPass) {
$.ajax({
url: 'index.php//Welcome/getItem', //This is the current doc
type: "POST",
data: 'iHash='+itemHashPass,
dataType: "json",
async: false,
success: function(data){
return data.Response.data.inventoryItem.itemName;
}
});
}
I've also tried
function getItemInfo(itemHashPass) {
var tmp = null;
$.ajax({
url: 'index.php//Welcome/getItem', //This is the current doc
type: "POST",
data: 'iHash='+itemHashPass,
dataType: "json",
async: false,
success: function(data){
tmp = data.Response.data.inventoryItem.itemName;
}
});
return tmp;
}
Like Jonathan said you should write your business logic in the callback or you can try Deferred syntax. In this case it will looks like
function yourBusinnesLogicFunction() {
...
getItemInfo("password_hash_value").done(
function(data){
alert(data.Response.data.inventoryItem.itemName);
}
)
}
function getItemInfo(itemHashPass) {
var tmp = null;
return $.ajax({
url: 'index.php//Welcome/getItem', //This is the current doc
type: "POST",
data: 'iHash='+itemHashPass,
dataType: "json",
async: false,
})
}
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 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.