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.

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.

• javascript
• jquery

Share Improve this question Follow asked Jan 25, 2013 at 10:24 Francis RodgersFrancis Rodgers 4,68588 gold badges4848 silver badges6565 bronze badges 7

• 1 Get rid of this. and it should work. Don't forget to initialize pastPath with var pastPath; – 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 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 Commented Jan 25, 2013 at 10:32
• Have you tried running the code in its current form? It should work. – 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 Commented Jan 25, 2013 at 10:36

 |  Show 2 more ments

4 Answers 4

Sorted by: Reset to default 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/en-US/docs/DOM/Storage

• 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).

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]);
                });

    });

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;
});

});