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.

Solution 1

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.

Solution 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);
  });    
});

Comments

[ka_lin]

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($('<option></option>').attr("value", this.id).text(this.name)); }); }); });

[ka_lin]

doesn`t work either :|. does the spaces in the ajax response count?

[Codo]

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.

[ka_lin]

I am using chrome so I can see the ajax response, and I have no errors when running your modified script

[ka_lin]

response : [{"id":"0","name":"Mark"},{"id":"1","name":"Andy"},{id:"2","‌​name":"Richard"}] result: nothing happens

[ka_lin]

even this one : [{id:0,name:"Mark"},{id:1,name:"Andy"},{id:2,name:"Richard"}‌​]

[Marian Galik]

Are you sure that #sub_type is visible? Try to call $('#sub_type').html('<option>Anything</option>'); outside the ajax callback to see if it works (or even outside the onchange function).

[Codo]

Please use a JSON validator like 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.

[ka_lin]

thank you so much, i was panaking. Thanks for the patience too :-D