Retrieving a javascript variable created in an onchange javascript event

Question

I have the following simple form from which a user can select a state to view information on:

<form style="position:absolute; top:65px; left:650px">
    Select State to View:
    <select id="myList" onchange="load_state_data(); xml = getStateInfo();">
      <option selected="selected"></option>
        <?php
            foreach($stateNames as $state){
                echo('<option>'.$state.'</option>');
            }
        ?>
    </select>
</form>

My javascript is as follows:

function load_state_data() {
    var state_name = $("#myList option:selected").val();
    $.ajax({
        type: 'post',
        url: 'state_data.php',
        dataType: "xml",
        data: {
            state_name: $("#myList option:selected").val()
        },
        success: function (data) {
            //clear out previous values
            for (j = 0; j < 5; j++) {
                $('#top_name_' + j).html("");
                $('#top_score_' + j).html("");
            }

            $(data).find('TOP').each(function (index) {
                $('#top_name_' + index).html($(this).find('COMPANY_NAME').text());
                $('#top_score_' + index).html($(this).find('Q_SCORE').text());
            });

            //initialize my temp arrays for reverse ordering the results
            var botName = new Array();
            var botScore = new Array()

            //clear out previous values
            for (j = 0; j < 5; j++) {
                $('#bot_name_' + j).html("");
                $('#bot_score_' + j).html("");
            }

            $(data).find('BOTTOM').each(function (index) {
                //$('#bot_name_'+index).html($(this).find('COMPANY_NAME').text());
                //$('#bot_score_'+index).html($(this).find('Q_SCORE').text());
                botName[index] = $(this).find("COMPANY_NAME").text();
                botScore[index] = $(this).find("Q_SCORE").text();
                j = index;
            });
            var newOrderName = botName.reverse();
            var newOrderScore = botScore.reverse();
            for (i = 0; i < newOrderName.length; i++) {
                $('#bot_name_' + i).html(newOrderName[i]);
                $('#bot_score_' + i).html(newOrderScore[i]);
            }

            //clear the variables from memory
            delete botName;
            delete botScore;
            delete newOrderName;
            delete newOrderScore;


            //cycle through results and save my locations to an array of the map markers
            var inst_info = new Array();
            $(data).find('INST_MARKER').each(function (index) {
                inst_info[index] = [parseFloat($(this).find('LAT').text()),
                parseFloat($(this).find('LONG').text()),
                $(this).find('COMPANY_NAME').text(), $(this).find('Q_SCORE').text()];
            });

            $(data).find('INST_COUNT').each(function () {
                $('#num_total').html($(this).find('NUM_TOTAL').text());
                $('#num_null').html($(this).find('NUM_NULL').text());
            });
            return (inst_info);
        },
        error: function (data) {
            alert('There was an error. Please try again shortly.');
        }
    });
};

I need to access the inst_info generated in this script back on the page it is called from (see form above). Is this possible, and, if so, how? I have tried using inst_info = function load_state_data, but that doesn't work.

possible duplicate of Promote callback onSuccess return value to the Caller Function return value — Felix Kling
– Felix Kling, Commented Jul 25, 2012 at 22:44
I would recommend to clean up your code first (use proper indentation) and to isolate the problem. At least it is easier to answer your question. — ayke
– ayke, Commented Jul 25, 2012 at 22:45
@ayke The formatting issue lies not in my actual code, but in my inability to post it here on the site. My first time - my apologies. — dneimeier
– dneimeier, Commented Jul 25, 2012 at 22:53
Ok. Maybe an issue with tabs vs spaces? Four spaces are recommended. meta.stackoverflow.com/editing-help#code — ayke
– ayke, Commented Jul 25, 2012 at 23:07

Egor · Accepted Answer · 2012-07-25 22:45:22Z

2

This isn't really possible. The event handler fires asynchronously at some point in time, and there's no code to "return" a value to. Whatever happens in the event handler load_state_data() is isolated from your main javascript code, because nobody knows when, and if at all, it will happen. You have to do whatever it is you want to do right in the event handler.

answered Jul 25, 2012 at 22:45

Egor

1,66013 silver badges26 bronze badges

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

1 Comment

dneimeier Over a year ago

Thanks. I was afraid of this. I am going to move code around and add an ajax call in my script that will accomplish was I was going for.

Bergi · Accepted Answer · 2012-07-25 22:55:18Z

1

I need to access the inst_info generated in this script back on the page it is called from (see form above). Is this possible, and, if so, how?

No. The inst_info is created in the callback function for the success event of your asynchronous request. From there it is available, and you will be able to call a function that sets the state information.

All this happens in the future, after your load_state_data function returns. Yet, you might return a Promise for the data, on which other callback functions can be registered to be executed as soon as the data is available.

    //clear the variables from memory
    delete ...

This code does not work, it is a misuse of the delete operator. You don't need to do this anyway, JavaScript is a garbage-collected language.

edited Jul 25, 2012 at 22:55

answered Jul 25, 2012 at 22:49

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Collectives™ on Stack Overflow

Retrieving a javascript variable created in an onchange javascript event

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related