remote search at page load

[mijusParticipant]

On my form I have 3 comboboxies with remote search feature. The problem is that comboboxies are making Ajax calls to server at their initialize. The search string is empty and server returns empty string but this communication takes some time. That slows down appearing of my form window for nearly 1 second. Maybe there is a way not to perform server calls when there is nothing in search string?

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxcombobox/remotesearch.htm?arctic

[Peter StoevKeymaster]

Hi mijus,

The “formatData” function in that sample specifies what Search params are sent to the server. You can modify it if you wish.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[mijusParticipant]

Hi Peter,

Perhaps I don’t understand whats going on in “formatData” function. I changed sample to this but call to server at page load is still performed:

var dataAdapter = new $.jqx.dataAdapter(source,
{
formatData: function (data) {
if ($("#jqxcombobox").jqxComboBox('searchString') != undefined) {
data.name_startsWith = $("#jqxcombobox").jqxComboBox('searchString');
if (data.lenght > 0) {
return data;
}	
}
}
}
);

[Peter StoevKeymaster]

Hi mijus,

Yes, it would be, because when you create a ComboBox and its source is set to point to a dataAdapter, the widget will call the dataAdapter’s dataBind method which in this case will make a server call. If you do not wish such behavior, then create the ComboBox when you would like to use it, not on the page’s load.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[mijusParticipant]

Following your idea I have modified sample code so combobox is created without source parameter. That parameter is added when user clicks on combobox div and then first server call is performed. This solution removes server call on page load.

However new strange problem appears. When user enters 2 search string characters 2 server calls are made. First call contains no “name_startsWith” parameter and the second one goes with correct search string in “name_startsWith”.

        $(document).ready(function () {
            var theme = getDemoTheme();
            // prepare the data
            var source =
            {
                datatype: "jsonp",
                datafields: [
                    { name: 'countryName' },
                    { name: 'name' },
                    { name: 'population', type: 'float' },
                    { name: 'continentCode' },
                    { name: 'adminName1' }
                ],
                url: "http://ws.geonames.org/searchJSON",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12
                }
            };
	var dataAdapter = new $.jqx.dataAdapter(source,
                {
                    formatData: function (data) {
                        if ($("#jqxcombobox").jqxComboBox('searchString') != undefined && $("#jqxcombobox").jqxComboBox('searchString')) {
                            data.name_startsWith = $("#jqxcombobox").jqxComboBox('searchString');
			    return data;
                        }
                    }
                }
            );
            $("#jqxcombobox").jqxComboBox(
            {
                width: 250,
                height: 25,
   //             source: dataAdapter,
                remoteAutoComplete: true,
                autoDropDownHeight: true,
                theme: theme,
                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 + ", " + item.countryName + ", " + item.adminName1;
                        return label;
                    }
                    return "";   
                },
                search: function (searchString) {
                    dataAdapter.dataBind();
                }
            });
	    
		$("#jqxcombobox").click(function(){
			var source = $('#jqxcombobox').jqxComboBox('source');
			if (source == null) {
				$("#jqxcombobox").jqxComboBox({source: dataAdapter});
			}
		});
	    
        });
	
    </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>
    </div>
</body>
</html>

[mijusParticipant]

Update. Two server calls are performed every time user enters new search string. The first goes with previous search string parameter and the second with recent one.

[harunmahfudParticipant]

hello,
I have same problem with remote search.
The first call to server search string value is empty and second call is current string.
Is there any solution to this problem?

[Peter StoevKeymaster]

Hi harunmahfud,

This seems to does not happen in our demo so I suppose you either make unnecessary server call in your code or do not use the current version. Example: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxcombobox/remotesearch.htm?arctic. On search, only one server call is made containing the search string.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[harunmahfudParticipant]

Try debugging your example and I found this issue happened to your example when I type two characters with delay time.
Example I type “s” and two seconds later I type “a” then I it send two request to
http://api.geonames.org/searchJSON?callback=jQuery111109458951379638165_1412604943855&featureClass=P&style=full&maxRows=12&username=jqwidgets&name_startsWith=&_=1412605029744
and
http://api.geonames.org/searchJSON?callback=jQuery111109458951379638165_1412604943856&featureClass=P&style=full&maxRows=12&username=jqwidgets&name_startsWith=sa&_=1412605030248
The first link sent “name_startsWith” with empty string and the second link sent “name_startsWith” with “sa”.
Is this related with my problem?

[Peter StoevKeymaster]

Hi harunmahfud,

In this case it should send 2 requests. If you type a 3rd character with some delay it will send a 3rd request, too. Requests are send as you type.

Best Regards,
Peter Stoev

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

[harunmahfudParticipant]

Oh..okay, but why first request sent empty string?

[harunmahfudParticipant]

For your information, the first and the second request is sent simultaneously after the second string’s typed

[richardjansenParticipant]

Hello

I have the same problem. The combobox is requesting with an empty search string and then a second request with my search string. That is unwanted behaviour because I have set minLength to 5. I expect the first request after I’ve typed 5 characters and no request when there is no string (or length < 5) to search for.
Any idea to solve this?

Richard

[Peter StoevKeymaster]

Hi Richard,

It makes 1 call on our demo: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxcombobox/remotesearch.htm?arctic

Best Regards,
Peter Stoev

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

[gioParticipant]

Hi Peter,
we’re using jqx lib version: 3.7.1
Unfortunatelly we are facing the same problem.

So we found this thread and we just tried to debug with Fiddler your example (http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxcombobox/remotesearch.htm?arctic) but it seems having the same problem too.

At this link you can find a print screen of the Fiddler log result: jqxcombosearch – fiddler

As you can see, it seems that only the first call uses the right searchCriteria (“be” in this example).
But, if I clean up the input field and I try to put in some other text (“it”, “de”…as in the screen example) I always see a server call of 47Kb with “name_startsWith” parameter empty.

Is this the correct behaviour of the component?
Is there something that I’m not considering in my tests?

Thanks in advance for your support.
Best Regards
Giovanni

[Author]

Posts