I have the following code which loads content into a div
, then fades in:
$('a.search').click(function(){
$('.pop-up').load('search.php', function(){
$(this).fadeToggle();
});
});
However, I'm assuming this is making a request each time the a.search
is clicked, if it is a toggle?
Is there a more economic way to achieve this toggle without making multiple calls?
Implement the toggle in your own code instead of using .fadeToggle
.
$('a.search').click(function(){
if ($('.pop-up').is(':visible')) {
$('.pop-up').fadeOut();
} else {
$('.pop-up').load('search.php', function(){
$(this).fadeIn();
});
}
});
You can check for one time loading by setting a global variable.Assuming that your pop-up div style is set to display:none
, example code is provided below:
var isPopUpLoaded = false;
$('a.search').click(function(){
if(isPopUpLoaded==false){
$('.pop-up').load('search.php', function(){
isPopUpLoaded = true;
});
}
$('.pop-up').fadeToggle();
})
;