Response title
This is preview!
listviewbeforefilter / asynchronous AJAX request / update
in jQuery Mobile
•
10 years ago
I use the following code for a listviewbeforeupdate with external data.
Some changes from the examples on this site:
- no page ID is identified as the javascript is only inserted dynamically with PHP subject to the page loaded).
- no reload if >3 letters
The latter adjustment should be a performance booster as the data-filter is quicker than multiple Ajax requests (at least in my case)
Everything works fine with a synchronous Ajax request. However with an asynchronous Ajax request (which I prefer as it is more user friendly) it may happen that the user has typed data after the Ajax request is completed. The data-filter is than only updated if more data is entered.
What I would like to do is file a "data-filter update" request after the "$ul.trigger( "updatelayout");"
Live example: http://jetjesstrijk.x10.mx/btw/iphone2.php?pagina=zaaki example seach query C-77
- <script>
- $( document ).on( "pageinit", function() {
- $( "#autocomplete" ).on( "listviewbeforefilter", function ( e, data ) {
- var $ul = $( this ),
- $input = $( data.input ),
- value = $input.val(),
- html = "";
- if (value.length < 4 ) {
- $ul.html( "" ); /*no longer use AJAX if > 3 letters */
- }
- if ( value && value.length > 2 && value.length < 4 ) {
- $ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
- $ul.listview( "refresh" );
- var xmlhttp;
- xmlhttp=new XMLHttpRequest();
- xmlhttp.onreadystatechange=function()
- {
- if (xmlhttp.readyState==4)
- {
- html = xmlhttp.responseText;
- $ul.html( html );
- $ul.listview( "refresh" );
- $ul.trigger( "updatelayout");
- }
- }
- xmlhttp.open("GET","ajax.php?q="+value,true);
- xmlhttp.send();
- }
- });
- });
- </script>
1