Question

I’m doing something stupid. I’m trying to populate a combo box in a dialog with the product of an AJAX call using jQuery. Easy, right?

Here’s the dialog creation, etc:

<script type="text/javascript"> 
$(document).ready(function() {       
  var $dialog = $("#projDialog").dialog({ 
     open: function () { 
          $(this).load("projectdialog.jsp");              
     }, 
     autoOpen: false, 
     title: 'Project Management', 
     width: 500, 
     height: 300, 
     modal:true 
     }); 
  $dialog.css('font-size', 12); 
  $("#projects").click(function() {    
     $.getJSON("getProjects.html", function(result) {       
        $.each(result, function() { 
           alert(this); 
           $("#existingProject").append($("<option />").val(this).text(this)); 
        });  
     }); 
     $dialog.dialog('open');   // prevent the default action, e.g., following a link 
     return false; 
  });       
});    
</script>

And here is the div that goes into the jQuery dialog:

<div id="projDialog" title="Project Management"> 
  <p>Select an existing project:</p> 
  <form action="manageProjects.html" method="post"> 
     <select name="existingProject"></select> 
     <br /> 
     <p>Or create a new one:</p> 
        New Project Name: <input type="text" name="newProjName" /><br />       
     <br/> 
     <input type="submit" value="Submit" /> 
  </form> 

So what I’m expecting to happen is when I click on the HTML entity “projects” it should open a dialog and execute “getJSON” returning a “results” object.

I stuck in an alert(this) to show me what came back. It’s working.

I used an append to the #existingProject which is the name of the comboBox I want to populate.

So riddle me this: How is it I can get my alert to pop up with the result I expect (a single String value of “Test” at the moment), but it doesn’t append to the comboBox? All I get is the empty combobox which I can see in the Chrome JS debugger.

Is $(“#existingProject”) not a correct jQuery selector somehow? It seems like an error would be useful here (I’m seeing a theme) instead of silently ignoring my amateurish attempts…

[EDIT] As requested, JSON coming back is VERY simply collection of Strings for Project names. Right now there is only one project named “Test”.

[
"Test"
]

Answer 1

Your selector is looking for an ID that doesn’t exist, change selector to

   $('select[name="existingProject"]')

Or better yet add the ID to element to use same selector you already have. ID selectors are more efficient

 <select id="existingProject" name="existingProject"></select>