Autosave using javascript issue - javascript

The following piece of code autosaves a page but it also times it out by loging out and taking the user to a time out page. How can i chnage it so that it only does the auto save part but not the time out?
<script language='javascript'>
function Save() {
var hdnSessionTimeOut = document.getElementById('fast22_MainCtn_fast44');
hdnSessionTimeOut.value = 'SessionTimeOut';
__doPostBack('Fast22$MainCtn$btnSave', '');
}
function Redirect() {
window.location = "SessionTimeout.aspx"
}
window.onload = function () {
if ('True' == 'True') setTimeout(Save, 30000);
else setTimeout(Redirect, 30000);
}
</script>
I tried reducing it to the following but and I think it worked but it changed the doc to view mode instead of edit mode. and you have to click edit again. Also when it in edit mode, the counter still works and it gives and error. Is there a way to have it auto save and then go back again to edit mode?
<script language='javascript'>
function Save() {
__doPostBack('ctl00$MainContentPlaceHolder$btnSave', '');
}
window.onload = function () {
if ('True' == 'True') setTimeout(Save, 10000);
else setTimeout(Save, 25000);
}
</script>

Related

SetInterval method executes only once on an onclick event

I recently saw a youtube tutorial on how to create desktop notifications and I thought it would be a good idea to have it serve as a reminder. For eg, say I want a specific reminder to appear(as a desktop notification) every 30 mins. This reminder should only be triggered when the trigger button is clicked. The issue is, with the code I have below, the setinterval method only seems to execute once. It seems to work fine if I don't include the click event, but as soon as I add the click event, it fails to repeat. Any suggestions?
Here's a snippet of what I have:
Trigger
<script type="text/javascript">
var myVar;
function showalert(){
var notify;
notify = new Notification('Reminder!',{
body:'How are you?'
});
window.location = '?message=' + this.tag;
}
function notifyme() {
myVar = setInterval(showalert, 5000);
}
It only works once because you redirect the browser with the line window.location = '?message=' + this.tag;, and when the page reloads, you have to click the anchor to start the interval again
Trigger
<script type="text/javascript">
var myVar;
function showalert() {
var notify;
notify = new Notification('Reminder!', {
body: 'How are you?'
});
}
function notifyme() {
myVar = setInterval(showalert, 5000);
}
Note that you generally have to ask for permission to show notifications
function showalert() {
var notify;
notify = new Notification('Reminder!', {
body: 'How are you?'
});
}
function notifyme() {
if (Notification.permission === "granted") {
var myVar = setInterval(showalert, 1000);
} else {
Notification.requestPermission(function(permission) {
if (permission === "granted") {
var myVar = setInterval(showalert, 1000);
}
});
}
}
Trigger

Determine If Print/Cancel Button in Google Chrome's Print Preview is Clicked

