I want to refresh my specific div partition on page at every 1min. How can I do that?
Here my test structure:
<div id="test">
//something inside model items like #Model.TotalUpDeviceCount.ToString()
</div>
<script type="text/javascript">
$(document).ready(function () {
setInterval(function () {
refresh();
}, 60000);
});
function refresh() {
$('#test').modal.refresh();
}
</script>
there's a little more to it than your suggested code.
you want to show the updated data coming from your controller which requires a complete page refresh.
you can however retrieve the data from an api controller and update the div with polling.
setTimeout($.get("....", function(data) {
$("your div").html(data)
});, 1500)
Related
Helo there.
We have a javascript function when the page is loading, then "open" some stuff. it's made with .on('load', function().
Is works great for the first pageview. but when you refresh the page, the function does not work anymore/is not triggert. when you reload the page with shift+refresh it works again. is there a workaround or another solution?
thanks!
<script>
$('#zoomBtn img').on('load', function() {
$('.zoom').find('#musicinfo').toggleClass('showList');
});
</script>
Probably the images are loaded before you bind the event. Something like this should help.
function showList () {
$('.zoom')
.find('#musicinfo')
.toggleClass('showList');
}
$('#zoomBtn img')
.on('load', showList)
.each( function () {
if (this.complete) {
showList()
}
})
I have a trigger button on my page that activate to load code from another htmldoc into a div on my page.
Works great like here:
https://blog.kulturbanause.de/2012/12/inhalte-per-ajax-jquery-nachladen/
I take this code:
<script>
function kb_source_2_target() {
$.get('source.html', function(data) {
$('#target').html(data);
})
}
</script>
Now I want my trigger-button to start a second function after loading the code in the div.
in the loading code there is a div, f.e. class="divtofadeoutafter loading"
i want to trigger now the loading and then the fadeout of an other div in the loaded content.
Can I do this with a callback?
I tried this:
<script>
function kb_source_2_target() {
$.get('source.html', function(data) {
$('#target').html(data,
function callback(){
$(".divtofadeoutafterloading").fadeOut();
}
);
})
}
</script>
thanks for any idea
stefan
There is no callback in html() so you just need to do it inline since it is a synchronous operation.
function kb_source_2_target() {
$.get('source.html', function(data) {
$('#target').html(data)
$(".divtofadeoutafterloading").fadeOut();
})
}
$('#start').click(function () {
window.location.href=window.location.href;
runme();
});
This is my simple goal, every time user click the start button, I want the page to reload but still call the custom rume function. Please let me know if this is possible or there are other way. Thanks in advance.
Whenever you reload the page JS run again from start, So you can't directly trigger some function after page reload.
But in order to achieve this, you can use, sessionStorage
So, you can do something like:
$('#start').click(function () {
sessionStorage.setItem('callRunMe', '1')
window.location.href=window.location.href;
});
//On Page load
$(document).ready(function () {
if (sessionStorage.getItem('callRunMe')) {
runMe();
sessionStorage.removeItem('callRunMe');
}
});
you can set a flag into sessionStorage or localStorage and get the flag after document ready.
var SOTRAGE_NAME = 'needRunme'
$('#start').click(function () {
sessionStorage.setItem(SOTRAGE_NAME, true);
runme();
});
$(document).ready(function(){
var isNeedRunme = sessionStorage.getItem(SOTRAGE_NAME);
if(isNeedRunme){
runme();
}
})
Place your runme inside $(document).ready, and just use location.reload() to reload the page. Use localStorage to make sure this only happens when you click a button:
$(document).ready(() => {
if (localStorage.getItem("clickedStart") runme();
});
$("#start").on("click", () => {
localStorage.setItem("clickedStart", "true");
location.reload();
});
I have a question for Highchart using in ASP MVC5. I have 6 charts and I am showing just the one for the first page load. All my tags for chart creation and data in partialview. my javascript is also in partialview and I removed the javascript function from the partial view but the problem is still on.
The problem is I am refreshing the data in partial view and show it every minute
by
$(function () {
setInterval(function () { $('#container').load('/Dashboard/GetShow'); }, 60000);
});
but after the next minute refresh page shows all charts not only the one.
my functions are:
$('.show-chart').click(function (event) {
event.preventDefault();
$('.chart-title').html($(this).attr('title'));
$('.chart-section').hide();
$('.show-chart').removeClass('active');
$($(this).attr('href')).show();
$(this).addClass('active');
});
$(window).load(function (event) {
$('.chart-section').hide();
$('.chart-title').html($('.show-chart.active').attr('title'));
$($('.show-chart.active').attr('href')).show();
});
Could you help on this issue? Regards
Try something like following:
$(function () {
setInterval(function () { $('#container').load('/Dashboard/GetShow', function() {
$('.chart-section').hide();
$('.chart-title').html($('.show-chart.active').attr('title'));
$($('.show-chart.active').attr('href')).show();
}); }, 60000);
});
EDIT: Better Approach
function hideCharts()
{
$('.chart-section').hide();
$('.chart-title').html($('.show-chart.active').attr('title'));
$($('.show-chart.active').attr('href')).show();
}
$(function () {
// When page first load
hideCharts();
// Every time interval
setInterval(function () { $('#container').load('/Dashboard/GetShow', function() {
hideCharts();
}); }, 60000);
});
I have to refresh view page without clicking on refresh button.
Javascript code:--
<script type="text/javascript">
$(function () {
var metaId = $("#ID").val();
var img = $("##name input[type=hidden]").val();
if ("#found" == "False") {
$.post(rootURL + "Picture/AddThumb", { guidOrName: img, meta: metaId, id: contentId }, function (data) {
//arrangePoster([data]);
});
}
});
</script>
Post sometimes doesn't work.
It is better to use ajax jquery method.
http://api.jquery.com/jquery.ajax/
Then on Picture/AddThumb add printing parameters.
Use done to show data resulted ( to test also if it works correctly )