Set variable across JQuery loaded pages

Question

I have a page which has 3 sections. On the left a static menu

e.g.

<a href="#" class="actionLink" id="newFile"><li>New File</li></a>

This can start new actions e.g.

$('.actionLink').click(function() {
    var folderID; // trying set ID here
    var fileName = $(this).attr('id');
    $("#myAction").load('/ajax/actions/' + fileName + '.php?folder_id=' + folderID);
})

So, this loads /ajax/actions/newFile.php

In the middle is a page loaded using jquery .load(). Within the page in the middle is a series of folders which have an ID. On click, these folders display their contents are shown on the right of the page.

e.g.

<span id="12" class="folder active99">Music</span>

$('.folder').click(function() {
    var folderID = $(this).attr('id');
    $("#myAction").load('/ajax/actions/links.php?folder_id=' + folderID);
})

When clicked shows contents on the right. Note variable folderID. This all works ok.

What I would like to happen is when a folder is selected in the middle, it changes the folderID variable on the left hand menu so when a new action is chosen it corresponds to the folder its supposed to.

I've tried setting the variable everywhere i.e. in all sections var folderID; but whatever I try doesn't carry the variable around.

Is this possible or is there a better way to do this? Am I going about it wrongly?

To summarize: When I click a folder in the middle I need it to add the variable to the left menu.

UPDATE

This is code I currently use:

$(document).ready(function(){
            var folderID = '';
            $('.actionLink').click(function() {
                var fileName = $(this).attr('id');
                $("#myAction").load('/ajax/actions/' + fileName + '.php?folder_id=' + folderID);
            });

            $('.folder').click(function() {
                $('.folder').removeClass('active99'); // remove from all other <SPAN>s
                $(this).addClass('active99'); // add onto current
                var folderID = $(this).attr('id');
                $("#myAction").load('/ajax/actions/links.php?folder_id=' + folderID);
            });
        });

I've now changed things slightly so middle section is actually included as opposed to using .load() but still not working

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods ("."). http://stackoverflow.com/a/70586/1165289 — Bernhard, Oct 06 '13 at 21:09

omma2289 · Accepted Answer · 2013-10-06T22:31:36.140

1

You're dealing with a variable scope issue, you must declare the folderID variable outside (at a greater scope) so it's available for both actions:

$(document).ready(function(){
    var folderID = '';
    $('.actionLink').click(function() {
        var fileName = $(this).attr('id');
        $("#myAction").load('/ajax/actions/' + fileName + '.php?folder_id=' + folderID);
    });

    $('.folder').click(function() {
        folderID = $(this).attr('id');
        $("#myAction").load('/ajax/actions/links.php?folder_id=' + folderID);
    });
});

edited Oct 06 '13 at 22:31

answered Oct 06 '13 at 21:19

omma2289

54,161
8
64
68

Thanks, but doesn't work. When I click something with class folder all works ok but when click something with class actionLink the folderID is simply not carried to it – StudioTime Oct 06 '13 at 22:05
@DarrenSweeney can you share your updated code? make sure you remove "var" when you set the value inside the folder click action – omma2289 Oct 06 '13 at 22:08
@DarrenSweeney as I said, using `var folderID` inside the second function creates a local variable instead of setting the value to the global one we defined outside, remove `var` and it should work, you should read about variable scope in javascript – omma2289 Oct 06 '13 at 22:21
Aarrgghh - sorry, I misread/misunderstood, you are correct and thank you! – StudioTime Oct 06 '13 at 22:25

Set variable across JQuery loaded pages

1 Answers1