JavaScript not recognising select list options

resourcesys
resourcesys used Ask the Experts™
on
Hi all,

We have an ASP.NET MVC application that has a partial page containing a select list, when the value of that select list is changed, we use JavaScript to populate a second select list.

After this happens we attempt to get the first value from the second select list, but there are no options for it. If we do a console.log output, we can see the second select list has it's new options, but the options.length property shows as zero. It is as if JavaScript sees it as a string of HTML and not an array of values.

Has anyone encountered this before and if so, how did you resolve the issue?

Thank you.

resourcesys.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Chinmay PatelChief Technology Ninja
Distinguished Expert 2018

Commented:
Hi resourcesys,

How are you populating the second Select? Please share the code that you are using.

Regards,
Chinmay.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
we use JavaScript to populate a second select list
This implies that JavaScript has access to the data.

Can you show us the JavaScript code that does this.

Author

Commented:
The code that populates the select list is a s follows:

        $.get("/Reports/DTData/GetItems", params, async function (data) {
            var graphTypes = data.GraphTypes;
            var ddl = document.getElementById("ddlGraphType");

            ddl.options.length = 0;

            $.each(graphTypes, function (index, graphType) {
                 ddl.options[ddl.options.length] = new Option(graphType.Text, graphType.Value);
            });

Open in new window

Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Firstly, the async in front of your callback is unnecessary - you are not using await in the callback so putting async in there does not do anything (also not supported on IE11 and below)

You have access to the Select options in the graphTypes return.

Are you saving that somewhere to use later?

Where is the code where you are trying to access the JavaScript data again?

Because you are not saving graphTypes you lose it when you leave the callback;

Author

Commented:
Hi Julian,

The async was in the code as I needed this function to complete before another function was called. Not familiar with it but thought I would give it a try.

Yes, we don't keep the graphType object, as we should be able to get the values from the select list, but cannot.

Again, When I do a console.log on the select list in the method trying to get its value, I see the following:

<select id="ddlGraphType" name="ddlGraphType">
	<option value="Hours">Hours</option>
	<option value="Minutes">Minutes</option>
	<option value="Percentage">Percentage</option>
</select>

Open in new window


But when I do ddlGraphType.options.length the result is zero.

The function that tries to get the ddlGraphType is:

    function loadChart() {
        var ddlx = document.getElementById("ddlGraphType");

        console.log('Load Chart');
        console.log(ddlx);
        console.log(ddlx.options.length);

        var params = {
            GraphType: $("#ddlGraphType").val(),
            Category: "ALL"
        };

        console.log(params);

        $("#Chart").load("/Reports/DTData/GetChartData", params);
    }

Open in new window


This is where the problem seems to be.

Thanks.

resourcesys.
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
The async was in the code as I needed this function to complete before another function was called. Not familiar with it but thought I would give it a try.
That is not what async does. It is used with await (async / await)
Old way
function doSomethingUseful() {
   callAsyncFunction()
     .then(result => console.log(result));
}

Open in new window

async / await way
async function doSomethingUseful() {
   const result = await callAsyncFunction();
   console.log(result);
}

Open in new window


Down to the question - when does loadChart() run?
If it is running before ddlGraphType options are loaded then length will be 0.

Your select is populating asynchronously so I am willing to bet that loadChart is running at page load and ddlGraphType is loading AFTER loadChart has run.

How is loadChart being invoked - do you invoke it or is it a function passed to a charting library?

If you call it then simply invoke it in your callback after the $.each().

Author

Commented:
loadChart() runs after ddlGraphType options are set.

I'll call it after the each to see if that has any impact.

Author

Commented:
Hi Julian,

Calling after the $each has taken care of the issue.

Will have to do some minor refactoring of code , but this will get it working.

Thank you very much for your help.

resourcesys.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial