jqxdropdownlist create on the fly

[antrax13Participant]

Hi I want to achieve following:

I have a multiselect dropdown that works great and then based on selection it will create another dropdown with multiselect still works but as soon as I want to initialise jqxdropdownlist on second multiselect it is failing stating “Uncaught Error: Invalid Selector” but when I debug the id is there.

$('#firstmultiselect').jqxDropDownList({
                    checkboxes: true,
                    displayMember: "description",
                    valueMember: "id",
                    width: "99%",
                    height: 28
                });

$("#firstmultiselect").on('checkChange',function(event){
                    if(event.args){
                        var item = event.args.item;
                        if(item){
                            $('#wp_procedures_selection').show();
                            var items = $(this).jqxDropDownList('getCheckedItems');
                            if(items.length > 0){
                                // if item is checked create block else remove block
                                if(item.checked){
                                    //create
                                    $.get('controllers/getProcedures.php',{technique_id:item.value},function(data){
                                        var html = '';
                                        var procedures = $.parseJSON(data);
                                        html+= '        <select name="wp_technique_'+item.value+'" id="wp_technique_'+item.value+'" class="form-control input-sm" multiple>';
                                        for (var i = 0; i < procedures.length; i++) {
                                            var procedure = procedures[i];
                                            html+= '<option value="'+procedure.procedurename+'">'+procedure.procedurename+'</option>';
                                        }

                                        $("#allocating_techniques_block").append(html);
                                    });
                                    $('#wp_technique_'+item.value).jqxDropDownList({
                                        checkboxes: true,
                                        displayMember: "description",
                                        valueMember: "id",
                                        width: "99%",
                                        height: 28
                                    });
                                }else{
                                    //remove
                                    $('#allocated_technique_'+item.value).remove();
                                }
                            }else{
                                $('#allocated_technique_'+item.value).remove();
                                // hide selection of procedures because no technique is selected
                                $('#wp_procedures_selection').hide();
                            }
                        }
                    }
                });

basically this bit bellow is not working and as soon as I remove it from code I see select but when I leave it there in console I got this msg “Uncaught Error: Invalid Selector #wp_technique_5” and my select is not visible at all

$('#wp_technique_'+item.value).jqxDropDownList({
                                        checkboxes: true,
                                        displayMember: "description",
                                        valueMember: "id",
                                        width: "99%",
                                        height: 28
                                    }); 

[HristoParticipant]

Hello antrax13,

You could try to create the $('#wp_technique_' + item.value).jqxDropDownList wrapped in the setTimout because it is possible this item doesn’t exist to this moment.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts