I´m doing an MVC app. And this is in my _Layout.cshtml
I need to move it to a a js file
<script type="text/javascript">
window.SessionTimeout = (function() {
var _timeLeft, _popupTimer, _countDownTimer;
var stopTimers = function() {
window.clearTimeout(_popupTimer);
window.clearTimeout(_countDownTimer);
};
var updateCountDown = function() {
var min = Math.floor(_timeLeft / 60);
var sec = _timeLeft % 60;
if(sec < 10)
sec = "0" + sec;
document.getElementById("CountDownHolder").innerHTML = min + ":" + sec;
if(_timeLeft > 0) {
_timeLeft--;
_countDownTimer = window.setTimeout(updateCountDown, 1000);
} else {
document.location = "Home/TimeOutPage";
}
};
var showPopup = function() {
_timeLeft = 60;
updateCountDown();
ClientTimeoutPopup.Show();
};
var schedulePopup = function() {
stopTimers();
_popupTimer = window.setTimeout(showPopup, #PopupShowDelay);
};
var sendKeepAlive = function() {
stopTimers();
ClientTimeoutPopup.Hide();
SessionTimeout.schedulePopup();
};
return {
schedulePopup: schedulePopup,
sendKeepAlive: sendKeepAlive
};
})();
I try to copy only the code between the script tag but it doesn't work. I know the problem is with the function signature
window.SessionTimeout = (function() { ...
but i don´t know hot to use window.SessionTimeout in a js file.
The #PopupShowDelay is define in my view like this:
#functions {
public int PopupShowDelay
{
get { return 60000 * (Session.Timeout - 1); }
}
}
UPDATE
Ok, i found the error.
The problem is the variable
#PopupShowDelay
I defined that at the view and was trying to read the .js file.
So, i'm going tho check this:
Passing parameters to JavaScript files
Thankls!!
You could have problems with this context in the nested function.
You can read more here
your code should be working, if you linked the file in a script tag at the end of your template's document body and the file is being loaded correctly (test with a console.log if your code is executed).
Related
I made a java timer
everything works when all the code is in one file and separated.
When I start doing anything about it
create a separate js file and move the java code there
and even when i try to insert it inside php nawiada
in both cases it stops working
how is it like here it works and it's great.
but i want js in js file then it stops working,
I think it is about "'these elements but I don't know, I'll tire of the timer, best regards
var secs = 0;
var element = "czas";
var T = null;
function count(id)
{
temp = secs;
if(secs > 0)
{
result = Math.floor(temp) + " ";
document.getElementById(element).innerHTML = result;
secs--;
}
else
{
document.location="/"
clearInterval(T);
}
}
function counter(seconds)
{
secs = seconds;
T = window.setInterval("count()", 1000);
}
echo
'<div id="czas"></div>
<script type="text/javascript">counter(60);</script>'
;
I'm a PLC programmer, i made a html page and i need it script refresh every second, so in my body i placed:
<body onload="changeimage()">
.... code ....
</body>
And the script:
<script>
setInterval(function changeimage() {
var sonde = ["Sonda1","Sonda2","Sonda3","Sonda4"];
var tsonde = ["tsonda1","tsonda2","tsonda3","tsonda4"];
var temperature = [:="OUTPUT".AlarmTemp.Sonda1:,:="OUTPUT".AlarmTemp.Sonda2:,:="OUTPUT".AlarmTemp.Sonda3:,:="OUTPUT".AlarmTemp.Sonda4:];
var hotcold = document.getElementById("Fiocco");
if (:="OUTPUT".Stagione.Estate: > 0){
hotcold.src="sun.jpg"}
if (:="OUTPUT".Stagione.Inverno: > 0){
hotcold.src="Neve.png"}
for (x in temperature) {
var icona = document.getElementById(sonde[x]);
if (temperature[x] > 0 ){
icona.src="Paverde.png"
}
else{
icona.src="Parossa.png"
}
}
}, 1000);
</script>
Anyway i get the error:
ReferenceError: changeimage is not defined
P.S.: Don't get fooled by the arrays who start with ":", is a PLC syntax, is correct.
# Even removing the setinterval option, the script is not working.
Define the function first and make sure the script is loaded.
Example in code pen: https://codepen.io/mikila85/pen/NWPvQPE
function changeimage() {
setInterval(function() {
var sonde = ["Sonda1","Sonda2","Sonda3","Sonda4"];
var tsonde = ["tsonda1","tsonda2","tsonda3","tsonda4"];
var temperature = [:="OUTPUT".AlarmTemp.Sonda1:,:="OUTPUT".AlarmTemp.Sonda2:,:="OUTPUT".AlarmTemp.Sonda3:,:="OUTPUT".AlarmTemp.Sonda4:];
var hotcold = document.getElementById("Fiocco");
if (:="OUTPUT".Stagione.Estate: > 0){
hotcold.src="sun.jpg"
}
if (:="OUTPUT".Stagione.Inverno: > 0){
hotcold.src="Neve.png"
}
for (x in temperature) {
var icona = document.getElementById(sonde[x]);
if (temperature[x] > 0 ){
icona.src="Paverde.png"
}
else{
icona.src="Parossa.png"
}
}
}, 1000);
}
Anyway i get the error: ReferenceError: changeimage is not defined
setInterval(function changeimage() {
Sure it won't be defined, as it was only defined as a callback function to the setInterval() call.
So it won't be visible outside of this setInterval scope, and it won't be visible for the onload event listener of your body.
Solution:
You should define your changeimage() function in the global scope (outside of the setInterval like this:
<head>
<script>
function changeimage() {
var sonde = ["Sonda1", "Sonda2", "Sonda3", "Sonda4"];
var tsonde = ["tsonda1", "tsonda2", "tsonda3", "tsonda4"];
var temperature = [: = "OUTPUT".AlarmTemp.Sonda1: ,: = "OUTPUT".AlarmTemp.Sonda2: ,: = "OUTPUT".AlarmTemp.Sonda3: ,: = "OUTPUT".AlarmTemp.Sonda4: ];
var hotcold = document.getElementById("Fiocco");
if (: = "OUTPUT".Stagione.Estate: > 0) {
hotcold.src = "sun.jpg"
}
if (: = "OUTPUT".Stagione.Inverno: > 0) {
hotcold.src = "Neve.png"
}
for (x in temperature) {
var icona = document.getElementById(sonde[x]);
if (temperature[x] > 0) {
icona.src = "Paverde.png"
} else {
icona.src = "Parossa.png"
}
}
}
setInterval(changeimage(), 1000);
</script>
</head>
<body onload="changeimage()">
.... code ....
</body>
You can see it working in this Demo.
Note:
Make sure to place your script tag in the head of your HTML page before the body tag so it can be accessed in the onload event listener.
try this
function changeImage(){
....
}
// if you need to call every 1 sec
setInterval(changeImage,1000);
// else
changeImage(); or // setTimeout(changeImage,1000)
I have a published captivate html file that is loaded into an iframe of another html. I cannot communicate between the two, not even with localStorage. Can anyone tell me what I'm missing?
Parent html
var everythingLoaded = setInterval(function () {
if (/loaded|complete/.test(document.readyState)) {
clearInterval(everythingLoaded);
init();
}
}, 10);
function init() {
ScormProcessInitialize();
var studentID = ScormProcessGetValue("cmi.core.student_id");
var student_name = ScormProcessGetValue ("cmi.core.student_name");
var nameArraya = student_name.split(" ");
var nameArrayb = nameArraya[1].split(",");
var studentNumber = nameArrayb[0];
ScormProcessSetValue("cmi.core.lesson_status", "incomplete");
localStorage.setItem("_studentNumber", studentNumber);
alert("Student Number: " + studentNumber + " Student Mame: " + student_name);
setTimeout(function () {
document.getElementById("iFrame_a").innerHTML = "<iframe name='iframe_1' id='frame_1' src='//somepath.com/sandbox/somecourse/index.html' frameborder='0' width='1000px' height='605px'></iframe>";
}, 250);
}
function sendComplete() {
alert("Send from index start!");
ScormProcessSetValue("cmi.core.lesson_status", "completed");
alert("send status: Completed");
}
window.onbeforeunload = function (){
cpInfoCurrentSlide = localStorage.getItem("_cpInfoCurrentSlide")
alert(cpInfoCurrentSlide);
if(cpInfoCurrentSlide >= 40)
{
alert("onbeforeunload called: " + cpInfoCurrentSlide )
ScormProcessSetValue("cmi.core.lesson_status", "completed");
}
}
iframe code snippet
localStorage.setItem("_cpInfoCurrentSlide", cpInfoCurrentSlide);
I believe your problem is with onbeforeunload. As I remember captivate packages clobber any functions associated with onbeforeunload in the parent frame when they load.
Try this instead, override your SCORM api setvalue method:
var oldLMSSetValue = window.API.LMSSetValue;
window.API.LMSSetValue = function(key, value){
if(key === 'cmi.core.lesson_status' && value === 'completed'){
//do your stuff here
cpInfoCurrentSlide = localStorage.getItem("_cpInfoCurrentSlide")
alert(cpInfoCurrentSlide);
}
//call the original scorm api function so that it runs as expected.
oldLMSSetValue(key,value);
};
edit: this code would go in the parent window, not the iframe.
How I can call/trigger a jQuery function (which is in another file) from JS.
So basically this is the jQuery function (/js/animation.js).
$('#spin').click(function () {
var tickets = Math.floor(Math.random() * 200) + 1;
if(tickets < 51) {
var winner = 155;
}
else {
var winner = 145;
}
rouletteSpin(winner);
});
I know that its based on a codepen Roulette Animation.
Now the problem is that it should not roll without going through an if statement.
The statement should be a variable using Database info.
That's the point.
In my opinion you cant use PHP / select DB Info in jQuery so I decided to go into my index.php to trigger the jQuery function after the if statement in js went through.
So let me show you my HTML Button + JS Function:
onclick="openCase()
into the first HTML Button tag.
Now the JS Function:
<script>
var credits = CodeToGet_MYSQL_DB_Info_here_written_in_php;
function openCase() {
if(credits > 10000) {
spinIt();
}
else {
alert('Something went wrong');
}
}
And changed the jQuery Function (in path /js/animation.js) to the following:
function spinIt () {
var tickets = Math.floor(Math.random() * 200) + 1;
if(tickets < 51) {
var winner = 155;
}
else {
var winner = 145;
}
rouletteSpin(winner);
});
That is not working. I already googled a lot so please don't flame me.
Already used pretty much every method of this post:
calling Jquery function from javascript
Would be nice if someone can help me out!
This is my first question and i'm fairly new to JS. Anyway, i found this countdown timer on JSFiddle ( http://jsfiddle.net/gPrwW/395/ )and i was wondering what edits need to be made to redirect to the previous page after the timer gets to zero? Thanks for the help!
$(document).ready(function(e) {
var $worked = $("#worked");
function update() {
var myTime = $worked.html();
var ss = myTime.split(":");
var dt = new Date();
dt.setHours(0);
dt.setMinutes(ss[0]);
dt.setSeconds(ss[1]);
var dt2 = new Date(dt.valueOf() - 1000);
var temp = dt2.toTimeString().split(" ");
var ts = temp[0].split(":");
$worked.html(ts[1] + ":" + ts[2]);
setTimeout(update, 1000);
}
setTimeout(update, 1000);
});
You can use this ;), will return to the previous page.
function myReturnFunction() {
setTimeout(function(){
history.go(-1);
}, 3000);
};
Try this out :
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(e) {
var $worked = $("#worked");
function update() {
var myTime = $worked.html();
if (myTime == "00:00") {
window.history.back();
return;
}
var ss = myTime.split(":");
var dt = new Date();
dt.setHours(0);
dt.setMinutes(ss[0]);
dt.setSeconds(ss[1]);
var dt2 = new Date(dt.valueOf() - 1000);
var temp = dt2.toTimeString().split(" ");
var ts = temp[0].split(":");
$worked.html(ts[1] + ":" + ts[2]);
setTimeout(update, 1000);
}
setTimeout(update, 1000);
});
</script>
</head>
<body>
<div id="worked">00:10</div>
</body>
</html>
How about this?
if (ts.join("") === "000000") {
alert("Zero!")
//location.href = "https://www.google.co.jp"
} else {
$worked.html(ts[1] + ":" + ts[2]);
setTimeout(update, 1000);
}
I've just updated your code. Check it out https://jsfiddle.net/gPrwW/397/
So a couple things to note about what's happening in the code you posted. First, you're using a Date object. The documentation for Date can be found here: (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date). So you could do something where you check if both ts[0] and ts[1] are zero, but they are both strings, and personally, I don't like checking strings like that.
However, Date has two methods called getMinutes() and getSeconds() that both return numbers. So, you could put a check, right before you initialize temp. That might look something like this:
if(dt2.getMinutes() === 0 && dt2.getSeconds() === 0) {
// do what you want to do at the end of countdown
return; // return out of the function to stop it from continuing
}
Next, to go to the previous page, use window.history. If you want to go to a completely different page, you can use window.location. The documentation for both is here: https://developer.mozilla.org/en-US/docs/Web/API/Window
I really recommend taking a look at the documentation, not only because there's other cool things you can do, but also it'll get you used to looking at documentation for answers. There's a lot of really helpful information in there.