Popuplate dropdown with ajax

[remico]

Hi all,

Probably a stupid question and I read all the wiki and forums but I can?t get my dropdown list filled based on AJAX. I can't use CCD in this case because I have to do some stuff on the data needed for the dropdown.

I can fill a simple textfield based on AJAX based on user_ajax.php and a JS function called on change, but I can?t populate a dropdown...

I?m now using this sample from wiki:

function ajaxTest() {
var url = "index.php?option=com_fabrik&format=raw&task=plugin.userAjax&method=etStateDropDown";
new Request({url:url,
method: 'get',
update: document.id('jos_fabrik_formdata_13___states')
}).send();
}

My php script is returning this string (JSON) as a sample: [{"value":"","text":"","disable":false},{"value":"1","text":"A4"},{"value":"3","text":"A3"},{"value":"7","text":"SRA3"}]

There are no JS errors in the console and I'm receiving the string from my script, but it is not populating my dropdown... I'm noticing that dropdown-min.js is not called (I think this is containing the update function) and that is probably the problem, but I don't know how to do this.

Any tips on what I'm missing? My question is actually how to populate a dropdown with AJAX...

 

[remico]

Using today's github on a J3.3 system by the way...

 

[remico]

Hi all I couldn't find a true Fabrik way to do it, so I did it like this.

Calling this funtion in a "change" event:

function get_gewicht(_type, _formaat, _materiaal) {
    var target = document.getElementById('dvf_opdracht___gewicht');
    var url = "index.php?option=com_fabrik&format=raw&task=plugin.userAjax&method=get_gewicht&_type="+_type+"&_formaat="+_formaat+"&_materiaal="+_materiaal;
    new Request({url:url,
        method: 'get',
        //update: document.id('jos_fabrik_formdata_13___states')
        onSuccess: function(json_response){
            target.empty();
            populate_dropdown(target,json_response);
 
        }
    }).send();
}

With this function to actually populate the dropdown with the json response from AJAX:

function populate_dropdown(element, json){
    element.empty();
   
    var new_opts = JSON.decode(json);
    var new_opt = new Element('option'); 
       
    new_opt.setProperty('value','Selecteer');
    new_opt.appendText('Selecteer');
    element.adopt(new_opt);
   
    for (var i = 0; i < new_opts.length; i++) {
           
        var new_opt = new Element('option'); 
       
        new_opt.setProperty('value',new_opts[i].value);
        new_opt.appendText(new_opts[i].text);
       
        element.adopt(new_opt);
    }
}

Probably not the best way to do it, but it works nicely. Any other Fabrik tips on this are still welcome!