We Keep Coding

Accessing a JS variable from a different <script> block

I need to access a js variable declared in one block of a html page into another block of the same html page just so I can stop a ajax call that is being made, but I don't know how can I access a variable that was declared into another block. I can't merge the two blocks, everything else is on the table.
<script>
$(function() {
var term = new Terminal('#input-line .cmdline', '#container output');
term.init();
});
</script>
<script>
term.ajaxHandler.abort();//but how can I access the variable term from the block above,this will be inside a button later
</script>
Thanks in advance

The way your code example is described, it's not possible to reuse that variable. Because it is not bound to the window object, it's bound to the function that is self-executed. It's an example of a "safe" way of libraries not intervening with your own code.
You can however, since I guess by the syntax it's jQuery, hook into the jQuery ajax handling. Based on your requirements, to stop an ajax call, you need to listen to all ajax requests.
You could take a look at the jQuery ajax hooks, https://api.jquery.com/category/ajax/.
You could end up with something like:
$(document).ajaxSend(function(event, xhr, settings){
if (settings.url === "/your/url/to/abort") {
xhr.abort();
}
});

just declare var term above the function declaration
var term
function test1(){
term = 'hello there'
test2()
}
function test2(){
console.log(term)
}
test1()

ok, I managed to solve, basically I created a function only to abort the ajax request like this:
this.abortAjax = () => {
requestHandler.abort();
}
and then accessing it within terminal.js itself using the term object that was instantiated beforehand. After working around the code I was able to keep everything inside the terminal script and not splitted in the two parts, getting something like this:
function ShowLoadingScreen () {
var customElement = $("<div>", {
"class" : "btn btn-danger btn-lg",
"text" : "Abort",
"onclick": "term.abortAjax()"
});
$.LoadingOverlay("show", {
//image : "/static/loading.gif",
background : "rgba(204, 187, 0, 0.8)",
imageAnimation : "rotate_right",
//imageAutoResize : true,
text : "Loading...",
custom : customElement
});
}
function request (command) {
...
requestHandler = $.ajax({
url: _url,
beforeSend: function () { ShowLoadingScreen(); }, // <Show OverLay
type: 'GET',
dataType: 'json',
success: function (response) {
...
},
complete: function () { HideLoadingScreen(); } //<Hide Overlay
}).fail(function (jqXHR, textStatus, error) {
...
});
ShowLoadingScreen();
}
Thanks, everyone.

How to make jquery find the row and fire an action on success (using "this")

This is a jquery code that performs a database update when the user modifies a cell:
$( document ).ready(function() {
$('tr').on('blur', 'td[contenteditable]', function() {
$.post("ajax/modQtyModels", {
modelId: $(this).closest('tr').children('td.idmodel').text(),
qty: $(this).closest('tr').children('td.editQty').text(),
ajax: true,
success: function(data) {
$(this).closest('tr').children('td.editQty').addClass("success");
}
});
});
});
In the "success" part I want it to just change the class (to change its color as it uses bootstrap) of that cell to show the user that their data changed successfully but it doesn't seem to notice that it has to change the color. I've tried everything on that line but I guess the line is not the problem. Other actions like an alert work well so I suspect of the $(this).

In the success callback you are dealing with another function, so the scope is no longer the one of your blur event callback, so this keyword will point out to another object and not your jQuery element.
So you need to save the this value in another variable and refer to your element with this neww variable, inside the success callback.
(document).ready(function() {
$('tr').on('blur', 'td[contenteditable]', function() {
var tr = $(this);
$.post("ajax/modQtyModels", {
modelId: $(this).closest('tr').children('td.idmodel').text(),
qty: $(this).closest('tr').children('td.editQty').text(),
ajax: true,
success: function(data) {
tr.closest('tr').children('td.editQty').addClass("success");
}
});
});
});

