Dynamically populate select options on a parent window from a child popup window with jQuery

Question

I'm attempting to populate the options on a select element on a parent window with data returned from an ajax call that's called from a child (popup) form. The child form is called from the parent with window.open.

The odd thing is removing the select options works; this succeeds:

$('#selElement', opener.document).find('option').remove().end();

But appending as shown below, throws SCRIPT5022: Exception thrown and not caught.

$('#selElement', opener.document).append($("<option />").val('').text('---Select---'));

I've also tried

$('#selElement', opener.window.document).append($("<option />").val('').text('---Select---'));

here's the code:

// the line below works; it removes all of the options from the drop-down
$('#selElement', opener.document).find('option').remove().end();

// the ajax call below returns the right data       
$.ajax({
    url: 'actions.cfc?method=getOptions&returnFormat=json',
    dataType: 'json',
    // the value being sent here just limits the options returned in the results
    data: {myType: $('#myType').val()},
    async:false,
    success: function(response) {
        // getting the right data back
        console.log(response);
        // the line below results in SCRIPT5022: Exception thrown and not caught
        $('#selElement', opener.document).append($("<option />").val('').text('---Select---'));
        // never get this far unless I comment out the line above; then the error is thrown here    
        for (var i = 0; i < response.DATA.length; i++) {    
            $('#selElement', opener.document).append($("<option />").val(response.DATA[i][0]).text(response.DATA[i][1]));   
        }       
    },
    error: function (response) {
        var r = jQuery.parseJSON(response.responseText);
        alert("Message: " + r.Message);
    }
});

Any ideas?

Not sure but have you tried `$("", opener.document)` ? Maybe the option element is being created in the child windows and the error occurs when you try to append to a different document. — DontVoteMeDown, May 08 '19 at 18:53
Not sure I follow; what would the complete syntax look like? The id of the select element would have to be specified, since there are other select elements on the parent, would it not? — mpaul, May 08 '19 at 19:06
no, that's just the first part, you should keep the rest. Also, you can simplify that `$('#selElement', opener.document).append($("", opener.document))` — DontVoteMeDown, May 08 '19 at 19:14
Eureka! This worked; do you want to submit this as an answer so I can accept it? — mpaul, May 08 '19 at 19:26

score 1 · Answer 1 · answered May 08 '19 at 19:21

Use .map to create you option list and append it to select tag.

const option = response.DATA.map(item => `<option value='${item[0]}'>${item[1]}</option>`);
$('#selElement', opener.document).append('<select>' + option.join('') + '</select>')

const response = { DATA: [
  ['Mary', 'Mary'],
  ['Peter', 'Peter'],
  ['John', 'John'],
  ['Abel', 'Abel'],
  ['Mike', 'Mike']
]}


const option = response.DATA.map(item => `<option value='${item[0]}'>${item[1]}</option>`);
option.unshift('<option>-----Select-----</option>');

 function myFunction() {
  const div = document.getElementById('test');
  div.innerHTML = ('<select>' + option.join('') + '</select>');
}

<button onclick="myFunction()">Try it</button>
<div id="test"></div>

This works as well and seems to be a great solution. I accepted the answer below because it was provided first and is aligned to what I already have in place. I do appreciate the response! — mpaul, May 08 '19 at 19:52

score 1 · Accepted Answer · answered May 08 '19 at 19:30

If you want to create the element in another document, you have to specify it in the creation like in the target as well:

$('#selElement', opener.document).append($("<option />", opener.document).val('').text('---Select---'));
//Specify the document where the element will be created ^

Otherwise the element will be created in the child document and an error will be thrown when the code tried to add it to the parent document.

Also, you can simplify the option creation:

$("<option value=''>---Select---</option>", opener.document)

score 0 · Answer 3 · answered May 08 '19 at 19:31

This a hybrid jquery/javascript solution I use sometimes ...

    var mySubtype = document.getElementById("uploadSubtype");
    //Create arrays of options to be added        
    if(filetype == "2D"){
        var array = ['','Proofs','Graphic','Other'];
    } else if(filetype == "3D"){
        var array = ['','Prelims','Presentation','Controls','Final'];             
    } else if(filetype == "Accounting"){
        var array = ['','W-9','Other']; 
    }

    $( "#uploadSubtype" ).append("<span class='subtype_form_label'>Subtype</span>");
    //Create and append select list        
    var selectList = document.createElement("select");
    selectList.id = "subtype";
    selectList.name = "subtype";
    selectList.classList.add("form_field");
    mySubtype.appendChild(selectList);

    //Create and append the options
    for (var i = 0; i < array.length; i++) {
        var option = document.createElement("option");
        option.setAttribute("value", array[i]);
        option.text = array[i];
        selectList.appendChild(option);
    }

see also this thread https://stackoverflow.com/questions/6601952/programmatically-create-select-list/50178049#50178049 — Mike Volmar, May 08 '19 at 19:32

Dynamically populate select options on a parent window from a child popup window with jQuery

3 Answers3