The onstorage event doesn't fire in either Firefox nor Chrome when setting a local storage variable event with a value different than before.
window.addEventListener('storage', () => {
console.log('onStorage raised');
});
//window.onstorage = e => {
// console.log('onStorage raised');
//}
localStorage.setItem('date', new Date());
https://jsfiddle.net/Brobic/fot9vzm6/1/
If you are the one setting localStorage, you can create your own event. Although this might be a little overkill as you could always just use this method to call a function also instead of creating an event. I used the older event style since it is more compatible.
function setStorage(k, v) {
const event = document.createEvent('Event');
event.initEvent('storageChanged', true, true);
localStorage.setItem(k, v);
document.dispatchEvent(event);
}
window.addEventListener('storageChanged', (e) => {
console.log('storageChanged raised');
});
setStorage("date", new Date())
console.log(localStorage.getItem('date'))
As written here:
https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event
Event is fired is storage is changed by ANOTHER document, not self.
As #Quercus pointed out, the event won't fire on it's own page, that's why I use localDataStorage, a handy wrapper for the HTML5 localStorage API that conveniently fires change events on the same page/tab/window in which the storage event occurred. (Disclaimer: I am the author of the interface.)
Once you install localDataStorage, this sample code will let you see those change events:
function nowICanSeeLocalStorageChangeEvents( e ) {
console.log(
"subscriber: " + e.currentTarget.nodeName + "\n" +
"timestamp: " + e.detail.timestamp + " (" + new Date( e.detail.timestamp ) + ")" + "\n" +
"prefix: " + e.detail.prefix + "\n" +
"message: " + e.detail.message + "\n" +
"method: " + e.detail.method + "\n" +
"key: " + e.detail.key + "\n" +
"old value: " + e.detail.oldval + "\n" +
"new value: " + e.detail.newval + "\n" +
"old data type: " + e.detail.oldtype + "\n" +
"new data type: " + e.detail.newtype
);
};
document.addEventListener(
"localDataStorage"
, nowICanSeeLocalStorageChangeEvents
, false
);
It works if you have another page that modify the storage
page1.html
window.addEventListener('storage', () => {
console.log('onStorage raised');
});
page2.html
localStorage.setItem('date', new Date());
You can read about at https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onstorage
Related
this is my scenario: I have a barcodeScanner ionic plugin in my Ionic application, that is installed on a tablet where I cannot use hardware buttons.
My code:
this.barcodeScanner.scan(option).then((result) => {
console.dir(
"We got a barcode\n" +
"Result: " + result.text + "\n" +
"Format: " + result.format + "\n" +
"Cancelled: " + result.cancelled
);
this.product_code = result.text;
if(result.text !== "" && result.text !== null)
{
return this.searchByBarcode(result.text);
}
}, (err) => {
// An error occurred
});
Question
Is there a way to close the plugin after a certain amount of time if no barcode is scanned (or to insert a software button inside the plugin)?
btnSubmit.OnClientClick = "return Getprodsize('" + hdnprdsize.ClientID + "')";
btnSubmit.OnClientClick = "return formatSpecifications('" + hdnSpecifications.ClientID + "')";
Only one function is called it ignores the other i need both the functions to be called on button click.
please help me
btnSubmit.OnClientClick = "Getprodsize('" + hdnprdsize.ClientID + "');return formatSpecifications('" + hdnSpecifications.ClientID + "')";
To ensure that both functions are called .. discard first function return checking
How about add a middle function to wrap both functions up?
function MiddleWare(hdnprdsizeClientID, hdnSpecificationsClientID){
Getprodsize(hdnprdsizeClientID);
formatSpecifications(hdnSpecificationsClientID);
}
btnSubmit.OnClientClick = "return MiddleWare('" + hdnprdsize.ClientID +",'" + hdnSpecifications.ClientID + "')";
If you don’t do anything this return values :
btnSubmit.OnClientClick = "function () { Getprodsize('" + hdnprdsize.ClientID + "');formatSpecifications('" + hdnSpecifications.ClientID + "');return true; }";
I am to analyse a huge js script. I'm using deobfuscators and firebug, but this script is so complicated that it's difficult for me to understand anything. So my question is do you know any tool that would show me e.g. name of function that handles event I fire? Or maybe it's possible to write it myself?
Try (this pattern)
$(function () {
$(document).on("click.abc", "body", function def (e) {
var name = (e.handleObj.handler.name === ""
? "<i>event handler name:</i> " + "anonymous function"
: "<i>event handler name:</i> "+ e.handleObj.handler.name);
var namespace = (e.handleObj.namespace
? "<i>event namespace:</i> " + e.handleObj.namespace
: "<i>event namespace:</i> " + e.handleObj.namespace);
$("body").append("<br>"
+ "<i>event type:</i> "
+ e.type + "\n"
+ name + "\n"
+ namespace);
$.each($._data($(document)[0], "events"), function(k, v) {
console.log(k
, v[0].data
, v[0].guid
, v[0].handler.name
, v[0].namespace
, v[0].origType
, v[0].selector
, v[0].type);
});
});
});
jsfiddle http://jsfiddle.net/guest271314/ykcnbuqp/
I'm trying to work through the 2nd question on this set of problems. I have to be able to click on a legislator's name and have additional information about him/her show up. Here's what I have so far.
$(function() {
$("form#get-zip").submit(function() {
var zip = $("input#zip").val();
$.get("http://congress.api.sunlightfoundation.com/legislators/locate?apikey=191e116b2a244fb48c5028e8f370488b&zip=" + zip, function(responseText) {
responseText.results.forEach(function(legislator) {
$("ul#legislators").append("<li>" + " " + legislator.first_name + " " + legislator.last_name + " (" + legislator.chamber + ")" + "</li>");
$("li").click(function() {
$(this).append("<p>Party: " + legislator.party + ", District: " + legislator.district + "</p>");
});
});
});
return false;
});
});
The problem is that when I click on a legislator's name it reveals information about all the legislators in the list rather than the particular legislator I clicked on. This is my first experience with A.P.I.s and I'm very much still a novice programmer. I'm finding all these moving parts to be very mentally exhausting. So I really appreciate any help I can get with this. Thanks.
I would suggest building out all your html on submit, even the details that appear below each legislator. Then hide all that extra detail. And set up the function of your li's to show the relative details.
$(function() {
$("form#get-zip").submit(
function() {
var zip = $("input#zip").val();
$.getJSON("http://congress.api.sunlightfoundation.com/legislators/locate?apikey=191e116b2a244fb48c5028e8f370488b&zip=" + zip,
function(responseText) {
$.each(responseText.results,
function(i,legislator) {
var newEl = $("<li>" + " " + legislator.first_name + " " + legislator.last_name + " (" + legislator.chamber + ")" + "<p>Party: " + legislator.party + ", District: " + legislator.district + "</p></li>");
newEl.appendTo("ul#legislators");
$("ul#legislators li").last().find("p").hide(); // hide the last added one
}); // end each
}); // end get function
}); // end submit function
$("ul#legislators").on("click", "li",
function() {
var details = $(this).find("p");
if (details.is(":visible")) {
details.hide();
} else {
details.show();
}
}); // end click function
}); // end document ready function
When the click event fires, the legislator variable no longer contains the data you looking for.
Good morning people - I've been having this problem for hours and I can't isolate it.
I have this piece of jQueryzed JavaScript:
jQuery(document).ready(function() {
var validated = 1;
jQuery('#help_continue').click(function() {
jQuery('#step' + validated + ', #step' + validated + '_help').fadeOut(200, function() {
jQuery('#step' + validated + '_help').removeClass('visible').find('.visible').removeClass('visible');
jQuery('#step' + (validated + 1) + '_help').addClass('visible');
jQuery('#step' + (validated + 1) + '_help div:first').addClass('visible').css({display: 'block'});
jQuery('#step' + (validated + 1) + ', #step' + (validated + 1) + '_help').fadeIn(200);
});
});
});
All good, nothing too fancy. If bound to HTML, it works as expected.
The thing is that, when I add this to the mix:
jQuery(document).ready(function() {
var validated = 1;
jQuery('#help_continue').click(function() {
jQuery('#step' + validated + ', #step' + validated + '_help').fadeOut(200, function() {
jQuery('#step' + validated + '_help').removeClass('visible').find('.visible').removeClass('visible');
jQuery('#step' + (validated + 1) + '_help').addClass('visible');
jQuery('#step' + (validated + 1) + '_help div:first').addClass('visible').css({display: 'block'});
jQuery('#step' + (validated + 1) + ', #step' + (validated + 1) + '_help').fadeIn(200); alert(validated); // this...
});
validated++; // ...and this.
});
});
The alert it shown TWICE, and the "validated" variable is NEVER = 1 inside the function - always 2.
I'm no JavaScript guru for sure, but I definitely know that that's just plain wrong, unless I'm missing something. I come from a PHP background, and I know that JavaScript has its idiosyncrasies, but this is just weird.
I'm using jQuery 1.5 if it matters. Anyone knows what's happening?
The code you pass as callback to fadeOut is only executed after ~200ms timeout. But the the code is not blocking. I.e. everything inside the click handler, also statements after the call to fadeOut, is executed immediately.
jQuery('#help_continue').click(function() {
// first
jQuery('....').fadeOut(200, function() {
// second
});
validated++; // first
});
But this should not show the alert twice... anyway, if you want to increment validate on click, but it should have the the correct value when the fadeOut callback is called, you can do so with an immediate function:
jQuery('#help_continue').click(function() {
(function(validated) {
jQuery('....').fadeOut(200, function() {
// ...
});
}(validated));
validated++;
});