I'm running a database query to load a dropdownbox using jquery. Is there a way to display the words "Loading..." in the dropdownbox while the query is running?
Thanks.
- FYI, when you're adding items to the dropdown after you've retrieved it, steer clear of manually adding each option to the list if the number of options is more than a trivial amount. You'll want to do a batch insert similar to: var options = []; var index = -1; for (var item in items) { options[++index] = '<option value="'; options[++index] = item; options[++index] = '">'; options[++index] = items[item]; options[++index] = '</option>'; } options[++index] = '</select>'; $(ListBox).after(options.join('')); Warning code isn't tested and probably won't work as is.Brian H– Brian H2009-07-13 18:23:56 +00:00Commented Jul 13, 2009 at 18:23
- Ugh, the formatting isn't taking here, not real sure how to make it format properly. See stackoverflow.com/questions/815103/… as a launching point for performance with a large number of options. Basically, you want to limit the amount of DOM manipulation you're doing. It's quicker to do one large insert into the DOM than to update it a large amount of times.Brian H– Brian H2009-07-13 18:30:31 +00:00Commented Jul 13, 2009 at 18:30
Add a comment |
5 Answers
You can add temporary item to your dropdown list while the ajax is running:
$('#myDropDown').prepend($('<option></option>').html('Loading...')); 
2 Comments
SolutionYogi
Why call HTML method when you can simply do $('#myDropDown').prepend('<option>Loading..</option>'); Looks easier to read IMHO.
Saeed Heidarizarei
I'm New In Programming, Can You Tell Me, How Can I do That With my Code ? (stackoverflow.com/questions/42593871/…)
Let's call your drop down 'userChoice', you can write code like
$(document).ready( function() { //Before calling your ajax method, clear the select drop down. //and add a loading option. $('#userChoice') .children() .remove() .end() .append('<option value="">Loading...</option>'); $.ajax( //Load the userChoice as usual in success handler of your ajax call. success : function() { //Load #userChoice } ); } ); Comments
If there's nothing in there to begin with, just make that your default HTML and you've eliminated half of your jQuery.
<select> <option>Loading...</option> </select> And when your query has finished, just replace the single option with your results.
1 Comment
Andrei Rînea
this is the sanest option (no pun intended) in my opinion :) +1
add this before ajax post
$('#myDropDown').empty(); $('#myDropDown').append($('<option></option>').html('Loading...')); then again on success dynamically append dropdown
$('#myDropDown').empty(); $('#myDropDown').append($('<option></option>').val("").html("Select")); for (var i = 0; i < array.length; i++) { $('#myDropDown').append($('<option></option>').val(array[i].selectedvalue).html(array[i].selectedtext)); } 
Comments
If you are running the query through an AJAX call, you can use something like the following to first clear the dropdown list and insert the loading message (in client-side Javascript):
var lb = document.getElementById ("myDropdownList"); lb.options.length = 0; var newOpt = new Option("Loading...", ""); lb.options[0] = newOpt; // Your jquery call here ... 