I've been printing my page using the code below:
window.print();
An image below is what the print preview in Google chrome browser looks like. It has two main buttons: print and cancel.
I want to know if the user has clicked the print or cancel buttons. What I did uses jquery:
HTML Code of the Print Preview:
<button class="print default" i18n-content="printButton">Print</button>
<button class="cancel" i18n-content="cancel">Cancel</button>
Jquery Code:
$('button > .cancel').click(function (e) {
alert('Cancel');
});
$('button > .print').click(function (e) {
alert('Print');
});
I tried the code above with no luck. What am I missing?
You can not access Chrome's internal windows (printing dialog in this case) directly from a regular web page.
(function () {
var beforePrint = function () {
alert('Functionality to run before printing.');
};
var afterPrint = function () {
alert('Functionality to run after printing');
};
if (window.matchMedia) {
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function (mql) {
//alert($(mediaQueryList).html());
if (mql.matches) {
beforePrint();
} else {
afterPrint();
}
});
}
window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;
}());
Or, If you want to do something when the print preview gets opened, you can try below:
$(document).bind("keyup keydown", function (e) {
if (e.ctrlKey && e.keyCode == 80) {
setTimeout(function () { CallAfterWindowLoad();}, 5000);
return true;
}
});
function CallAfterWindowLoad()
{
alert("Open and call");
}
Reference:
How to capture the click event on the default print menu called by Javascript window.print()
Maybe if you provide your requirements for this two buttons click event, we can provide you an alternate solution.
it is very easily possible:
<body onafterprint="myFunction()">
The myFunction() that you can define within a tag will be fire when either the printing job is done or the cancel button was pressed.
As far as I know, the print preview is not part of any document your JS can access. These might interest you:
Detecting browser print event
ExtJS 4 - detecting if the user pressed "Print" on the print dialog that was called programatically
<script>
window.print();
onafterprint = function () {
window.location.href = "index.html";
}
</script>
This should do the trick. I've used jQuery v2.2.0 which is included in the html file.
$("#print").click(function() { // calls the id of the button that will print
document.body.style.visibility = 'hidden'; //code for hiding the body
document.getElementById('printthis').style.visibility = 'visible'; // div to be printed
document.getElementById('printthis').style.position = 'absolute'; //some code/css for positioning. you can adjust this
document.getElementById('printthis').style.top = '40px';
document.getElementById('printthis').style.left = '0px';
if (print()) { // shows print preview.
} else { // else statement will check if cancel button is clicked.
document.body.style.visibility = 'visible';
document.getElementById('printthis').style.position = '';
document.getElementById('printthis').style.top = '';
document.getElementById('printthis').style.left = '';
alert("Print Canceled");
}
});
I guess this might as well be used as a way to print certain divs in your html. Just hide the body element and only show the div that you want to print with some positioning css. Hope it works in yours. I've tried it and I can say that it worked for me.

Disable Fancybox Pop-Up With Cookies

