What is the proper way to load a comboBox with jQuery and AJAX? I've botched it somehow

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"
]

score 1 · Accepted Answer · answered Mar 15 '12 at 21:11

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>

answered Mar 15 '12 at 21:11

charlietfl

170,828
13
121
150

I'm new to jQuery so forgive me, but I defined in the HTML a – Raevik Mar 15 '12 at 21:16
Oh, I see. Name isn't right...I tried to key off name instead of id. – Raevik Mar 15 '12 at 21:17
also have a problem with what is beeing populated in option now I look closer, need sample of JSON to help further, can update in main post – charlietfl Mar 15 '12 at 21:25
Posted JSON (what there is of it). I'm still stumped, unfortunately. I fixed the id issue on the – Raevik Mar 15 '12 at 21:47
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/8946/discussion-between-brent-and-charlietfl) – Raevik Mar 15 '12 at 21:54

score 1 · Answer 2 · edited May 23 '17 at 12:11

1

Additional, this could also be helpful for you: jquery fill dropdown with json data

There, this is used for appending:

.appendTo('#existingProject');

This would be the case, if you use

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

edited May 23 '17 at 12:11

Community

1
1

answered Mar 15 '12 at 21:20

Chris

739
2
8
23

What is the proper way to load a comboBox with jQuery and AJAX? I've botched it somehow

2 Answers2