CODEWITHSUNDEEP
jquerytwitter-bootstrapfuelux
Tevis
Tevis

Reputation: 739

Show "Loader" in Input Text

I would like to show a loader inside an <input type="text" /> at the end. I have an autocomplete field that can take some time to load its ajax query, and I would like to indicate to the user that a search is being performed by adding the loader. Here's what I have:

            $(".autocomplete-ad-users").autocomplete({
                source: function (request, response) {
                    var $element = $(this.element);

                    var $loader = $("<div data-initialize='loader' class='loader'></div>");

                    $element.after($loader);
                    //start loading spinner
                    $loader.loader();
                    $loader.loader('play');

                    $.ajax({
                        url: '/Search/SearchADUsers',
                        data: { term: request.term },
                        success: function (data) {
                            response($.map(data, function (item) {
                                return {
                                    label: item.Name + " - " + item.UniqueId,
                                    value: item.Id,
                                    tag: item.UniqueId
                                }
                            }));
                        }
                    });
                },
                minLength: 3,
                select: function (event, ui) {
                    event.preventDefault();

                    var success = $(event.target).data('success');

                    //this allows us to apply 'data-success="functionName"' to an input
                    //with this class to override the default select function.
                        if (success) {
                            window[success](event, ui);
                        }
                        else {
                            UserSelected(event, ui);
                        }
                    }
            });

Now I've watched my DOM tree during execution and the $loader element is being properly added after the input text, but it doesn't seem to have a height and it's not visible.

Any ideas what's wrong here?

EDIT Well I was missing my forward slash on the closing tag for the div, but that didn't solve the problem.

EDIT It may be important to know that the input field in question is on a bootstrap modal.

EDIT I've now gotten the loader element to display by adding fuelux class to the parent element. But the loader is displaying beneath the input field. How can I get it to display inside the input field at the end? Changing after() to append() didn't change anything.

Upvotes: 0

Views: 4916

Answers (1)

Jeremy Thille
Jeremy Thille

Reputation: 26370

To move the loader inside the input (at least visually, not the HTML element itself), give it a position:relative and move it around with top:-30px for instance.

Upvotes: 1

Related Questions