update select list based on other select value

crush123

my editor form has a number of select lists, and I have managed to get the select to update its contents on change, using the update() method.

the sql for the select list uses a static value, but I want to pass in a value on change and using ajax, refresh the editor instance.

So far, when I debug, it looks like the ajax result returned is correct, but the select list is not updated.

my js snippet looks like this

$('select', editor.field('tblitem.ItemSchoolID').node()).change( function () {
        var val = editor.field('tblitem.ItemSchoolID').val();
        $.ajax ({
            url: '/plugins/shop/ajax/ajax_items.php',
            data: {schoolID: val}
        })

            editor.field('tblitem.ItemTypeID').update( json.refitemtypex );

        } );

my ajax.php snippet looks like this

$filter = isset($_GET['schoolID'])?$_GET['schoolID']:"1";
$data['refitemtypex'] = $db
    ->sql( "SELECT refitemtype.ItemTypeID AS value, refitemtype.ItemTypeDescription AS label FROM refitemtype LEFT JOIN refschoolitemtype ON refitemtype.ItemTypeID = refschoolitemtype.ItemTypeID LEFT JOIN refschool ON refschoolitemtype.SchoolID = refschool.SchoolID WHERE refschool.SchoolID = ".$filter." ORDER BY refitemtype.ItemTypeDescription ASC")
    ->fetchAll();   

am i doing it right (ish) ?

allan

Ajax is asynchronous (the first letter in the acronym :-) ). So you need to put the update call at a point where the data is available, which is in the jQuery success callback for $.ajax.

Allan

crush123

:-0

Awesome, here is my updated js snippet

$('select', editor.field('tblitem.ItemSchoolID').node()).change( function () {
        var val = editor.field('tblitem.ItemSchoolID').val();
        $.ajax ({
            url: '/plugins/shop/ajax/ajax_items.php',
            data: {schoolID: val},
            dataType: 'json',
            success: function (json) {
            editor.field('tblitem.ItemTypeID').update( json.refitemtypex );
            }
        })

        } );