How to access a jQuery variable outside script?

Question

I am an absolute newbie to jquery. So this might be a very basic question, please bear with me.

I have defined a jQuery function, which creates a 2-d array.

    <script type="text/javascript">
        $(document).ready(function() {
            $.ajax({
                url: '/testdata.txt',
                dataType: 'text',
                success: function(data) {
                    var datatable = [];
                            // Populate datatable[]. This is a 2-d array.
                            $('#myTestDiv').text(datatable[2][0]);
                        },
                        error: function(){
                            alert('error!');
                        }
                    })
                });
    </script>

<body>
    <table>
        <thead>
        </thead>
    </table>
</body>

Now, I want to print the 2-d array, "datatable", in the HTML table, preferably with JSTL. But it appears that the "datatable" variable is not accessible outside . I know that the table is being populated correctly, the $('#myTestDiv').text(datatable[2][0]); is printing expected output.

How to achieve this?

Thanks a lot.

Sampson · Accepted Answer · 2012-05-01 03:59:05Z

2

Remove var from in front of the variable declaration. This will result in the variable being placed on the global window object, making it accessible from all over. Be careful with this type of practice though, as polluting your global context is frowned upon.

answered May 1, 2012 at 3:59

Sampson

269k76 gold badges546 silver badges570 bronze badges

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

2 Comments

Sachin Over a year ago

Thanks for the fast reply. I tried removing var, but no change in the output.

Sampson Over a year ago

Show us how you're trying to access that variable. You're not trying to access it before the success method on the ajax request is even ran, are you? It doesn't exist until then.

jfriend00 · Accepted Answer · 2012-05-01 04:12:01Z

You could make datatable be a global variable so it's available anywhere, but that usually isn't what really makes a correct implementation because the rest of your code doesn't know when the data is in that variable. The ajax function is asynchronous so you can't just assume the data is in datatable after your ajax function runs. In fact, it won't actually be available until some time later when the success handler is called.

Instead, a typical implementation is to call a function from your success function and pass it the datatable variable as an argument. This solves both the timing (of the asynchronous ajax call) issue and the availability of the data issue (passed as an argument to a function). That would look like this:

            success: function(data) {
                var datatable = [];
                // Populate datatable[]. This is a 2-d array.
                // call function to process the data
                processData(datatable);

            },

Ahamed Mustafa M · Accepted Answer · 2012-05-01 04:12:26Z

0

I dont think that you can access the datatable variable in JSTL. JSTL's role or action will be at the server side whereas the datatable is a client side javascript variable. What you can try is, assign this datatable value to a hidden bean property with $('elementId').val(datatable) and then access it at the server side in further requests to server

answered May 1, 2012 at 4:12

Ahamed Mustafa M

3,1591 gold badge26 silver badges34 bronze badges

Comments

RET · Accepted Answer · 2012-05-01 04:27:28Z

0

I suggest you should declare the datatable variable outside the .ajax() function so that it is visible in other parts of the code.

If you know it's being populated correctly, then it's just a scoping problem.

UPDATE

        $(document).ready(function() {
            var datatable = [];
            $.ajax({
                url: '/testdata.txt',
                dataType: 'text',
                success: function(data) {
                    var lines = data.split('\n');
                    $.each(lines, function(i, val) { 
                        datatable[i] = [];
                    });
                    $.each(lines, function(j, val) { 
                        datatable[j] = lines[j].split(',');
                    });
                    $('#myTestDiv').text(datatable[2][1]);
                },
                error: function(){
                    alert('error!');
                }
            })
        });

edited May 1, 2012 at 4:27

answered May 1, 2012 at 3:59

RET

9,1881 gold badge32 silver badges33 bronze badges

6 Comments

Sachin Over a year ago

Thanks for the fast reply. By you should declare the datatable variable outside the .ajax() function, where should I declare the variable? Outside of any jQuery function, but within <script></script> tags, or outside of everything?

epascarello Over a year ago

If you put it outside the script tags, would it be JavaScript?

RET Over a year ago

Updated my answer to explain.

Sachin Over a year ago

Thanks for the reply RET. I tried this, but it is still not working. As someone has pointed out here that I might be accessing the variable before its getting populated. Is that the case? If it is, how to avoid that? Sorry for too many questions, but I barely know jquery/ajax.

RET Over a year ago

Well, I presume the processing you speak of is called inside the success function, where your $('#myTestDiv').text(datatable[2][1]); line is currently. To reach that line, the ajax call must have completed. If it's outside the .ajax() call, then yes, you'll have timing problems.

|

Collectives™ on Stack Overflow

How to access a jQuery variable outside script?

4 Answers 4

2 Comments

Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related