Trigger Change Event - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: change, combobox, event, jqxComboBox, search, trigger, val

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

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

Author

Trigger Change Event Posts

May 20, 2015 at 9:59 am 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.

May 21, 2015 at 5:22 am 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/

July 17, 2015 at 8:37 am 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');
			
			
		}

July 17, 2015 at 10:10 am 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/

July 17, 2015 at 10:34 am 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

Author

Posts

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

You must be logged in to reply to this topic.