Updating variable inside function JQuery

Question

I'm having a problem when trying to reset a variable inside an button event in jquery. This variable represents the page loaded in div. Then with the setInterval function I refresh the div element with the page stored in the variable. This is the code:

$( document ).ready(function() {
    var current_page="data.php";    //For update-the first page shown is data.php

    //At startup
    $("#content").load("/data.php",function(response){
        //current_page="data.php"; The first command-current_page already set to "data.php"
        if(response=="0"){
            location.href="http://website.com";
        }
    });

    //JS refresh timer
    setInterval(function(){
        alert(current_page);    //Always shows 'data.php'->means it is not updated

        if(current_page!="insert.php"){
            $("#content").load("/"+current_page,function(response){
                if(response=="0"){
                    location.href="http://website.com";
                }
            });
        }
    },5000);    //5 seconds


    //EVENTS

    //Menu links pressed 
    $(".menu_link").click(function(){
        var page=$(this).attr("data-page");
        current_page=page;      //Here it works.

        $("#content").load("/"+page,function(response){
            if(response=="0"){
                location.href="http://website.com";
            }
        });
    });
});

//Outside Jquery 'document'
  //Select user button pressed
  function loadData(){
    var user_id=$("#menu_selector option:selected").val();
    current_page="users.php?user_id="+user_id;     //Not globally updated;inside function it is set.

    $("#content").load("/users.php?user_id="+user_id,function(response){
        if(response=="0"){
            location.href="http://website.com";
        }
    });

}

I tested the current_page's value by putting in my code "alert" statements. The conclusion: in the setInterval function the current_page variable is always set to "data.php". If I remove the first line var current_page="data.php"; then current_page is 'undefined'. It looks like it is not updated by the loadData function.
I also tried moving the loadData function inside the JQuery load but then the button can't find it(I used <button onclick="loadData();">Load page</button>)

Where is the problem?

seems like you have scoped your variable to document.ready() function...try declaring outside in global scope ...right at the top of your script... — RohitS
– RohitS, Commented Dec 3, 2016 at 14:28
Yes..I already fixed it.I saw the answear and I knew that the variable is not global only for the jquery part. — sergiu reznicencu
– sergiu reznicencu, Commented Dec 3, 2016 at 14:38

Mark Williams · Accepted Answer · 2016-12-03 13:54:23Z

1

The current_page variable within the function is scoped to that function. The line outside the function that is in loadData:

current_page="users.php?user_id="+user_id;

will actually be setting another variable, still called current_page but on the window object. You should be able to see this in Chrome dev tools.

If you need to be able to manipulate this from outside the $() function you'll have to declare it with more global scope (say against the window object or create your own namespace object).

answered Dec 3, 2016 at 13:54

Mark Williams

2,3081 gold badge14 silver badges15 bronze badges

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

Comments

sergiu reznicencu · Accepted Answer · 2016-12-03 14:42:41Z

I solved it. As Mark Wiliams wrote the variable wasn't "global enough". So instead of creating a namespace or else I moved the declaration outside the jquery code:

var current_page="data.php";    //Moved outside
$( document ).ready(function() {
    //At startup
    $("#content").load("/data.php",function(response){
        //current_page="data.php"; The first command-current_page already set to "data.php"
        if(response=="0"){
            location.href="http://website.com";
        }
    });

    //JS refresh timer
    setInterval(function(){
        alert(current_page);    //Always shows 'data.php'->means it is not updated

        if(current_page!="insert.php"){
            $("#content").load("/"+current_page,function(response){
                if(response=="0"){
                    location.href="http://website.com";
                }
            });
        }
    },5000);    //5 seconds


    //EVENTS

    //Menu links pressed 
    $(".menu_link").click(function(){
        var page=$(this).attr("data-page");
        current_page=page;      //Here it works.

        $("#content").load("/"+page,function(response){
            if(response=="0"){
                location.href="http://website.com";
            }
        });
    });
});

//Outside Jquery 'document'
  //Select user button pressed
  function loadData(){
    var user_id=$("#menu_selector option:selected").val();
    current_page="users.php?user_id="+user_id;     //Not globally updated;inside function it is set.

    $("#content").load("/users.php?user_id="+user_id,function(response){
        if(response=="0"){
            location.href="http://website.com";
        }
    });

Collectives™ on Stack Overflow

Updating variable inside function JQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest