Confused about javascript / jquery variable scope

Question

The pastPath variable in the code below is confusing me. I normally use C# and MVC which of course means I use HTML, JavaScript, and JQuery along with other associated web / mobile technologies.

When I run this code and click the .moreBtn pastPath reports it is set to the URL as I intended. Yet when I try to use .backBtn to set the URL and force my browser to go back to the previous page, I get either that pastPath is undefined, or that it is set to hello.

I know I am having a problem understanding scope here. I have read articles on JavaScript scope but I am wondering instead if someone can resolve this problem and explain how I get my URL from the first function into the second.

I will read more about scope in JavaScript later but it seems very different to scope in most other languages and I presently don't have time to look into it properly.

$(document).ready(function ()
{
    pastPath = "hello";

    $(".moreBtn").click(function ()
    {
        var controller = $(".moreBtn").data('ctrl');
        var action = $(".moreBtn").data('action');
        loc = GetPathDetails("full"); //This simply returns the part of the URL I need.
        pastPath = loc;
        alert(pastPath);
        var fullPath = loc + "/" + controller + "/" + action;
        window.location = fullPath;
    });

    $(".backBtn").click(function ()
    {
        alert(pastPath);
        //window.location = pastPath;
    });

});

Thanks for your help.

Get rid of this. and it should work. Don't forget to initialize pastPath with var pastPath; — Blender
– Blender, Commented Jan 25, 2013 at 10:26
Question edited, when I remove this as suggested, I get hello in the second function. Thanks for your help. — Francis Rodgers
– Francis Rodgers, Commented Jan 25, 2013 at 10:29
@Juhana I don't understand, what part are you having difficulty with. I feel, that pastPath should be getting set on click in the first function, and should be read easily in the second because it is defined outside both, but this is not happening. So I want to know what I am doing wrong and how to fix it. It should be simple. thanks for your help. — Francis Rodgers
– Francis Rodgers, Commented Jan 25, 2013 at 10:32
Have you tried running the code in its current form? It should work. — Blender
– Blender, Commented Jan 25, 2013 at 10:33
@Blender - I did that before making the edit. This is why I am confused. Even I know enough about scope to know that it should work and this is why I mistakenly put "this" in cause I taught I was doing something silly wrong. It should be working, but it doesn't, the second function just displays "Hello". Hense the question. Thanks for your help. — Francis Rodgers
– Francis Rodgers, Commented Jan 25, 2013 at 10:36

Alex · Accepted Answer · 2013-01-25 10:42:11Z

4

The .moreBtn click changes the page so any data you store in pastPath will be lost.

Have a look at dom storage, https://developer.mozilla.org/en-US/docs/DOM/Storage

answered Jan 25, 2013 at 10:42

Alex

2,1221 gold badge13 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Louis Over a year ago

That is the correct answer as to why "hello" is displayed after the first code edit.

Francis Rodgers Over a year ago

Ah...Now it makes sense. So I should just pop the value in a query string and read it in the second function. Or something like this. Thanks for your answer.

Alex Over a year ago

depends how many previous paths you want to store, a query string could get long and messy. Refer to the url above, You can keep an array of paths.

Francis Rodgers Over a year ago

While this would indeed have worked, I figured why not just use HTML5 sessionStorage and looked it up in w3schools. So you led me in the right direction and once again, had I followed, it would have given me the correct answer. So I will accept this as the answer. Thanks for your help.

Louis · Accepted Answer · 2013-01-25 10:42:35Z

1

As you are using jQuery, when in a click (or other events) handler, the 'this' will refer to the DOM element that fired the event.
if you do not declare your variable by using "var pastPath", then pastPath will be a "global variable" which means that it will be a property from the global object.

In your click handlers you do not access the same variable whether you are accessing this.pastPath or just pastPath (unless this refers to the global object, which it doesn't because it is triggered by jQuery on the specific DOM element you clicked).

answered Jan 25, 2013 at 10:42

Louis

3972 silver badges14 bronze badges

Comments

imVJ · Accepted Answer · 2013-01-25 11:13:24Z

1

When you are clicking on $(".moreBtn"), its redirecting you to fullpath and this redirect again setting pastPath = "hello", so if you want pastpath value on next page, send it as querystring and then use this for your backbutton.

something like :

    $(document).ready(function ()
    {
       var pastPath = "hello";

        $(".moreBtn").click(function ()
        {
        var controller = $(".moreBtn").data('ctrl');
        var action = $(".moreBtn").data('action');
        loc = GetPathDetails("full"); //This simply returns the part of the URL I need.
        pastPath = loc;
        alert(this.pastPath);
        var fullPath = loc + "/" + controller + "/" + action + " ?pastpath="+loc;
        window.location = fullPath;
        });

        $(".backBtn").click(function ()
        {
                   var path = window.location + ''.split('pathname=');
                   alert(path1[1]);
                });

    });

answered Jan 25, 2013 at 11:13

imVJ

4245 silver badges16 bronze badges

2 Comments

imVJ Over a year ago

Note that scope of variable pathpath is global for entire page but when you refresh the page, it will set it to hello on every $(document).ready(function ()

Francis Rodgers Over a year ago

+2 for the good answer. The accepted answer explained this also, and I had the idea of using query strings just like you until he lead me down another path. That being, since I am using HTML5 anyway, why not just use the session storage. So I looked it up and resolved my problem. However, for those worried about backward browser compatibility (I'm not), I feel query strings (as shown in this answer) would be a better way to go for now. Thank you for taking the time to answer and for your help.

user1954395 · Accepted Answer · 2013-01-25 10:47:13Z

0

As we know there are two scopes for a variable, ie local scope and global scope.

Global scope : A variable which is declared or defined outside the function in simple terms(but not exactly).

Local scope : A variable which is declared inside the function.

so $(document).ready(function (){}); is also a function so declaring the variable outside this will solve the issue. but avoid var pastPath inside the functions which might inturn use that variable as local variable.

so your final code will turn to var pastPath = "hello"; $(document).ready(function() {

$(".moreBtn").click(function() {
    var controller = $(".moreBtn").data('ctrl');
    var action = $(".moreBtn").data('action');
    loc = GetPathDetails("full");
    //This simply returns the part of the URL I need.
    pastPath = loc;
    alert(pastPath);
    var fullPath = loc + "/" + controller + "/" + action;
    window.location = fullPath;
});

$(".backBtn").click(function() {
    alert(pastPath);
    //window.location = pastPath;
});

});

answered Jan 25, 2013 at 10:47

user1954395

1128 bronze badges

3 Comments

Francis Rodgers Over a year ago

I actually tried doing that also before posting the question because of the documents I read regarding JavaScript scope. Then I got a message box saying "undefined" in the second function. Thanks for your help.

user1954395 Over a year ago

good, but please make sure you have added the it at the starting of the js page!. Hopefully there might be a difference(by chance).

Francis Rodgers Over a year ago

I dont think scope is the problem anymore. As two people already pointed out correctly, it was being reset due to the page being refreshed. So I needed to store the value elsewhere, like a query string, cookie or session variable. But thanks for your time and assistance.

Collectives™ on Stack Overflow

Confused about javascript / jquery variable scope

4 Answers 4

4 Comments

Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related