Dropdown populate ajax

Question

I have the following issue: When i select an element from a drop down i want to auto populate another drop down via ajax. the idea is that the subcategory(sub_type) doesn't load after selecting the "type".

HTML
<select id="type" name="type">
<option value="1">General</option>
<option value="2">Test</option>
</select>
<select id="sub_type" name="sub_type">
</select>


SCRIPT
    $("#type").change(function(){
    $.getJSON("ajax/add_subcathegory.php",{id: $(this).val(), ajax: 'true'}, function(j){
          var options = '';
          for (var i = 0; i < j.length; i++) {
            options += '<option value="' + j[i].id+ '">' + j[i].name+ '</option>';
          }
        });
    $("#sub_type").html(options);
    });

My ajax script returns:

[{id: 0, name: 'Mark'}, {id:1, name: 'Andy'}, {id:2, name: 'Richard'}]

But the subcathegory (secont select) isn`t loaded.

It is not clear what problem you are having. Can you restate your question? — William Niu, Aug 17 '11 at 10:24

Codo · Accepted Answer · 2011-08-17T11:24:35.450

13

Assuming that the Ajax success function is indeed called, change the function code to:

          var $subType = $("#sub_type");
          $subType.empty();
          $.each(j, function () {
            $subType.append($('<option></option>').attr("value", this.id).text(this.name));
          });

Your main problems currently are:

the html function is called only once because it's outside of the sucess function.
the elements in the Ajax data have the keys id and name and not optionValue and optionDisplay

Update:

The returned JSON is invalid. String have to be quoted with double quotes, not single quotes. As a result, the getJSON() call fails silently.

edited Aug 17 '11 at 11:24

answered Aug 17 '11 at 10:35

Codo

75,595
17
168
206

is the following correct? becouse it doesn`t work either $("#type").change(function(){ $.getJSON("ajax/add_subcathegory.php",{id: $(this).val(), ajax: 'true'}, function(j){ var $subType = $("#sub_type"); $.each(j, function () { $subType.append($('').attr("value", this.id).text(this.name)); }); }); }); – ka_lin Aug 17 '11 at 10:53
When you say "it doesn't work" I guess you mean nothing happens. Please try to debug where it fails so we can better help you. Have a look at Firefox's Javascript console (or an equivalent console in your browser) to see whether a Javascript error occurs. If not, use Firebug, Fiddler or a similar tool to watch the network requests and shows as the Ajax request and the Ajax response. With Firebug, you can also set a breakpoint in your success function to see whether it is called at all. – Codo Aug 17 '11 at 11:05
I am using chrome so I can see the ajax response, and I have no errors when running your modified script – ka_lin Aug 17 '11 at 11:09
response : [{"id":"0","name":"Mark"},{"id":"1","name":"Andy"},{id:"2","name":"Richard"}] result: nothing happens – ka_lin Aug 17 '11 at 12:19
even this one : [{id:0,name:"Mark"},{id:1,name:"Andy"},{id:2,name:"Richard"}] – ka_lin Aug 17 '11 at 12:22
Please use a JSON validator like http://jsonformatter.curiousconcept.com/ to validate your JSON first. All keys have to be quoted but your examples have only 2 of 3 or none at all. – Codo Aug 17 '11 at 12:33
thank you so much, i was panaking. Thanks for the patience too :-D – ka_lin Aug 17 '11 at 12:54

score 2 · Answer 2 · answered Aug 17 '11 at 10:35

2

The problem is, that you are assigning the html to #sub_type right after the ajax JSON call. You should assign it in the ajax callback function like this:

$("#type").change(function(){
  $.getJSON("ajax/add_subcathegory.php",{id: $(this).val(), ajax: 'true'}, function(j){
    var options = '';
    for (var i = 0; i < j.length; i++) {
      options += '<option value="' + j[i].id + '">' + j[i].name + '</option>';
    }
    $("#sub_type").html(options);
  });    
});

answered Aug 17 '11 at 10:35

Marian Galik

876
8
21

doesn`t work either :|. does the spaces in the ajax response count? – ka_lin Aug 17 '11 at 10:55
Are you sure that #sub_type is visible? Try to call $('#sub_type').html(''); outside the ajax callback to see if it works (or even outside the onchange function). – Marian Galik Aug 17 '11 at 12:26

Dropdown populate ajax

2 Answers2

Linked