We Keep Coding

Use variable from Ajax response

I have two files:
example.html:
<div class="my-div"></div>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url: "example1.html",
type: "get",
success: function(response) {
$(".my-div").html(response);
}
});
$(document).on("click", "button", function() {
console.log(alpha); // Should print "data",
});
});
</script>
example1.html:
<button></button>
<script type="text/javascript">
$(document).ready(function() {
var myDropzone = new Dropzone("", {
success: function(file, response) {
const alpha = "data";
}
});
});
</script>
In example.html, I need console.log(alpha) to output "data". I make an Ajax request to example1.html, and update the contents of my div with the returned html. The constant alpha isn't useable until new Dropzone() succeeds. How can I make this code work?

One option is to make your alpha variable global.
You declared your alpha variable inside success function so you can only use that variable inside it.
<button></button>
<script type="text/javascript">
const alpha; /* Init it here */
$(document).ready(function() {
var myDropzone = new Dropzone("", {
success: function(file, response) {
alpha = "data"; /* Assign the value here */
}
});
});
</script>
Now you can access it as
$(document).on("click", "button", function() {
console.log(alpha); // Should print "data",
});

Only run ajax again if last is fully loaded and success

I got a problem while scrolling down and load content into my page.
The ajax executions load too fast, so the second, third and so... does not get correct information from the first ajax call, which are loaded into the DOM.
How do I make it, so the script only run if last ajax call is done and a success.
It should skip every scrolling up and down until the last ajax call is done. And then the ajax is allow to be executed.
And then over and over again until there no more to load though ajax.
Here is my jQuery script.
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
if ($(window).scrollTop() <= $(".wrapper_ac").offset().top + $(".wrapper_ac").height()) {
$(document).ajaxStart(function () {
var ajaxURLvalue = '../../modules/language_text_loading/load_content.php';
var langID = 'x';
var onID = 'x';
var setLimit = 'x';
var setIn = 'after';
var theme = 'x';
var setInWhere = 'x';
var conID = 'x';
loadInstant(ajaxURLvalue, langID, onID, setLimit, setIn, theme, setInWhere, conID);
});
}
});
});
</script>
This is my function.
function loadInstant(ajaxURLvalue, langID, onID, setLimit, setIn, theme, setInWhere, conID) {
var temp_s = $(".ltlID:last").attr("id");
var split_ltlID = temp_s.split(':');
var ltlID = split_ltlID[0];
var acContentBoxID = split_ltlID[1];
var dataString = {
action: 'load',
last_ltlID: ltlID,
//sharedID:acContentBoxID_sharedID,
langID:langID,
setInWhere: setInWhere,
onID:onID,
theme:theme,
conID:conID
};
$.ajax({
type: "POST",
url: ajaxURLvalue,
data: dataString,
cache: false,
success: function(html){
$("#accordionContent"+acContentBoxID+":last").after(html);
});
};
Thank you for your help.

Well what I would do is store the ajax function into a global variable like this:
global_variable = $.ajax({
type: "POST",
url: ajaxURLvalue,
data: dataString,
cache: false,
success: function(html){
$("#accordionContent"+acContentBoxID+":last").after(html);
});
and before the ajax call check if the variable is tru like this:
if(global_variable){
return false;
}
this will stop any ajax call to be called before the one running is over. I hope it helps you!

Re-Run a Ajax script?

If I have a script like below that's ran to load a table with data injected into it from an external PHP file on to the page.
<script>
$(document).ready(function(){
var response = '';
$.ajax({ type: "GET",
url: "Records.php",
success : function(text)
{
response = text;
}
});
alert(response);
});
</script>
I have another script down below where a user can add records to the database.
<script id="sosurce" language="javascript" type="text/javascript">
$("#newitemadd").click(function(){
$('#New').modal('show');
$("#insertResults").click(function(){
var getname = $('#getname').val();
var getquant = $('#getquant').val();
var getprice = $('#getprice').val();
var getdesc = $('#getdesc').val();
$.ajax({
url: 'api2.php',
data: "name="+getname+"&quantity="+getquant+"&price="+getprice+"&description="+getdesc,
success: function(data)
{ $('#New').modal('hide');
$("#success").html(data);
$('#success').slideDown().delay(3000).slideUp().reload
},
error: function() {
$("#failure").alert('show');
}
});
});
});
</script>
It works fully as intended but, how can I get the first script to Re-Run so the table that's inserted onto the page is refreshed to show the new results that were just added?

you can do like this .
<script>
var renderTable = function() {
var response = '';
$.ajax({ type: "GET",
url: "Records.php",
success : function(text)
{
response = text;
}
});
alert(response);
}
// Call function onload
jQuery(function($){
renderTable();
$(".refreshBtn").click(function(){
renderTable();
})
});
</script>

Move first code into an function like
<script>
$(document).ready(LoadData);
function LoadData() {
var response = '';
$.ajax({
type: "GET",
url: "Records.php",
success : function(text) {
response = text;
}
});
alert(response);
};
</script>
And call this function from other function, example does it on success
<script id="sosurce" language="javascript" type="text/javascript">
$("#newitemadd").click(function() {
$('#New').modal('show');
$("#insertResults").click(function() {
var getname = $('#getname').val(),
getquant = $('#getquant').val(),
getprice = $('#getprice').val(),
getdesc = $('#getdesc').val();
$.ajax({
url: 'api2.php',
data:
"name="+getname+"&quantity="+getquant+"&price="+getprice+"&description="+getdesc,
success: function(data) {
$('#New').modal('hide');
$("#success").html(data);
$('#success').slideDown().delay(3000).slideUp().reload
// Call load data again to refresh the table
LoadData();
},
error: function() {
$("#failure").alert('show');
}
});
});
});
</script>

Getting variable from success function ajax

I have a variable in the success part of ajax and I want to reuse it in another function (which executed every 3 seconds), I tried to declare it global, but it does not work; Tdata is not known.
I know that $.ajax is an asynchronous function and I saw some posts similar to mine but it did not help me.
Help me please. Thank you.
This is a part of my code:
<script language='Javascript'>
var Tdata;
$.ajax({
method : "GET",
url: "load-data.php",
success : function(data){
Tdata=jQuery.parseJSON(data);
////
}
});
window.setInterval(function() {
$(window).load(function() {
$.each(Tdata, function(variable) {
/////////////
});
});
}, 3000);
</script>

Why not wait until the AJAX request has successfully returned data before starting your interval? Since any executions of the interval's function aren't going to do anything (due to no data) before that point waiting isn't going to change the way the page would function in any way.
$.ajax({
method: "GET",
url: "load-data.php",
dataType: "json"
success: function(data) {
var Tdata = data;
// do some more stuff with the response of the AJAX request
var interval = setInterval(function() {
$.each(Tdata, function(variable) {
// do something with variable
});
}, 3000);
}
});
Note that I've removed the binding of the load event to the window every time the interval runs because doing so really doesn't seem to make any sense. I've also added a dataType property with a value of json to the options object passed to $.ajax() so you don't have to parse the response as JSON yourself.

try this,
<script language='Javascript'>
var Tdata;
$.ajax({
method : "GET",
url: "load-data.php",
success : function(data){
Tdata=jQuery.parseJSON(data);
////
}
});
$(window).load(function() {
window.setInterval(function() {
$.each(Tdata, function(variable) {
/////////////
});
}, 3000);
});
</script>

Function that uses the variable from AJAX call should be called from inside AJAX success, like this:
$.ajax({
method : "GET",
url: "load-data.php",
success : function(data){
Tdata=jQuery.parseJSON(data);
myFunction();
}
});
function myFunction(){
var interval = setInterval(function() {
$.each(Tdata, function(variable) {
/////////////
});
}, 3000);
}

is callback tdataAjax function ajax success method run; #param parseJSON
var tdataAjax = function(callback) {
$.ajax({
method : "GET",
url: "load-data.php",
success : function(data){
var Tdata=jQuery.parseJSON(data);
setInterval(function() {
callback(Tdata);
}, 3000);
}
});
};
is Callback function #param data in tdataAjax function
tdataAjax(function(data) {
$.each(data, function(variable) {
// code
});
});
tdataAjax ++ :)
tdataAjax(function(data) {
$.each(data, function(variable) {
// cla bla
});
});

Function Doesn't Work When Called Within Object

I have the following code:
// auto_suggest.js
function AutoSuggest(textboxElem, resultElem, url) {
this.textboxElem = textboxElem;
this.resultElem = resultElem;
this.url = url;
this.registerEvent();
}
AutoSuggest.prototype = {
registerEvent: function() {
this.textboxElem.onkeyup = this.getSuggestions;
},
getSuggestions: function() {
// This doesn't work either: this.loadResponse("some data");
$.get(this.url, { text: this.textboxElem.value }, this.loadResponse);
},
loadResponse: function(data) {
// Not called
this.resultElem.innerHTML = data;
}
};
// suggest.html
<script src="jquery-1.6.1.js" type="text/javascript"></script>
<script src="auto_suggest.js" type="text/javascript"></script>
<script>
$(function() {
var suggest = new AutoSuggest(document.getElementById("suggest"),
document.getElementById("result"),
"result.txt");
// This DOES work: suggest.loadResponse("123");
});
</script>
<input type="text" id="suggest" /><br>
<div id="result"></div>
The function loadResponse refuses to be called from within the object, but from the outside it is fine. What could be the problem?

The AJAX callback (AutoSuggest.loadResponse) is, by default, passed the jqXHR object as its context (this value). You need to override this by passing the context option to $.ajax. Replace your $.get function with this:
$.ajax({
url: this.url,
type: 'GET',
data: { text: this.textboxElem.value },
success: this.loadResponse,
context: this
});
This makes jQuery set this to the correct value.

The code
this.textboxElem.onkeyup = this.getSuggestions;
should be
var t = this;
this.textboxElem.onkeyup = function() {
t.getSuggestions();
}