this inside of success: function(data) { does not refer to this inside of $('tr').on('blur'
You can save the value of this (typically in a variable called that), so that when you are in that new function, you can do:
$( document ).ready(function() {
$('tr').on('blur', 'td[contenteditable]', function() {
var that = this;
$.post("ajax/modQtyModels", {
modelId: $(this).closest('tr').children('td.idmodel').text(),
qty: $(this).closest('tr').children('td.editQty').text(),
ajax: true,
success: function(data) {
$(that).closest('tr').children('td.editQty').addClass("success");
}
});
});
});

Ideas for mutiple ajax responds for remove loading flag in complete on click

I have this click handler which has an ajax call to get back some data and I set a flag in before send and clears it in complete. The problem that I am facing is that. When I tired to click this twice, the process goes like the following. I wondered what would be a better way to solve this issue. I thought about doing $.active to find out the numbers of ajax calls that's active but that doesn't seem like that right way
1 remove initiated, set flag,
2 remove initiated, set flag.
1 remove response completed, reload and clear the flag.
2 remove response completed, reload (Since the flag was clear by the 1 response, it adds the default which I don't want ).
$(document).on('click', '#remove', function () {
$.ajax({
type: 'POST',
url: '/remove'
data: {
fruits: $(this).val()
},
beforeSend: function () {
$('#fruit-table').addClass('loading');
},
success: function (data) {
loadFruitTable(data);
},
complete: function () {
$('#fruit-table').removeClass('loading');
}
};
loadFruitTable = function (data) {
$('#fruit-table').html(data);
if ($('.processing').length) {
preLoadDefault();
}
};

Just an idea: disable the remove button on click and enable it in the complete-part?

You could use .ajaxStart to show the loading object and .ajaxComplete to handle the event of all data being loaded:
$( document ).ajaxStart(function() {
$( ".log" ).text( "Triggered ajaxStart handler." );
});
$( document ).ajaxComplete(function() {
$( ".log" ).text( "Triggered ajaxComplete handler." );
});
http://api.jquery.com/ajaxComplete/

$(document).on('click', '#remove', function () {
var $fruitTable = $('#fruit-table');
if ($fruitTable.hasClass('loading')) {
return;
}
$fruitTable.addClass('loading');
$.ajax({
type: 'POST',
url: '/remove'
data: {
fruits: $(this).val()
})
.then(loadFruitTable, function () {})
.then(reinitFruitTableStatus);
};
var reinitFruitTableStatus = function () {
$('#fruit-table').removeClass('loading');
};
loadFruitTable = function (data) {
$('#fruit-table').html(data);
if ($('.processing').length) {
preLoadDefault();
}
};
If the element #fruit-table is not dynamically created, you should store it once in a variable available in the whole code above.

Actually... Instead of adding a class, I added a count which increments in beforeSend and decrement in complete. So that way, i can always check if there is any process that's active.

Use jQuery to check if links still work

I made a quick function to check every link on the page using AJAX to see if they still work. This seems to be working, but it's adding the success and error class to every one. How can I get the error callback function to only throw if the AJAX response is 404?
$('li').each(function(){
$(this).children('a').each(function(){
$.ajax({
url:$(this).attr('src'),
success:$(this).addClass('success'),
error:$(this).addClass('error')
})
})
});

the success and error parameters expect functions.
You'd need to wrap the code in an anonymous function:
//there's no need to complicate things, use one call to each()
$('li > a').each(function () {
var $this;
$this = $(this); //retain a reference to the current link
$.ajax({
url:$(this).attr('href'), //be sure to check the right attribute
success: function () { //pass an anonymous callback function
$this.addClass('success');
},
error: function (jqXHR, status, er) {
//only set the error on 404
if (jqXHR.status === 404) {
$this.addClass('error');
}
//you could perform additional checking with different classes
//for other 400 and 500 level HTTP status codes.
}
});
});
Otherwise, you're just setting success to the return value of $(this).addClass('success');, which is just a jQuery collection.

First you need a success and failed handler, now the code just runs for every link.
You don't need the src attribute, but the href prop.
This should work:
$('li').each(function(){
$(this).children('a').each(function(){
$.ajax({
url:$(this).prop('href'),
success:function(){$(this).addClass('success')},
error:function(){$(this).addClass('error')}
})
})
});
I also find it more elegant to use index and value in the each loop, so:
$('li').each(function(){
$(this).children('a').each(function(index,value){
$.ajax({
url:$(value).prop('href'),
success:function(){$(value).addClass('success')},
error:function(){$(value).addClass('error')}
})
})
});

The other answers add the class for ALL errors, if you truly want it for a 404 only then this should do:
$(this).children('a').each(function(){
var self;
self = this; //retain a reference to this
$.ajax({
url:$(this).attr('src'),
success: function () { //pass an anonymous callback function
$(self).addClass('success');
},
statusCode: {
404: function() {
$this.addClass('error');
}
}
});
});

You need to wrap your success and error callbacks inside a function() call:
$('li').each(function(){
$(this).children('a').each(function(){
var $this = $(this);
$.ajax({
url:$this.attr('href'),
success: function() {
$this.addClass('success');
},
error: function() {
$this.addClass('error');
}
});
});
});

jQuery: Referencing the calling object(this) when the bind/click event is for a class

Thanks for reading this.
I am dynamically generating some data which includes a select drop-down with a text box next to it. If the user clicks the select, I am dynamically populating it (code below). I have a class on the select and I was hoping the following code would work. I tested it with an ID on the select and putting the ONE on the ID I got it to work. However, in changing the code to reference a class (since there will be multiple data groups that include a select with a text box next to it) and $(this), I could not get it to work. Any ideas would be helpful. Thanks
The relevance of the text box next to the select is the second part of the code...to update the text box when an option is selected in the select
.one is so the select is updated only once, then the .bind allows any options selected to be placed in the adjacent text box.
$('.classSelect').one("click",
function() {
$.ajax({
type: "post",
url: myURL ,
dataType: "text",
data: {
'_service' : myService,
'_program' : myProgram ,
'param' : myParams
},
success:
function(request) {
$(this).html(request); // populate select box
} // End success
}); // End ajax method
$(this).bind("click",
function() {
$(this).next().val($(this).val());
}); // End BIND
}); // End One
<select id="mySelect" class="classSelect"></select>
<input type="text">

$(this) is only relevant within the scope of the function. outside of the function though, it loses that reference:
$('.classSelect').one("click", function() {
$(this); // refers to $('.classSelect')
$.ajax({
// content
$(this); // does not refer to $('.classSelect')
});
});
a better way to handle this may be:
$('.classSelect').one("click", function() {
var e = $(this);
$.ajax({
...
success : function(request) {
e.html(request);
}
}); // end ajax
$(this).bind('click', function() {
// bind stuff
}); // end bind
}); // end one
by the way, are you familiar with the load() method? i find it easier for basic ajax (as it acts on the wrapped set, instead of it being a standalone function like $.ajax(). here's how i would rewrite this using load():
$('.classSelect').one('click', function() {
var options = {
type : 'post',
dataType : 'text',
data : {
'_service' : myService,
'_program' : myProgram ,
'param' : myParams
}
} // end options
// load() will automatically load your .classSelect with the results
$(this).load(myUrl, options);
$(this).click(function() {
// etc...
}); // end click
}); // end one

I believe that this is because the function attached to the success event doesn't know what 'this' is as it is run independently of the object you're calling it within. (I'm not explaining it very well, but I think it's to do with closures.)
I think if you added the following line before the $.ajax call:
var _this = this;
and then in the success function used that variable:
success:
function(request) {
_this.html(request); // populate select box
}
it may well work

That is matching one select. You need to match multiple elements so you want
$("select[class='classSelect']") ...

The success() function does not know about this, as any other event callback (they are run outside the object scope).
You need to close the variable in the scope of the success function, but what you really need is not "this", but $(this)
So:
var that = $(this);
... some code ...
success: function(request) {
that.html(request)
}

Thanks Owen. Although there may be a better to write the code (with chaining)....my problem with this code was $(this) was not available in the .ajax and .bind calls..so storing it in a var and using that var was the solution.
Thanks again.
$('.classSelect').one("click",
function() {
var e = $(this) ;
$.ajax({
type: "post",
url: myURL ,
dataType: "text",
data: {
'_service' : myService,
'_program' : myProgram ,
'param' : myParams
},
success:
function(request) {
$(e).html(request); // populate select box
} // End success
}); // End ajax method
$(e).one("click",
function() {
$(e).next().val($(e).val());
}); // End BIND
}); // End One