$(document).ready(function () {
$('#ajax1').click(function () {
var adMessagev = $('#adMessage').val();
var datastr = 'adMessage=' + adMessagev;
$.ajax({
type: "post",
data: datastr,
url: "adminchatServlet",
success: function ()
{
$('#tb1').dataTable().ajax.reload();
}
});
});
});
You can do something like this if you calling another function,
function func1() {
$.ajax({ ... }).done(func2);
}
And,
function func2(){
$.ajax({ ... });
}
Hope this helps.
Related
I am a bit stuck with the below issue, my code is similar to this:
function (){
var myVar = myFirstAjaxFunction()
$.ajax({
url: myUrl + myVar
....
})
}
My first ajax function is returning a string that I would like to use in the end of my function, but I do not know how to wait for the first function to be done.
I hope this is clear, thanks for your help!
Here is an example:
$.ajax({
success: function (data) {
var a = data;
$.ajax({
data: 'data=' + a,
success: function (data2) {
}
});
}
});
Or you pass callback :
function myFirstAjaxFunction (callback){
$.ajax({
success: function (data) {
callback(data);
}
});
}
and usage :
myFirstAjaxFunction(function(data){
//call 2nd ajax
});
$.post(url1,{ params:myVar}, function(result) {
$.post(url2,{params:result}, function(final_result) {
//use final_result here... :)
});
});
I think you should take help of callback function, please look at the below code. will help you.
function myFirstAjaxFunction(callback){
$.ajax({
url: "demo_test.txt",
success: function(result){
return callback('your-string');
}
});
}
function (){
myFirstAjaxFunction(function(myVar){
$.ajax({
url: myUrl + myVar
....
})
})
}
Return the promise from the ajax call. Example snippet for your reference
function (){
myFirstAjaxFunction()
}
function myFirstAjaxFunction() {
$.ajax({
url: '',
success: function(response) {
//response of the first api call
secondApiCall(responseoffirst);
}
});
}
function secondApiCall(value) {
$.ajax({
url: '',
success: function(response) {
console.log(response);
}
});
}
You can use Async/Await:
async function (){
var myVar = await $.ajax({
url: firstAjaxCallUrl
....
})
$.ajax({
url: myUrl + myVar
....
})
}
I made 3 navigation navbarheader.html, navbar.html and sidebar.html.Only navbarheader.html is loading but others is not loading. if I remove navbarheader.html navbar.html is loading.
<script type="text/javascript">
// let $ = requirejs('./jquery.min.js');
//mainWindow.$ = $;
$(document).ready(function () {
var navbarheaderData = localStorage.getItem('navbarheaderStorage');
if (navbarheaderData) {
$('#navbarheader1').html(navbarheaderData);
} else {
$.ajax({
url: 'navbarheader.html',
dataType: 'text',
success: function (data) {
localStorage.setItem('navbarheaderStorage', data);
$('#navbarheader1').html(data);
var navbarData = localStorage.getItem('navbarStorage');
if (navbarData) {
$('#navbar1').html(navbarData);
} else {
$.ajax({
url: 'navbar.html',
dataType: 'text',
success: function (data) {
localStorage.setItem('navbarStorage', data);
$('#navbar1').html(data);
var sidebarData = localStorage.getItem('sidebarStorage');
if (sidebarData) {
$('#sidebar1').html(sidebarData);
} else {
$.ajax({
url: 'sidebar.html',
dataType: 'text',
success: function (data) {
localStorage.setItem('sidebarStorage', data);
$('#sidebar1').html(data);
}
});
}
}
});
}
}
});
}
});
</script>
That's because you are using ajax requests, which stands for Asynchronous JavaScript and XML, but can be used with other datatypes (like text and therefore json), so the lines where you retrieve navbarheaderData, navbarData, and sidebarData are being executed immediately after you launch the requests, which would explain why only the first one would load (because there's only time for the first one to get a response before you start rendering the data).
What you really want is
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
url: 'navbarheader.html',
dataType: 'text',
success: function (data) {
localStorage.setItem('navbarheaderStorage', data);
//console.log(localStorage.getItem('navbarheaderStorage'));
var navbarheaderData = localStorage.getItem('navbarheaderStorage');
$('#navbarheader1').html(navbarheaderData);
}
});
$.ajax({
url: 'navbar.html',
dataType: 'text',
success: function (data) {
localStorage.setItem('navbarStorage', data);
//console.log(localStorage.getItem('navbarStorage'));
var navbarData = localStorage.getItem('navbarStorage');
$('#navbar1').html(navbarData);
}
});
$.ajax({
url: 'sidebar.html',
dataType: 'text',
success: function (data) {
localStorage.setItem('sidebarStorage', data);
//console.log(localStorage.getItem('sidebarStorage'));
var sidebarData = localStorage.getItem('sidebarStorage');
$('#sidebar1').html(sidebarData);
}
});
});
</script>
which could be simplified into the following if you don't need to use local storage.
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
url: 'navbarheader.html',
dataType: 'text',
success: function (data) {
$('#navbarheader1').html(data);
}
});
$.ajax({
url: 'navbar.html',
dataType: 'text',
success: function (data) {
$('#navbar1').html(data);
}
});
$.ajax({
url: 'sidebar.html',
dataType: 'text',
success: function (data) {
$('#sidebar1').html(data);
}
});
});
</script>
#Penguen replied and changed their above code.
I see that you don't want to send an ajax request unless you need to, which is functioning as some sort of weird caching mechanism. In this case the way you have written this, we only had navbarHeaderData cached and not the rest, then the page would fail to render properly. The following way not only protects against what I said, but is also faster than if the rewritten method works as if you were loading this for the first time and didn't have this cached, then the ajax requests would be sent out almost at the same time, rather than one by one.
<script type="text/javascript">
// let $ = requirejs('./jquery.min.js');
//mainWindow.$ = $;
$(document).ready(function () {
var navbarheaderData = localStorage.getItem('navbarheaderStorage');
if (navbarheaderData) {
$('#navbarheader1').html(navbarheaderData);
} else {
$.ajax({
url: 'navbarheader.html',
dataType: 'text',
success: function (data) {
localStorage.setItem('navbarheaderStorage', data);
$('#navbarheader1').html(data);
}
});
}
var navbarData = localStorage.getItem('navbarStorage');
if (navbarData) {
$('#navbar1').html(navbarData);
} else {
$.ajax({
url: 'navbar.html',
dataType: 'text',
success: function (data) {
localStorage.setItem('navbarStorage', data);
$('#navbar1').html(data);
}
});
}
var sidebarData = localStorage.getItem('sidebarStorage');
if (sidebarData) {
$('#sidebar1').html(sidebarData);
} else {
$.ajax({
url: 'sidebar.html',
dataType: 'text',
success: function (data) {
localStorage.setItem('sidebarStorage', data);
$('#sidebar1').html(data);
}
});
}
});
</script>
From what I see, I see 3 templates being fetched by making AJAX calls and then you are caching the template in your local storage and then use that to render the 3 sections of your web page.
Here is what you are doing it wrong. The render part of the code is written all together in the window.load and does not care about whether the AJAX call is complete or not. As your calls are asynchronous the code will not wait until the response template is fetched.
What you can do instead is have a common render function which each ajax call success method can call.
You are suffering from asynchronous issues, you should do the work inside each request. I dont think its related to local storage.
<script type="text/javascript">
$(document).ready(function () {
var navbarheaderData = localStorage.getItem('navbarheaderStorage');
if (navbarheaderData) {
$('#navbar1').html(data);
} else {
$.ajax({
url: 'navbarheader.html',
dataType: 'text',
success: function (data) {
$('#navbar1').html(data);
}
});
}
.... and so on...
});
I have 2 functions on a webpage, function A should be loaded at page generation (init), then after every 60 seconds OR when "Button1" is clicked and the Ajax Post is successful.
This is what I have so far:
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$(function A() {
$.ajax({
url: "url",
type: "post",
datatype: "html",
data: {var1: "123"}
},
complete: function() {
setTimeout(A, 60000);
}
});
});
$(document).ready(function() {
console.log( "ready!" );
$('#Button1').click(function() {
$.ajax({
url: "url",
type: "post",
datatype: "html",
data: {var2: "123"},
success: function(data){
console.log( "Function Successful!" );
A(); //CALL FUNCTION A - NOT WORKING
},
}); //End of AJAX
});
});
</script>
Function A alone works perfectly.
When I click on Button1 I got in the console a "Function Successful" message, BUT Function A is not being triggered.
How can I run function A when Button1 is clicked and Ajax is successful?
Define your function in same scope. Currently you have defined your function A in another scope.
$(document).ready(function() {
function A() {
$.ajax({
url: "url",
type: "post",
datatype: "html",
data: {var1: "123"},
// remove this},
complete: function() {
setTimeout(A, 60000);
}
});
}
$('#Button1').click(function() {
$.ajax({
url: "url",
type: "post",
datatype: "html",
data: {var2: "123"},
success: function(data){
console.log( "Function Successful!" );
A(); //CALL FUNCTION A
},
}); //End of AJAX
})
});
To have the function running once while initiated and then use it again later you could create an anonymous function that returns itself like this:
var A = (function A() {
// do the functions stuff
return A;
})();
When you want to run it again it can be called using A():
$(document).ready(function() {
var A = (function A() {
// stuff here
return A;
})();
$('#Button1').click(function() {
$.ajax({
url: "url",
success: function(data){
A(); //CALL FUNCTION A
}
});
})
});
I found this question which is almost exactly the same: Return value from nested function in Javascript
The problem is that the function is passed to jQuery's $.ajax function. Here's what i have:
function doSomething() {
// Do some stuff here
console.log(getCartInfo());
}
function getCartInfo() {
var url = blog_location + '?reqCartData=1';
$.ajax({
url: url,
type: 'get',
success: function(data) {
return data; <------------- This
}
});
}
I need to return data to the doSomething function, if that makes sense. I tried to return the entire $.ajax function but that returned the whole object. Any ideas?
Send a callback function:
function getCartInfo(onSuccess) {
var url = blog_location + '?reqCartData=1';
$.ajax({
url: url,
type: 'get',
success: function(data) {
onSuccess(data);
}
});
}
getCartInfo(function(data) {
console.log(data);
});
try this
function doSomething(date) {
........your data
}
function getCartInfo() {
var url = blog_location + '?reqCartData=1';
$.ajax({
url: url,
type: 'get',
success: function(data) {
doSomething(data);
}
});
}
I'm trying to do a for loop 10 times and i wrote setInterval to call my function again but it does not work. My for loop turns only ten. So how can i do?
function randomThumbNews() {
for(var i=0;i<10;i++){
$.ajax({
type: "get", url: "Home/Oku", data: {},
success: function (data) {
$("#thumbNews_" + i).html(data);
}
});
}
}
setInterval(randomThumbNews, 3000);
Try something like:
$.ajax({
type: "get", url: "Home/Oku", data: {},
context: i, /* NEW - this value comes to your success callback as 'this' */
success: function (data) {
$("#thumbNews_" + this).html(data);
}
});
The problem is this -- when
function (data) {
$("#thumbNews_" + i).html(data);
}
Is called the loop has already finshed so i will always be 10.
You will only see results posted to one of your <div>s
This will fix it since function parameters don't have closure:
function ajaxAndSet(counter)
{
$.ajax({
type: "get",
url: "Home/Oku",
data: {},
success: function (data)
{
$("#thumbNews_" + counter).html(data);
}
});
)
function randomThumbNews()
{
for(var i=0;i<10;i++)
{
ajaxAndSet(i);
}
}
setInterval(randomThumbNews, 3000);