javascript function not defined

[roachae]

I'm trying to add 'session ending warning' and 'session expired' pop-ups to a site that displays secure data. The session timeout is after an hour. The pop-ups are controlled by javascript using the code below, which checks the time left in the session every minute. BUT... the call to the function that checks the time left in the session is apparently undefined, and I can't understand why. I'm basing my code on an example I found online and another javascript/jquery based pop-up on the site I'm working on that was written by someone else. IE just tells me there's an object expected on the page, but with Firefox, I'm using Firebug and it's saying the function checkSessionTime() is not defined. With both browsers, my pop-ups are obviously not working. My javascript/jquery knowledge is limited, so any help anyone can offer would be greatly appreciated. Thanks.

$(document).ready(function() {

	//total length of session (1 hour) in seconds
	var sessionLength = 3600;
	
	//time warning shown (120 = warning box shown 120 seconds before session ends)
	var warning = 120;
	
	//time redirect forced (5 = redirect forced 5 seconds after session ends)
	var forceRedirect = 5; 
	
	//time session started
	var pageRequestTime = new Date();
	
	//session timeout length
	var timeoutLength = sessionLength*1000;
	
	//set time for first warning, ten seconds before session expires
	var warningTime = timeoutLength - (warning*1000);
	
	//force redirect to log in page length (session timeout plus 5 seconds)
	var forceRedirectLength = timeoutLength + (forceRedirect*1000);
	
	//set number of seconds to count down from for countdown ticker
	var countdownTime = warning;
	
	//warning dialog open; countdown underway
	var warningStarted = false;
	
	//event to check session time variable declaration
	var checkSessionTimeEvent;
	
	
	// jQuery UI Dialog
	var dialogWarningOpts = {
		autoOpen: false,
		width: 400,
		modal: true,
		bgiframe: true,
		draggable: true,
		resizable: false,
		open: function() {},
		close: function() {},
		buttons: {
			"Restart Session": function() {
				location.reload();
			}
		}
	};

	var dialogExpiredOpts = {
		autoOpen: false,
		width: 400,
		modal: true,
		bgiframe: true,
		draggable: true,
		resizable: false,
		open: function() {},
		close: function() {
			location.reload();
			//window.location="login.php?expired=true";
		},
		buttons: {
			"Login": function() {
				location.reload();
				//window.location="login.php?expired=true";
			}
		}
	};


	function checkSessionTime() {
		//get time now
		var timeNow = new Date();
		
		//event create countdown ticker variable declaration
		var countdownTickerEvent; 	
		
		//difference between time now and time session started variable declartion
		var timeDifference = 0;
		
		timeDifference = timeNow - pageRequestTime;
		
		if (timeDifference > warningTime && warningStarted === false){
			//call now for initial dialog box text (time left until session timeout)
			countdownTicker(); 
			
			//set as interval event to countdown seconds to session timeout
			countdownTickerEvent = setInterval("countdownTicker()", 1000);
			
			$('#dialogWarning').load('dialogWarning.php').dialog(dialogWarningOpts);
			warningStarted = true;
		} else if (timeDifference > timeoutLength) {
			//close warning dialog box
			if ($('#dialogWarning').dialog('isOpen')) $('#dialogWarning').dialog('close');
			
			$('#dialogExpired').load('dialogExpired.php').dialog(dialogExpiredOpts);
			
			//clear (stop) countdown ticker
			clearInterval(countdownTickerEvent);
		}
		
		if (timeDifference > forceRedirectLength) {
			//clear (stop) checksession event
			clearInterval(checkSessionTimeEvent);
			
			//force relocation
			window.location="login.php?expired=true";
		}
	}

	function countdownTicker()
	{
		//put countdown time left in dialog box
		$("span#dialogText-warning").html(countdownTime);
		
		//decrement countdownTime
		countdownTime--;
	}


	//event to check session time left (times 1000 to convert seconds to milliseconds)
    checkSessionTimeEvent = setInterval("checkSessionTime()",60*1000);

});

[Luckychap]

Its scope problem. Once line 123 get executed it lost the function 'checkSessionTime'.
To overcome this pass a copy of that function to setInterval:

checkSessionTimeEvent = setInterval(function({checkSessionTime();},60*1000);

[roachae]

Thanks. I tried this and it got past the "function not defined" error. But now when it tries to open my pop-up, I'm getting this error:

$('#dialogWarning').load('dialogWarning.php').dialog is not a function

Any other ideas?

[Luckychap]

I have less expertise in JQuery. But try to put above statement into 2 statements:

$('#dialogWarning').load('dialogWarning.php');
$('#dialogWarning').dialog(dialogWarningOpts);

[roachae]

Nope. Still getting the 'not a function' error but just on the second line:

$('#dialogWarning').dialog is not a function

Edit: The other pop-up used on the site I'm working on uses the same format as this and it works.

$('#dialogWarning').load('dialogWarning.php').dialog(dialogWarningOpts);

The other pop-up's code is as follows:

$('#ballot_content').load('ballot.php').dialog(dialogOpts);

[Luckychap]

I can only ask does your jquery version support dialog?
Check by creating simple dialog.

[roachae]

As I added to my last reply, the other pop-up the site uses has practically the same code (using dialog).

[roachae]

Not sure if this will help any, but here's what's in dialogWarning.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Session (Page) Expiring!</title>
</head>

<body style="margin:0px; padding:0px;">
	<div id="dialogWarning"><p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 0 0;"></span> Your session will expire in <span id="dialogText-warning"></span> seconds!</div>
</body>
</html>

[Luckychap]

Hey wait .... at line 89, there is a similar problem of scope, we just resolved.
May that is creating problem. Try modifying setInterval() on line 89 as mentioned in above post.

[roachae]

Nope. I changed the scope on both at the same time.

[Luckychap]

Not sure if this will help any, but here's what's in dialogWarning.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Session (Page) Expiring!</title>
</head>

<body style="margin:0px; padding:0px;">
	<div id="dialogWarning"><p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 0 0;"></span> Your session will expire in <span id="dialogText-warning"></span> seconds!</div>
</body>
</html>

As far as I know about Jquery, above html content will be loaded in a div whose id is "dialogWarning".

If it true then, the problem i see is that there will be 2 divs with same id('dialogWarning') : one - in which this html will be loaded and two - above div.

One more thing, why you are using html and body tag on above php file. There should only one html/body tag on a single page. But once above php is loaded the current page will have 2 html/body tags ... which is wrong.

[roachae]

I'm not seeing where you mean that I have two html/body tags. The only html/body tags I see are in my php file, which will be the content of the pop-up.

[roachae]

I got my error to disappear (I was missing a reference to jquery-ui-1.7.2.custom.min.js), but my pop-up is still not displaying. Tested it in both IE and Firefox (Firebug is telling me nothing).

[Luckychap]

you have set 'autoOpen' configuration property to 'false' for both the pop-up. Make it 'true' or use 'open' and 'close' methods.

[roachae]

Nope. Still not working.

[developer_test]

 $(document).ready(function() { 
        // TOGGLE -----------------------------------------------------------------------
            $(".toggleCTA").next("div").hide();
            $(".toggleCTA").toggle(function() {
                $(this).addClass("active");
            }, function() {
                $(this).removeClass("active");
            });
            $(".toggleCTA").click(function() {
                $(this).next("div").slideToggle(100);
            });     
            autoOpenToggle();   
        });

I am using above function. it gives me error "Microsoft runtime error: autoOpenToggle(); object is not defined"
Any one knows how can I load autoOpenToggle() function in javascript.

[Taywin]

Any reason to revive a 1-year old thread?