I have a Fancybox set on a delay to pop up on any page of my Wordpress, I'm looking to have it become disabled after a user submits something in the provided input or have it not show up for a given amount of time if the user clicks on the bypass link. I've tried a few scripts found around this site but nothing seemed to work, here's what I currently have set in place.
function openFancybox() {
setTimeout( function() {$('.pop').trigger('click'); },20000);
}
$(document).ready(function() {
var visited = $.cookie('visited');
if (visited == 'yes') {
return false;
} else {
openFancybox();
}
$.cookie('visited', 'yes', { expires: 7 });
$('.pop').fancybox();
});
Please try the below to see if that helps.
openFancybox = function{
setTimeout( function() {$('.pop').trigger('click'); },20000);
}
$(document).ready(function() {
//Declare your cookie.
$.cookie('visited','no', { expires: 7 });
//Test to see if your cookie equals 'no', if true then run the fancy box.
if ($.cookie('visited') == 'no') {
openFancybox();
}
//Your Input or click to stop the fancy box
$('#StopFancyBox').on('click',function(){
$.cookie('visited', 'yes');
});
});
As #Brad mentioned you can use the web developer tools to test to see what your cookie value is at stages. Simply go to the web.console and call back $.cookie('visited')
ERRORS
jquery.cookie.jsGET http://www.coreytegeler.com/bolivares/wp-content/themes/max-magazine/source/cookies/jquery.cookie.js 404 (Not Found)
The above seems to be because the jquery.cookie.js file is not referencing the right location.
/bolivares/:72SyntaxError: Expected token '('
The above is actually my fault :) sorry. When declaring the function openFancybox i missed off the (). So it should be openFancybox = function(){.
jquery-plugins.min.js:13TypeError: 'undefined' is not an object (evaluating 'e.browser.msie')
superfish.js:123TypeError: 'undefined' is not a function (evaluating 'jQuery('ul.nav').superfish()')
woocommerce.min.js:1TypeError: 'undefined' is not a function (evaluating 'e(".plus").live')
The above are conflicts with the plugins jquery-plugins.min.js, superfish.js and woocommerce.min.js respectively. I'm sorry I can't give much guidance on these.
/bolivares/:259ReferenceError: Can't find variable: myLoop
You're calling back myLoop(i) on line 259 on your main html page. But searching through all of your scripts, this isn't declared anywhere.
Yes you can edit it perfectly all you have to do is create a settimeout value so that the fancybox pops out after some time and then write the program like this
<script type="text/javascript">
function openFancybox() {
setTimeout( function() {$('#fancybox-manual-b').trigger('click'); },5000);
}
$(document).ready(function() {
var visited = $.cookie('visited');
$.cookie('visited', 'yes', { expires: 7 }); /*write this first*/
if (visited == 'yes') {
function callback(a){
return function(){
alert("Hello " + a);
}
}
var a = "world";
setTimeout(callback(a), 2000); /*let the page load first*/
a = "subscriber";
} else {
openFancybox();
}
$('#fancybox-manual-b').fancybox();
});
</script>
If you want you can change the (I wrote this to check if the cookie is working properly or not)
if (visited == 'yes') {
function callback(a){
return function(){
alert("Hello " + a);
}
}
var a = "world";
setTimeout(callback(a), 2000);
a = "idiotteen";
}
to
if (visited == 'yes') {
return false;
}
Let me know if this helped you

Javascript - Refresh - Memory Leak

I am seeing a major memory leak within Firefox and IE on my below code. To be fair, it could very well be my poor implementation and it needs changing, to allow Firefox and other browsers to garbage collect.
Does anyone have any suggestions on how to tweak the code to allow for a more efficient way of refreshing the page?
<input type="checkbox" onclick="sel1()" id="AutoRefresh">
<script type="text/javascript">
function sel1(){
var ref = document.getElementById('AutoRefresh').checked;
if(ref == true) {
setInterval(function(){
document.getElementById('dataRefreshButton').click(); }, 2000);
}
window.alert("Auto refresh on");
}
</script>
I think this will be better.
<script type="text/javascript">
function getdata(){
// get your data
}
var intGetData;
function sel1(){
var ref = document.getElementById('AutoRefresh').checked;
if(ref == true) {
intGetData = setInterval(getdata, 2000);
window.alert("Auto refresh on");
}
else{
clearInterval(intGetData);
window.alert("Auto refresh off");
}
}
</script>
Change setInterval to setTimeout. Your current code will set up a new interval to click the element every 2s when clicked. If you click once, you trigger an avalanche.
Or even better, you stop the interval:
var handle = null;
function sel1(){
var ref = document.getElementById('AutoRefresh').checked;
clearInterval(handle);
if (ref)
handle = setInterval(function(){
document.getElementById('dataRefreshButton').click();
}, 2000);
window.alert("Auto refresh on");
}

Execute javascript on page load but not on button click

Tried for several times to get below Javscript to execute on page load. Currently it works only on click of "Start" button.
How could this be made excited on load of the page?
<script type="text/javascript">
function getFlashMovie(movieName) {
var isIE = navigator.appName.indexOf("Microsoft") != -1;
return (isIE) ? window[movieName] : document[movieName];
}
function start() {
var active = document.getElementById("buttonstart").value == "stop";
getFlashMovie("test").setProperty("src", !active ? document.getElementById('url2').value: null);
document.getElementById("start").value = active ? "buttonstart" : "buttonstop";
}
</script>
the html
<input id="url2" type="text" value="rtmp://localhost/?streammovie=test"/>
The getFlashMovie("test").setProperty is a function to pass variable to the SWF file.
On page load I want it to get executed rather than on button click.
To have your function execute on page load have such code:
window.onload = function() {
start();
};
what you could do is:
<body onload="start();">
if you consider using jQuery at all then you could wrap your code within:
$(document).ready(function(){
//the code
});
the code would execute when the page has been fully loaded, but i do not advise adding the jquery library just so you can use this feature.
Try this:
<script type="text/javascript">
function getFlashMovie(movieName) {
var isIE = navigator.appName.indexOf("Microsoft") != -1;
return (isIE) ? window[movieName] : document[movieName];
}
function start() {
var active = document.getElementById("buttonstart").value == "stop";
getFlashMovie("test").setProperty("src", !active ? document.getElementById('url2').value: null);
document.getElementById("start").value = active ? "buttonstart" : "buttonstop";
}
start(); //added this
</script>
Just make sure the DOM has been loaded before you attempt to access any elements.
Try to run your start() function at the end of the HTML like this;
</body>
<script type="text/javascript">
start();
</script>
</html>
Use:
(function($){
$(function(){
// my code comes here
});
})(jQuery)
Use window.onload event to fire your code on load.
window.onload = function(){
//your code to execute
}

Categories