Question

Firstly, When i append my Data and Code into the wrapper, it doesnt show the code which is very peculiar. when i quick watch this with Visual Studios. Then finally it wont show the modal at all.

Code:

var wrapper = $("<div>");
var data = $("<select>");
data.append('<option value = "17">Asset Name Read Only</option>').append('<option value = "18">Asset Type</option>').append('<option value = "19">Asset Code Read Only</option>').append('<option value = "20">Asset Parent</option>').append('<option value = "21">Asset Parent All</option>').append('<option value = "22">Asset Name Editable</option>').append('<option value = "23">Asset Code Editable</option>')
var code = $("<script>").attr("type", "text/javascript").html('$(".modal select option").click(function(){$(SELECTED_ELEMENT).attr("elType", $(this).val());});');
wrapper.append(data).append(code);
parent.showOverlay();
parent.showModal(wrapper);

the above statement “parent.showModal(wrapper)” is as follows:

function showModal(data){
  $("<div class = 'modal'>").css({
      top: $(window).height() / 2 - $("div.modal").height() / 2,
      left: $(window).width() / 2 - $("div.modal").width() / 2
  }).append(data).fadeIn();
}

Im not quite sure what is going on in the sense that neither the modal is showing nor why the javascript is being appended to the wrapper div. What am i doing wrong?

Answer 1

There is no appendTo(“body”) which is needed to show it.

As for the script, dont send the script to the function, but just the HTML since it works, then after the line be like:

parent.showModal(wrapper);
wrapper.find(“option”).click(function(){
//insert code here
});