have a style switcher bar across the top of my theme. It works for the most part, but you have to hit F5 or Refresh to see the new style. How do I finish this jQuery to auto-refresh upon a successful execution?
jQuery.fn.styleSwitcher = function(){
$(this).click(function(){
loadStyleSheet(this);
return false;
});
function loadStyleSheet(obj) {
$('body').append('<div id="overlay" />');
$('body').css({height:'100%'});
$('#overlay')
.css({
display: 'none',
position: 'absolute',
top:0,
left: 0,
width: '100%',
height: '100%',
zIndex: 1000,
background: 'black url(http://mytheme.com/loading.gif) no-repeat center'
})
.fadeIn(500,function(){
$.get( obj.href+'&js',function(data){
$('#stylesheet').attr('href','css/' + data + '.css');
cssDummy.check(function(){
$('#overlay').fadeOut(500,function(){
$(this).remove();
});
});
});
});
}
var cssDummy = {
init: function(){
$('<div id="dummy-element" style="display:none" />').appendTo('body');
},
check: function(callback) {
if ($('#dummy-element').width()==2) callback();
else setTimeout(function(){cssDummy.check(callback)}, 200);
}
}
cssDummy.init();
}
$.ajax({
success:function(){
$('#overlay').load('http://mytheme.com');
}
});
You can use the location. reload() method to reload or refresh an entire web page or just the content inside an element. The . reload() method can be triggered either explicitly (with a button click) or automatically.
Use location. reload() method in setTimeout() to reload page after specific seconds using JavaScript.
setTimeout(function () { location. reload(1); }, 5000);
You can use
success: function() {
window.location.reload(true);
}
window.location.reload(true);
will do the trick.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With