0

On click of 'create new button' I am poping up a modal window form which has a dropdown . I am populating dropdown via ajax with populateUserData(). I can see that call has been made succesfully, but still not able to see data in a dropdown. Help me to figure out what wrong I am doing thanks.

      <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");

        }
    });

}

user2949332
  • 1
  • 4

1 Answers1

0

If you are sure that :

  • you are entering the success callback function,
  • the jqXHR data is correct,

then try this inside your $.each() :

Adding options to a <select> using jQuery?

That will give you :

success : function(jqXHR, textStatus,response) {
    var $select = $("#userId");
    $.each(jqXHR,function(index, data) {
        $select.append('<option value="'+data.name+'">'+data.name+'</option>');
    });
}

EDIT : Notice that you melted parameters order in the success function. jQuery doc says :

success

Type: Function( Anything data, String textStatus, jqXHR jqXHR)

Community
  • 1
  • 1
M'sieur Toph'
  • 2,534
  • 1
  • 21
  • 34
  • Thanks for replying. I tried the above code still no luck. – user2949332 Nov 20 '14 at 17:40
  • So the pb is in the data you received from the server ... Try some console.log() in each loop to know if engine is entering the callback function and if the received data is correct. – M'sieur Toph' Nov 20 '14 at 17:43
  • Vitaliy Matiyash(matiyvi) This is the data I am getting . Its working fine on Primary page problem is having it populate in modal. – user2949332 Nov 20 '14 at 17:51
  • You mean you have two DOM elements with the same ID `userId` ? It will never work, an ID should be unique. Are you sure your selector is working good. Did you try to log it to the console to verify. If the data is good, you probably have a pb with the selector ... As you do not provide a fiddle with the pb, it is difficult to solve it ... – M'sieur Toph' Nov 20 '14 at 21:59
  • Thanks for the reply, I was having a duplicate id which was causing the problem. – user2949332 Nov 21 '14 at 02:03