Progress bar inside list box

[PeteSpain]

Hi,

Is this possible? I have a group of list boxes that are populated from a mysql database and are dependant on the previously selected box. Is there any way that I could add a progress bar, inside the list box, top select, so that the slelects are only useable after all the data is retrieved from the database?

Thanks

Peter

[samuelcook]

presumably you are using ajax to pull the new select information in once the previous has been changed?

[PeteSpain]

Yes, that's correct.

[samuelcook]

ok then. i would do something like this:

<div id="loader-con"><div class="loader"><img src="/images/loader.gif" alt="loader"></div></div>

<div id="con-select-1">
	<select id="select1"></select>
</div>

<script type="text/javascript">
$('#con-select-1').append( $('#loader-con').html() )
$('#con-select-1 .loader').show();
$.ajax({
	type:"POST OR GET",
	url: "/path/to/page.php",
	data:"querystring",
	success:function(x){
		$('#select1').html(x);
		$('#select1 .loader').remove();
	}
});
</script>

Where my loader class would have style="display:none;position:absolute;top:0;left:0;width:100%;height:100%", and my select-con would have style="position:relative;overflow:hidden;"

then we can just throw the html of the loader-con html into the select-con html do our ajax then remove it; this will "disallow" people to use the select box until it is completely loaded.

Hopefully that is a good start; Let me know if you have any questions; Additionally I would recommend creating a background for your loader class; something like an opaque white that google uses or a dark black like nyro modal;