Accessing JS / jQuery variable outside function

Question

I'm trying to declare a variable inside function and wants to make it available outside that function. I have gone through several Stackoverflow answers but still cant figure out.

script>
    (function() {
        var url
        $("#airline-select").change(function () {
            url = "{% url 'airline_year_financial_data' %}";
        });
        console.log(url)
    var httpRequest;
    makeRequest();

    // create and send an XHR request
    function makeRequest() {
        httpRequest = new XMLHttpRequest();
        httpRequest.onreadystatechange = responseMethod;
        httpRequest.open('GET', url)
        httpRequest.send()
    }
    // Handle XHR Response
    function responseMethod () {
        if (httpRequest.readyState === 4) {
            if (httpRequest.status === 200) {
                updateUISuccess(httpRequest.responseText)
                } else {
                    // Do something
                }
        }
    }
    // Handle XHR Success
    function updateUISuccess(responseText) {
        var response = JSON.parse(responseText)
        var a = $("#airline-select").val();

        var width = 500;
        var height = 300;
        var padding = 20;
        d3.select("body")
            .append("svg")
                .attr("class", "waterfall-container")
                .attr("width", width)
                .attr("height", height)
                .attr("style", "outline: thin solid")
        d3.select("svg")
            .selectAll("rect")
            .data(response)
            .enter()
            .append("rect")
                .attr("x-axis", 200)
                .attr("y-axis", 300)
                .attr("width", 20)
                .attr("height", 200)
                .attr("fill", "blue")
    }

})();

</script>

It logs 'undefined' at the console which means the value of url inside the function is getting updated or not available outside the function. How can I do that?

You're logging the value immediately after you attach the event handler, before the event has happened. Are you asking how you can make your variable predict the future? — JLRishe
– JLRishe, Commented Jul 30, 2017 at 4:18
What is $('#airline-select') selecting? I suspect it is giving undefined because that element, which has an event listener (on change), has not yet been changed. In that case, because you declared var url (which is saying var url = undefined, logging url should correctly yield undefined — nickang
– nickang, Commented Jul 30, 2017 at 4:23
Thanks, I'm not really sure about fixing it. All I want is that, this url variable gets the new value and I can something with this url object outside the function. — Hannan
– Hannan, Commented Jul 30, 2017 at 4:23
What task needs to be performed outside of the event handler? — guest271314
– guest271314, Commented Jul 30, 2017 at 4:24

guest271314 · Accepted Answer · 2017-07-30 04:37:45Z

2

You are missing $ before immediately invoked function expression, if you are expecting jQuery() alias for .ready() to be called when document has loaded DOM and #airline-select is defined in document at HTML.

You can pass url to makeRequest() within change event handler by defining an expected parameter at the function declaration.

$(function() {

    var httpRequst, url;

    $("#airline-select").change(function () {
      url = "{% url 'airline_year_financial_data' %}";
      makeRequest(url)
    });

    // create and send an XHR request
    function makeRequest(url) { // include `url` parameter at function
        httpRequest = new XMLHttpRequest();
        httpRequest.onreadystatechange = responseMethod;
        httpRequest.open('GET', url)
        httpRequest.send()
    }
    //
})

answered Jul 30, 2017 at 4:37

guest271314

1

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

1 Comment

guest271314 Over a year ago

If you are expecting change event to be dispatched immediately you can chain .change() to

$("#airline-select").change(function () {       url = "{% url 'airline_year_financial_data' %}";       makeRequest(url)     }).change()

Collectives™ on Stack Overflow

Accessing JS / jQuery variable outside function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related