Fill select option dropdown list from array in iframe using javascript

Question

I am trying to fill in a select dropdown list with an array of options from a call to our server. I have the server call setup to run and fill a hidden iframe and that part works fine. I need to get the data from the iframe and use that array to fill the option list.

In the main/parent page I have this table cell for the select list:

  <tr>
    <td><select id="ymm_model" name="vmodel">
    <option value="" selected="selected">Select Model</option>
    </select></td>
  </tr>

This function is in the main/parent in the scripts area and is called by a prior select list onchange, and was my attempt to fill the select list after running the call to fill the iframe. The filling of the iframe works and shows the data.

function getModels(make)                // open iframe and do call
        {
        window.frames['dataframe'].window.location.href='http://www.atkcores.com/cgi-bin    /vinholmodel.cgi?myear='+document.vinhol.ymm_year.value+'&mmake='+make;

var select = document.getElementById("ymm_model");
var mods = document.getElementById('dataframe').contentWindow.document.getElementById['models'];
for (var i = 0; i < mods.length; i++) {
    var option = document.createElement('option');
    option.text = option.value = mods[i];
    select.add(option, 1)
    }
    }

I also tried this function which would run from the page that loads into the iframe from my server script and after the page loaded.

function takedata(passed)
    {
var select = document.getElementById("ymm_model");
var mods = document.getElementById('dataframe').contentWindow.document.getElementById['models'];

for (var i = 0; i < mods.length; i++) {
        var option = document.createElement('option');
        option.text = option.value = mods[i];
        select.add(option, 1)
        }
        }

This is the page that is formed in my server process that fills the iframe.

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
</head>

<script>
function init()
    {
    window.parent.takedata(document.getElementById("moddata").value);
    return true;
    }

</script>

<body onload="init();">
<form name="vinmodels">
<div id="moddata"> var models =["ACCORD","CIVIC","CR-V","DEL SOL","ODYSSEY","PASSPORT","PRELUDE"]; </div>

</form>
</body>
</html>

The content in the moddata div is what I need to use to fill the select list.

Thanks for any guidance or suggestions you have,

Scott

Answer 1

I think you're making it more complicated than it needs to be. You need to get an array of data from a server, which is what AJAX was all but built for.

Your server should instead of sending an HTML response, send an application/json response with the array. It should look like this:

{ 
    "models": ["ACCORD","CIVIC","CR-V","CR-Z","CROSSTOUR","FIT","INSIGHT","ODYSSEY","PILOT","RIDGELINE"] 
}

Remember that a JSON object relies on key-value pairs. We only have one piece of data (the models array), so we've assigned it the key "models".

From here, just pull in the data using your favorite AJAX methodology. I'm using jQuery for this example, but you can also use XHR requests for a non-jQuery approach. I've included a fiddle, but note that the fiddle won't "work" properly since it is not on the atkcores.com domain (this is a Cross-Origin Sharing issue).

You should however be able to understand the gist of it and create your own version.

//This is what your server should respond with a type of 'application/json'
var serverResponse = '{ "models": ["ACCORD","CIVIC","CR-V","CR-Z","CROSSTOUR","FIT","INSIGHT","ODYSSEY","PILOT","RIDGELINE"] }';

//This uses jQuery for a quick demonstration, look up how to do AJAX without jQuery using XHR objects if you don't want to use jQuery
$(document).ready(function() {
    $.get('http://www.atkcores.com/cgi-bin/vinholmodel.cgi?myear=2014&mmake=honda')
    .success(function(data) {
        //This will not work on the demo since your server doesn't support CORS, but
        //this is where you would process the data.
        handleResponse(data);
    }).fail(function(jqXHR, message) {
        //In this demonstration, this will always hit because of the above CORS issue
    });

    //Pretend the above AJAX worked, we handle the response
    //Since your server is responding with 'application/json', we don't need to parse
    //the string above as we do here
    handleResponse(JSON.parse(serverResponse));
});

function handleResponse(data) {
    //Server passes the array in a JSON object with the key 'models'
    var modelsArray = data.models;

    var select = document.getElementById('ymm_model');
    for (var i = 0; i < modelsArray.length; i++) {        
        var option = document.createElement('option');
        option.text = option.value = modelsArray[i];
        select.add(option, 1);
    }
}

http://jsfiddle.net/vg0g7gzL/

Fill select option dropdown list from array in iframe using javascript

Question

1 answers

solution1
1 2014-09-09 16:08:44

Fill select option dropdown list from array in iframe using javascript

Question

1 answers

solution1 1 2014-09-09 16:08:44

solution1
1 2014-09-09 16:08:44