jQuery UI Widgets Forums Lists ComboBox Trigger Change Event

This topic contains 4 replies, has 2 voices, and was last updated by  srosam 8 years, 9 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Trigger Change Event #71331

    srosam
    Participant

    Hi, is it possible to trigger the change event.

    I have the following javascript:

    $(‘#combo’).jqxComboBox(‘val’, ‘bob’);

    The change event is not fired and the data is not being loaded.
    Data should be loaded using json from a web api call.

    Works fine when I type into the combo.

    Thanks.

    Trigger Change Event #71375

    Dimitar
    Participant

    Hi srosam,

    As the combobox documentation states, this event is triggered when the user selects an item. In your case, if “bob” is an existing item from the combobox’s source, use selectItem instead of val. If you wish some function to be executed on the change event and when you call val, you can try the following:

    function myFunction() {
        ...
    }
    
    ...
    
    $('#jqxComboBox').on('change', function(event) {
        myFunction();
    });
    
    ...
    
    $('combo').jqxComboBox('val', 'bob');
    myFunction();

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Trigger Change Event #73860

    srosam
    Participant

    In my DoSomething function im trying to set the value and then trigger the search, in this case calling the dataBind function.
    Search is not called and nothing happens.

    Thanks.

    var dataAdapter = null;
    		
    		$(document).ready(function () {
                // prepare the data
                var source =
                {
                    datatype: "jsonp",
                    datafields: [
                        { name: 'countryName' },
                        { name: 'name' },
                        { name: 'population', type: 'float' },
                        { name: 'continentCode' },
                        { name: 'adminName1' }
                    ],
                    url: "http://api.geonames.org/searchJSON",
                    data: {
                        featureClass: "P",
                        style: "full",
                        maxRows: 12,
                        username: "jqwidgets"
                    }
                };
    
                dataAdapter = new $.jqx.dataAdapter(source,
                    {
                        formatData: function (data) {
                            if ($("#jqxcombobox").jqxComboBox('searchString') != undefined) {
                                data.name_startsWith = $("#jqxcombobox").jqxComboBox('searchString');
                                return data;
                            }
                        }
                    }
                );
    
                $("#jqxcombobox").jqxComboBox(
                {
                    width: 250,
                    height: 25,
                    source: dataAdapter,
                    remoteAutoComplete: true,
                    autoDropDownHeight: true,               
                    selectedIndex: 0,
                    displayMember: "name",
                    valueMember: "countryName",
                    renderer: function (index, label, value) {
                        var item = dataAdapter.records[index];
                        if (item != null) {
                            var label = item.name + "(" + item.countryName + ", " + item.adminName1 + ")";
                            return label;
                        }
                        return "";
                    },
                    renderSelectedItem: function(index, item)
                    {
                        var item = dataAdapter.records[index];
                        if (item != null) {
                            var label = item.name;
                            return label;
                        }
                        return "";   
                    },
                    search: function (searchString) {
                        dataAdapter.dataBind();
                    }
                });
    			
    			$('#jqxcombobox').on('change', function(event) {
    				alert("bob");
    			});
    
            });
    		
    		var doSomething = function(){
    			
    			$("#jqxcombobox").val('be');
    			dataAdapter.dataBind();
    			//var search = $('#jqxcombobox').jqxComboBox('search');
    			
    			
    		}
    Trigger Change Event #73870

    Dimitar
    Participant

    Hi srosam,

    Please try the following solution:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare the data
                var source =
                {
                    datatype: "jsonp",
                    datafields: [
                        { name: 'countryName' },
                        { name: 'name' },
                        { name: 'population', type: 'float' },
                        { name: 'continentCode' },
                        { name: 'adminName1' }
                    ],
                    url: "http://api.geonames.org/searchJSON",
                    data: {
                        featureClass: "P",
                        style: "full",
                        maxRows: 12,
                        username: "jqwidgets"
                    }
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source,
                    {
                        formatData: function (data) {
                            if ($("#jqxcombobox").jqxComboBox('searchString') != undefined) {
                                data.name_startsWith = $("#jqxcombobox").jqxComboBox('searchString');
                                return data;
                            }
                        }
                    }
                );
    
                $("#jqxcombobox").jqxComboBox(
                {
                    width: 250,
                    height: 25,
                    source: dataAdapter,
                    remoteAutoComplete: true,
                    autoDropDownHeight: true,
                    selectedIndex: 0,
                    displayMember: "name",
                    valueMember: "countryName",
                    renderer: function (index, label, value) {
                        var item = dataAdapter.records[index];
                        if (item != null) {
                            var label = item.name + "(" + item.countryName + ", " + item.adminName1 + ")";
                            return label;
                        }
                        return "";
                    },
                    renderSelectedItem: function (index, item) {
                        var item = dataAdapter.records[index];
                        if (item != null) {
                            var label = item.name;
                            return label;
                        }
                        return "";
                    },
                    search: function (searchString) {
                        dataAdapter.dataBind();
                    }
                });
    
                var doSomething = function () {
                    $("#jqxcombobox").val('be');
                    $("#jqxcombobox input").keyup();
                }
    
                doSomething();
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <span>Search for a City:</span>
            <div style="margin-top: 7px; margin-bottom: 5px;" id="jqxcombobox">
            </div>
            <span>ex: be</span>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Trigger Change Event #73873

    srosam
    Participant

    Well that works perfectly.

    I cant see why the code in my full solution isnt working.

     var ownerdataAdapter = new $.jqx.dataAdapter(ownersource, {
            formatData: function (data) {
                if ($('#owner').jqxComboBox("searchString") !== undefined) {
                    data.filter = $('#owner').jqxComboBox("searchString");
                    return data;
                }
                return null;
            }
        });

    were using data.filter but this isnt being set as there is nothing in the searchString

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.