Pass jQuery variable to Javascript Function

Question

I have a table in a separate HTML file that I am loading with jQuery. I am then defining the variable "aa". I am attempting to use this variable in my JavaScript Function "report(period)". I tried creating a global variable but that didn't help. I am not entire sure I was doing it correctly. I am fairly new to JavaScript and know even less of jQuery. I've gone through other similar posts but it’s very difficult to understand exactly what's happening. Any help would greatly be appreciated.

jQuery

jQuery(function($) {
 aa = document.getElementById('part1Table').rows[0].cells[2].innerHTML;
});

Javascript

function report(period) { 
 x = document.getElementById("tblabiNew").rows[2].cells[1].innerHTML; /*----- for testing use a number instead (example: x = "205-000040-634") ------*/
/*---------------------------------------------------------------------------------------------- Start - Object Removal Control ------------------------------------------------------------------------------------*/
 if (x==aa) {
 var i = 1; do {
 + i; i++; 
 var e = document.getElementById (i); 
 e.style.display = 'none'
 } while (i < 15)
 /*polebrea21*/
 var polebrea = 21; 
 do {
 + polebrea; 
 polebrea++; 
 var e = document.getElementById (polebrea); 
 e.style.display = 'none'
 } while (polebrea < 28)
 /*polebrea31*/
 var polebrea = 31; 
 do {
 + polebrea; 
 polebrea++; 
 var e = document.getElementById (polebrea); 
 e.style.display = 'none'
 } while (polebrea < 38)
 /*regulatory51*/
 var regulatory = 51; 
 do {
 + regulatory; 
 regulatory++; 
 var e = document.getElementById (regulatory); 
 e.style.display = 'none'
 } while (regulatory < 64)
 /*regulatory51*/
 /*regulatory81*/
 var regulatory = 81; 
 do {
 + regulatory; 
 regulatory++; 
 var e = document.getElementById (regulatory); 
 e.style.display = 'none'
 } while (regulatory < 94)
 }; 
};

• David Thomas: If it works you shouldn't change it to require jQuery (unless there's a specific advantage you haven't mentioned, for some reason); also: what are you trying to pass? What's the relevant HTML, what's this function meant to do?
• Jonathan Blaine: I'm using jquery just to load the external HTML Doc. If there was another way I would be open to it. The var "aa" holds a number such as "111-111111-111" If the two variables x and aa equal then it hides certain part numbers. x comes from an internal table and aa from another external table. If I can get the aa to work in the javascript function then all is well. I attempted to nest them together but only one or the other would work.
• Mitya: Point of note: no such thing as a jQuery variable; only JavaScript variables.
• andrew: if the only thing you're using jQuery for is to get the dom ready event then why not just use the vanilla js equivalent?
• Jonathan Blaine: I have been testing my code on IE instead of our production server. I found that jQuery doesn't work on the production server. I won't be able to use jQuery at all. I need to find another way to import my external HTML page or just include it into my main doc.

Answer 1

If you want "global" variable you should declare it outside of all functions body. So this should be.

var aa;
jQuery(function($) {
 aa = //do something with aa
});

but anything you use without declaring is by default global (mind it work that way only in browsers).

If you want create local variable, add var keyword before it name, like this:

function report(period) { 
 var x = //...
}

---

I believe your aa variable is not declared because report function is called before page is ready.

Everything in function given to jQuery() run after DOM is ready, so if I write:

jQuery(function($) { console.log(1); });
console.log(2);

I get "2, 1" and not "1, 2".

You should really learn JavaScript and jQuery if you want to use it. Your report code seems like it can be replaced with one line with jQuery.

Answer 2

If I understand your scenario correctly you are not able to obtain the relevant node because the HTML fetched via ajax has not been injected into the DOM and hence can't be fetched using document.getElementById.

Could you provide the code which fetches the remove HTML and then what is done with it ? That may be helpful to understand the situation.

Anyway, this is something you may want to try:

$.ajax({
 method: "GET",
 url: "some/remote/url",
 success: function(htmlContent) {
 aa = $(htmlContent).find('#part1Table')[0].rows[0].cells[2].innerHTML;
 // Do some processing
 }
})