set js var global? ajax needs access to var

[TechBoyJK]

I have a page that has a few content changes set for onclick actions.

In the parent document, I declare a variable via JS

var imgDIV = ".overlay_img#imageID#";

However, this variable is not available to a page called via ajax aka $.get(). The page retrieved via ajax references the variable but it doesn't see it.

Is there a way to declare the variable so that pages called via AJAX will also see it?

 

[Markbnj]

I don't know what you mean by "pages called via ajax." Javascript variables declared outside the scope of any function or object go into the "Window" namespace (become properties of the Window object). Any script currently loaded into the browser's vm can see them. If you return html from an ajax call, and that html references script, the script will be loaded and run, and should be able to see those declarations. However, if you're loading another page it will only see variables declared during that load. Basically need more information on exactly what you're doing in the ajax calls you mention.

 

[TechBoyJK]

I don't know what you mean by "pages called via ajax." Javascript variables declared outside the scope of any function or object go into the "Window" namespace (become properties of the Window object). Any script currently loaded into the browser's vm can see them. If you return html from an ajax call, and that html references script, the script will be loaded and run, and should be able to see those declarations. However, if you're loading another page it will only see variables declared during that load. Basically need more information on exactly what you're doing in the ajax calls you mention.

There's a hidden div that's empty until a particular element is clicked. Then the div is toggled (show), and an ajax get request fetches some content, and appends the content to the empty div.

The content thats fetched is unable to see the javascript variable initially called when the parent page loads.

 

[Markbnj]

Yeah, it should be visible. Probably need to see some of the code. Are you sure the variable imgDIV is declared at global scope (i.e. outside the scope of any function or object)? Can you post the variable declaration from the page, and the reference in the markup that's returned from the ajax call?

 

[TechBoyJK]

from parent doc

		<script type="text/javascript">
				$(document).ready(function() {
			
					$('###imageID#').click(function(){
						$('##imageOverlaySidebarToggle#imageID#').show();
						$.get("/sidebar/right/imageOverlaySidebar.cfm?userid=#userid#&pid=#imageID#", function(result){$("##imageOverlaySidebarToggle#imageID#").html(result);});
						$.get("/images/viewImageOverlay.cfm?imageID=#imageID#", function(result){$(".overlay_img#imageID#").html(result);});
						var imgDIV = ".overlay_img#imageID#";
					});
					
					$('.close').click(function(){
						$('##imageOverlaySidebarToggle#imageID#').hide();
					});
		
				});
			</script>

from child (called via ajax after click, code is just testing to get alert to show)

			<script language="javascript" type="text/javascript">
			$(document).ready(function() {
						alert('the overlay is' + imgDIV);
								});
</script>

 

[beginner99]

Ignoring the weird naming of your variables (i personally would clean that up and it doesn't really make me believe the rest of the code is very good...) you don't need it anyway if it only holds a reference to an element. Just access it with $('#myDiv') in the success callback.

 

[TechBoyJK]

Ignoring the weird naming of your variables (i personally would clean that up and it doesn't really make me believe the rest of the code is very good...) you don't need it anyway if it only holds a reference to an element. Just access it with $('#myDiv') in the success callback.

The variables look weird because they include cfml variables

There will be many divs due to a loop

.overlay_img#imageID#

aka

.overlay_img5
.overlay_img45
.overlay_img67
.overlay_img1085

I need to declare, as a variable, the name of the overlay_img being used so that the ajax knows which div to swap.. hence

var imgDIV = ".overlay_img#imageID#";

So if someone clicks on a particular link that references imageID 5, you'd get

var imgDIV = ".overlay_img5";

 

[DaveSimmons]

If I'm reading that correctly, you're defining imgDIV inside a function, so it is not global. Try defining it outside with a placeholder value. Remember to remove the "var" in your function.

<script type="text/javascript">
    var imgDIV =  '';                  
    $(document).ready(function() {
...
    imgDIV = ".overlay_img#imageID#";

 

[TechBoyJK]

If I'm reading that correctly, you're defining imgDIV inside a function, so it is not global. Try defining it outside with a placeholder value. Remember to remove the "var" in your function.

<script type="text/javascript">
    var imgDIV =  '';                  
    $(document).ready(function() {
...
    imgDIV = ".overlay_img#imageID#";

jackpot. got it. thanks!

 

[GregGreen]

<script type="text/javascript">
    var imgDIV =  '';                  
    $(document).ready(function() {
...
    imgDIV = ".overlay_img#imageID#";

Just

<script type="text/javascript">
    var imgDIV;                  
    $(document).ready(function() {
...
    imgDIV = ".overlay_img#imageID#";

would be preferable.

 

[beginner99]

The variables look weird because they include cfml variables

There will be many divs due to a loop

.overlay_img#imageID#

aka

.overlay_img5
.overlay_img45
.overlay_img67
.overlay_img1085

I need to declare, as a variable, the name of the overlay_img being used so that the ajax knows which div to swap.. hence

var imgDIV = ".overlay_img#imageID#";

So if someone clicks on a particular link that references imageID 5, you'd get

var imgDIV = ".overlay_img5";

then pass image variable to function containing ajax call and use it in success method.