CODEWITHSUNDEEP
javascriptjqueryjquery-mobileautocomplete
Vishnu
Vishnu

Reputation: 2452

jquery mobile autocomplete , to show message while searching

I am using jquery mobile auto complete , Please see the demo at http://jsfiddle.net/Q8dBH/11/.

So whenever user press any letter,i need to show some message like "please wait."

So i added some code like below.But its showing only 1st time or 2nd time or not showing at all some times..How to show message whenever user types something until server responds back with data.

$ul.html('<center><a href="#">Searching Please Wait</a><br><img src="http://freegifts.in/diet/themes/images/ajax-loader.gif"></center>');

my full js is below.

$(document).on("pagecreate", ".ui-responsive-panel", function () {
    $(document).on("click", "li", function () {
        var text = $(this).text();
        $(this).closest("ul").prev("form").find("input").val(text);    });
    $("#autocomplete").on("filterablebeforefilter", function (e, data) {
        var $ul = $(this),
            $input = $(data.input),
            value = $input.val(),
            html = "";
        $ul.html("");
        if (value && value.length >0) {
            $ul.html('<center><a href="#">Searching Please Wait</a><br><img src="http://freegifts.in/diet/themes/images/ajax-loader.gif"></center>');
            //$ul.listview("refresh");
                            $('.ui-responsive-panel').enhanceWithin();
            $.ajax({
                url: "http://freegifts.in/diet/calorie.php",
                dataType: "jsonp",
                crossDomain: true,
                data: {
                    q: $input.val()
                }
            })
                .then(function (response) {
                $.each(response, function (i, val) {
                    html += "<li data-role='collapsible' data-iconpos='right' data-shadow='false' data-corners='false'><h2>Birds</h2>" + val + "</li>";
                });
                $ul.html(html);
                //$ul.listview("refresh");
                //$ul.trigger("updatelayout");
                $('.ui-responsive-panel').enhanceWithin();
            });
        }
    });
});

Upvotes: 1

Views: 564

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Working example: http://jsfiddle.net/Gajotres/Q8dBH/12/

Now this is a complex question. If you want to show jQuery Mobile AJAX loader there's one prerequisite, AJAX call must take longer then 50 ms (jQuery Mobile dynamic content enhancement process time will not get into account). It works in jsFiddle example but it may not work in some faster environment.

You can use this code:

$.ajax({
    url: "http://freegifts.in/diet/calorie.php",
    dataType: "jsonp",
    crossDomain: true,
    beforeSend: function() {
        // This callback function will trigger before data is sent
        setTimeout(function(){
            $.mobile.loading('show'); // This will show ajax spinner
        }, 1);
    },
    complete: function() {
        // This callback function will trigger on data sent/received complete
        setTimeout(function(){
            $.mobile.loading('hide'); // This will hide ajax spinner
        }, 1);          
        $.mobile.loading('hide'); // This will hide ajax spinner
    },              
    data: {
        q: $input.val()
    }
})

beforeSend callback will trigger AJAX loader and complete callback will hide it. Of course this will work only if AJAX call lasts more then 50ms. Plus setTimeout is here because jQuery Mobile AJAX loader don't work correctly when used with web-kit browsers, it is a triggering workaround.

Upvotes: 2

Related Questions