Reputation: 2056
Following is my javascript in which I've been trying to show certain div and after the function being performed the div should get hide by itself but i am having this issue that in same function both doesnot work like to show first then after some time interval hide that div but when i put event of show and hiding separately it worked fine. Kindly let me know how can i modify the following code so that after processing the result it should hide that div
function jq(input)
{
if (input == 'abc')
{
$("#show").show(1000);
document.getElementById('sele').options.length = 0;
$('#sele').append('<option value="test">Testing</option>').updateSelect();
$("#show").hide(1000);
}
}
<div id="show" > <img src="ajax-loader.gif" width="16" height="16" /> </div>
Upvotes: 0
Views: 61
Reputation: 87073
$("#show").show(1000, function() {
$('#sele').empty(); // instead of: document.getElementById('sele').options.length = 0;
$('#sele').append('<option value="test">Testing</option>').updateSelect();
// make a delay using setTimeout()
setTimeout(function() {
$("#show").hide(1000);
}, 500);
});
Full Code
function jq(input) {
if (input == 'abc') {
$("#show").show(1000, function() {
$('#sele').empty();
$('#sele').append('<option value="test">Testing</option>').updateSelect();
setTimeout(function() {
$("#show").hide(1000);
}, 500);
});
}
}
Upvotes: 1
Reputation: 71918
I think you are getting an error on the following line (check the console):
document.getElementById('sele').options.length = 0;
length
is read-only, that's not the way to empty the select. Since you're using jQuery, you could be doing something like this instead:
$('#sele').empty();
Upvotes: 0