When I click on the 'create new button', a modal window form pops up with a dropdown menu. The dropdown is supposed to be populated via ajax with the help of the populateUserData() function. Even though the ajax call seems to be successful, I am unable to see any data in the dropdown menu. Can someone please assist me in identifying what could be wrong? Thank you!
<form id="formAddUser" action="#" title="Add User to Group" style="display: none;">
<label for="userId"><strong>User Id</strong></label>
<select name="" id="userId" rel="0">
<option>Select</option>
</select>
<label for="active"><strong>Active</strong></label>
<select name="actvUsr" id="actvUsr" rel="1">
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
<button id="userGrpOk" >OK</button>
<button id="usrGrpCancel">Cancel</button>
</form>
<button type="button" id="addusr">CREATE NEW</button>
Javascript
var userDtl = $( "#formAddUser" ).dialog({
autoOpen: false,
width: 350,
modal: true,
});
// open modal form.
$( "#addusr" ).button().on( "click", function() {
populateUserData();
userDtl.dialog( "open" );
});
function populateUserData() {
var userDataXML = ajax data
$.ajax({
type : "POST",
url : getUserdata',
data : userDataXML,
dataType : "json",
contentType : "application/xml; charset=utf-8",
async : false,
success : function(jqXHR, textStatus,response) {
var shtml='';
$.each(jqXHR,function(index, data) {
shtml+='<option value="'+data.name+'">'+data.name+'</option>';
$("#userId").html("");
$("#userId").html(shtml);
});
},
error : function(jqXHR, textStatus, errorThrown) {
alert("error");
}
});
}