How to show a preloader during an app.request for autocomplete element


#1

Hi, I know how to use the preloader element, however I cannot to show the preloader until the autocomplete has finished loading all the elements into the autocomplete. I put show() event before to do the app. request(), but nothing is shown.

       //HERE WERE I START TO SHOW THE PRELOADER
       app.preloader.show();
       var url = urlServer + 'company/';
       var key = appStorage.get('loginKey');
       app.request({
            url: url,
            data: {keys: key},
            success: function (data) {
            	      console.log(data);
                      const  d = JSON.parse(data);
                      const company = d.data;
                      
                      var loadSelect = app.autocomplete.create({
                      inputEl: nameElement,
                      openIn: 'dropdown',
                      preloader: true, //enable preloader
                      valueProperty: 'prodotto', //object's "value" property name
                      textProperty: 'prodotto', //object's "text" property name
                      notFoundText: 'Nothing',
                      limit: 5,
                      typeahead: true,
                      dropdownPlaceholderText: 'Scrivi...',
                      source: function (query, render) {
                        var autocomplete = this;
                        var results = [];
                        if (query.length === 0) {
                          render(results);
                          return;
                        }
                        // Show Preloader
                        autocomplete.preloaderShow();
                         
                      
                       // Find matched items
                            for (var i = 0; i < company.length; i++) { 
                              if (company[i].prodotto && company[i].prodotto.toLowerCase().indexOf(query.toLowerCase()) === 0) results.push(company[i]);
                            }
                            // Hide Preoloader
                            autocomplete.preloaderHide();
                            // Render items by passing array with result items
                            render(results);
                        }
                      });
                      //HERE WHERE I STOP THE PRELOADER
                      app.preloader.hide();

            },//success
            error: function(){
            	app.preloader.hide();
            	app.dialog.alert("ERROR");
        }

});//request


#2

From first look, all looks correct. Is there any errors in console? Maybe request goes too fast and it just hides immediately. If issue is still relevant then would be good to see live example or JSFiddle with the issue


#3

Hi @nolimits4web thank you for your help. Before to respond you, I tried other solution, but without a good result. It is relavant. The code posted is inside a function that i call three time because in the same form i have three autocomplete. It is possible that it doesn’t work for this?
I can’t create a jsfiddle because the api are private


#4

Could be an issue there. But still would be good to see the JSFiddle. Just replace ajax calls to API with setTimeout() and mock data