CODEWITHSUNDEEP
javascriptasp.netuser-controls
Orkid Ako
Orkid Ako

Reputation: 11

JavaScript inside user control doesn't run

I'm having troubles with user controls and JavaScript.

I have a user control that has a timer in it. The timer is being updated every 5 seconds by JavaScript inside the user control itself (in the .ascx file). During run time, a few instances of my user control is instantiated within the same page, inside an UpdatePanel.

The timer works just fine when there is only one instance of my user control. But when there are more than one instance, only the timer of the last instance gets updated every 5 seconds, and the rest don't.

Here's my script:

var start = new Date('<%=session.startTime%>');
var stat = '<%=session.status%>'

UpdateValues();
AutoUpdateValues();

function AutoUpdateValues(){
    setInterval(function () {
        UpdateValues();
    }, 5000);
}

function UpdateValues() {
    //update time elapsed
    var totalSec = Math.ceil((new Date() - start) / 1000); //time elapsed in seconds
    var hr = Math.floor(totalSec/3600);
    var min = Math.floor((totalSec % 3600)/60);
    var sec = totalSec % 60;
    if (stat == 2) {
        $('#<%=lblTimeElapsed.ClientID%>').text(hr + "h " + min + "m " + sec + "s" );
    }
}

[Update]

var amnt = $('#<%=lblAmount.ClientID%>');
var start = new Date('<%=session.startTime%>');
var stat = '<%=session.status%>';

<%=this.ClientID %>UpdateValues();
<%=this.ClientID %>AutoUpdateValues();

function <%=this.ClientID %>AutoUpdateValues() {
    setInterval(<%=this.ClientID %>UpdateValues, 5000);
}

function <%=this.ClientID %>UpdateValues() {
    //update time elapsed
    var totalSec = Math.ceil((new Date() - start) / 1000); //time elapsed in seconds
    var hr = Math.floor(totalSec / 3600);
    var min = Math.floor((totalSec % 3600) / 60);
    var sec = totalSec % 60;
    if (stat == 2) {
        $('[id^="<%=this.ClientID %>lblTimeElapsed"]').text(hr + "h " + min + "m " + sec + "s");
    }
}

Upvotes: 1

Views: 185

Answers (2)

Abdelrahman M. Allam
Abdelrahman M. Allam

Reputation: 922

Each time you add the same control asp.net repeat it in with the same page, this lead to repeat the script section in your page with the same code and function names

since ASP.NET renaming the controls, you need to depend on <%=this.ClientID=>

and just update all the controls that has the value 

 $('[id*="lblTimeElapsed"]').text("set value");

my solution is to add prefix on your function name like this 

function <%=this.ClientID %>AutoUpdateValues(){
    setInterval(function () {
        <%=this.ClientID %>UpdateValues();
    }, 5000);
}
function <%=this.ClientID %>UpdateValues(){// your logic }

instated of 

$('#<%=lblTimeElapsed.ClientID%>').text("set value");

use this 

$('[id^="<%=this.ClientID %>lblTimeElapsed"]').text("set value");

so when you call method will be something like this

<%=this.ClientID %>UpdateValues();
<%=this.ClientID %>AutoUpdateValues();

anther solution can raise here to solve a problem of invoke one method to a set of controls in the same time with out run many functions is to use singleton object as follow.

Upvotes: 1

Jon Edwards
Jon Edwards

Reputation: 175

The setInterval function creates a new object each time it starts. If you're using multiple instances, you should create an array of the setInterval constructors.

Upvotes: 1

Related Questions