session start event in my JS code - javascript

Is there any way to capture the session-start event in javascript code?
What happens now is that I need to check on any page-load event if the sessionStorage has a specific key, and if it's false - I add the new key/value pair to the sessionStorage.
Something like this:
if(sessionStorgae.Registered) {
// do something
}
else {
sessionStorage.SetItem("Registered", "0")
}
I would love to add the key without checking for its existence anytime a page loads. Is it possible with a kind of client session-start event?
I'll appreciate any suggestion,
Ben

You could simply listen to the load event of your document.
With jQuery, you would write:
$(document).ready(function() {
// Assume that sessionStorage is ready
});
If you don't want to listen to any page event, simply move your JS to bottom of your HTML page.

Related

How to trigger local storage event?

I want to store an element's html in localStorage object so that I can retrieve it later. How can I do this? I tried
$(function(){
$('window').on("storage", function (){
localStorage.setItem("check", $('#checking').html());
})
};
I want to store the html everytime the html is changed? How can I do that? Should I attach the event handler to the onchange event of the html element?
I have multiple lists that I want to store in local storage. Should I just attach the storage event to the onchange event of the li element.
p.s: I'm working on Firefox
Instead of having that "storage" action, make it an onclick or something different because it seems like you are attempting to store something rather than have an event trigger as soon as something is stored to localStorage.
As I said in the comments, if your problem is to detect if localStorage is available, you can do somethinglike
if (window.localStorage) {
localStorage.setItem("key",value);
} else {
// localStorage is not available
}

Session timeout in Javascript

I am working on a Javascripyt/html mobile app and I want to implement the session timeout feature. The easiest way is to use the setTimeout function but I want to check if any click, change event was performed before I make the decision. The logic needs to be:
checkForSessionTimeout() {
if(delta(last logged event time) < session timeout time) {
// do not timeout
// reset the delta to 0
} else {
//timeout and take to login page
}
}
I am able to get the function but not sure how do I log all click and change events on the browser.
Please help!
Are you using jQuery? This example uses jQuery but you should be able to adapt it to whatever you are using: Listen for events on all DOM nodes. With jQuery, $('*').on('click', function() ...). This will let you capture events even when a more close event binding has used stopPropagation.
It should work the same for change...
An example (open console): http://jsfiddle.net/u6eDj/2/

How to bind to submit event in jQuery Mobile pages

Tried to bind submit event (or click or whatever) to an element within a jQuery mobile page. What I wanted to do is get the value from an input within an form element within a jQuery page and store it in cookies/localStorage. Every time I come back to this page I want to restore the input field.
Currently I ended up in using this script:
$('.pageClassSelector').live('pageinit', function (e) {
$('.classSelector').submit(function () {
var q = $('.inputClassSelector').val();
// store to localStorage ...
});
// load from localStorage ...
$('.q').val(lastSearchString);
});
This approach is documented there http://jquerymobile.com/test/docs/api/events.html
Since it seems possible that identical pages are hold in the DOM, ID selectors are not quite useful. My problem now is that everytime I navigate to this page the submit event is bound again and thus results in storing DIFFERENT (!) values. The submit event seems to be fired multiple times and much more interesting with the value before last.
Am I doing anything completly wrong? Any hints how to do scripting in jquery mobile properly?
TRY1:
I placed now the submit event binding within the pagebeforeshow event like so:
$('#PageId').on('pagebeforeshow', function (e) {
$('.classSelector').on('submit', function () {
var q = $('.q').val();
alert('stored: ' + q);
}
$('.q').val(lastSearchString);
}
But the value going to be stored is still the value before last, when I was navigating the page before. The first time it works as it should.
TRY2:
This is what I have now and it looks like it does that what I want. I select now the current page and select only the form which is a child of this page.
Is this good practice?
$('div:jqmData(id="PageId")').on('pagebeforeshow', function (e) {
$(this).find('#form').on('submit', function () {
var q = $(this).find('#input').val();
localStorage.setItem("key", q);
return true;
});
lastSearchString = localStorage.getItem("key");
$(this).find('#input').val(lastSearchString);
});
Your requirement to load from local storage and store on the page needs to be done by binding to the pagebeforeshow event (look at the section "Page transition events") and not the pageinit event like you are currently doing.
$('.pageClassSelector').on('pagebeforeshow', function (e) {
// load from localStorage ...
$('.q').val(lastSearchString);
});
Furthermore generally each page element (where you have data-role='page') should have a unique ID so you can use that instead of the CSS selector.
Multiple events firing when navigating pages sounds like multiple bindings to me, which is a known problem with jQuery Mobile. Bindings are not unbound when navigating pages, because everything is loaded through AJAX. See for example this StackOverflow Question: Jquery mobile .click firing multiple times on new page visit or my solution.
$('.classSelector').on('submit', function(){})
Try to use the constraction to bind your event to element.
Look likes some data was loaded through ajax request

How to determine if a user is actually looking at a web page?

Is it possible to determine whether a user is active on the current web page or, say, focused on a different tab or window?
It seems that if you switch tabs, any JavaScript set on a timeout/interval continues running. It would be nice to be able to 'pause' the events when the user is not on the page.
Would something like attaching a mouseover event to the body work, or would that be too resource-intensive?
You can place onfocus/onblur events on the window.
There's wide support for those events on the window.
Example: http://jsfiddle.net/xaTt4/
window.onfocus = function() {
// do something when this window object gets focus.
};
window.onblur = function() {
// do something when this window object loses focus.
};
Open Web Analytics (and perhaps some other tracking tools) has action tracking
You could keep an alive variable going using mousemove events (assuming the user does not leave the mouse still on the page). When this variable (a timestamp likely) has not been updated in x seconds, you could say the page is not active and pause any script.
As long as you do not do a lot of processing in the body event handler you should be okay. It should just update the variable, and then have a script poll it at a certain interval to do the processing/checks (say every 1000ms).
Attach listeners to mousemove, keyup and scroll to the document.
I use this throttle/debounce function (which works without jQuery, even though it's a jQuery plugin if jQuery is present) to only run code in response to them once in ~250ms, so that you're not firing some code on every pixel of the mouse moving.
You can also use the visibilityState of the document:
document.addEventListener("visibilitychange", function() {
if( document.visibilityState === 'visible' ) {
// Do your thing
}
});
There is a wide acceptance of this API.

Javascript disable button event completely

Hi I would like to know if its possible to do something similar to the example shown below.
// Script A
$('.submitButton').click(function() {
if (not valid) {
$(this).attr("disabled", "disabled");
}
});
// Script B
$('.submitButton').click(function() {
// Do something else here
});
I would like to know whether you can actually stop the click event in Script B if not valid in Script A. The reason for the two events being separate is due to the fact that Script A will be used as a sort of a plugin module which will be inserted at the header of the page.
Yes, you can call $(this).stopPropagation(); and then check for event.isPropagationStopped() in Script B.
read more # http://api.jquery.com/event.stopPropagation/
use unbind. It will not fire the event again unless you bind it again
Would this work for you?
$(".submitButton").click(function(event){
event.preventDefault();
});

Categories