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);
});
Related
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)
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'm using Youtube SPF for my web page and I have a lot of js and they work as expect it's okey so far but my ajax is not working by clicking for example after page loaded if I click any page the page has loaded with ajax but nothing is work..and I want to share with you my instance js which is not working after ajax
for example this code is not work after ajax
$(".all-content-tab .tab-content,.trustyou-tab .tab-content").find(".tab-pane:first").addClass("active");
or this
$(".add-active").find('li:first').addClass("active");
and I change my all event function with this
$(document).on("click","#element",function(){
//
})
instead of this
$("#element").on("click",function(){
//
})
and last thing
my spf function
$(function () {
spf.init();
NProgress.configure({ showSpinner: false });
$(document).on('spfrequest', function (event) {
NProgress.set(0.4);
});
$(document).on('spfprocess', function (event) {
NProgress.set(0.6);
NProgress.set(0.8);
});
$(document).on('spfdone', function (event) {
NProgress.set(1.0);
NProgress.done();
});
$(document).on('spfhistory', function (event) {
NProgress.set(0.7);
NProgress.set(0.9);
NProgress.set(1.0);
NProgress.done();
});
});
how can I fix this problem ? I read all document but nothing could I do
I am having trouble attaching a timing event to my function I want this to on execute the function after 25 seconds. what am I doing wrong?
setTimeout("ajaxTimeout();", 25000);
$(document).on({
//open popup here
'pageshow': function ajaxTimeout(){
$('#askforsomething').popup('open');
}
}, '#homepage');
Two points:
You probably mean $(document).ready(function () { ... }). Alternatively, a shorthand for this is simply $(function () { ... }).
You can (and should) pass a function to setTimeout instead of a code string.
Result:
$(function () {
setTimeout(function () {
$('#askforsomething').popup('open');
}, 25000);
});
I don't know all the logic behind it but this did work for me. and the guy above looks like he was pretty close to the same.
$(document).on({
//open popup here
"pageshow": function () {
setTimeout("$('#askaquestion').popup('open');", 15000);
}
}, "#homepage");
You can add JS events in SugarCRM 7.2 by creating a custom record.js.
The problem I'm having is that they fire before the page is loaded so elements I'm trying to affect don't exist.
I have tried the following:
$(document).ready(function() { alert(0); }) // fires before page is loaded
$(document).on('load', function() { alert(1); }) // doesn't fire at all
$(window).load(function() { alert(2); }) // doesn't fire at all
Any help in resolving this would be much appreciated.
record.js
({
extendsFrom: 'RecordView',
initialize: function (options) {
this._super('initialize', [options]);
SUGAR.util.ajaxCallInProgress = function () {
alert(0);
$('[name="duplicate_button"]').hide();
},
})
The way I got this to work was to use the following code in custom/modules//clients/base/views/record/record.js
({
extendsFrom: 'AccountsRecordView',
initialize: function (options) {
this._super('initialize', [options]);
this.on("render", this.SetHomeButtons, this); //calls SetHomeButtons
},
SetHomeButtons: function () {
some code ....
},
})
The function SetHomeButtons is called once the page is loaded
Another way of doing it is to overwrite the render function to call your custom code
That doesn't work because of AJAX.
Edit: in Sugar 7 you have the function SUGAR.util.ajaxCallInProgress() it retruns false when every Request is done (all Content Elements have been loaded)