Develop Reference

Adding OnClick Event with Javascript is not working

I'm trying to add an onclick event with JavaScript.
$.getJSON(api , function(data) {
//First Option found (not working)
//document.getElementById("today_button").SetAttrribute("onclick", "window.location.replace('" + data[1] + "')");
//Second Option found (not working either)
document.getElementById('today_button').onclick = "window.location.replace('" + data[1] + "');";
});
The Variables exist, the Event is fired, the data transmitted are correct and everything except this works just fine (like altering the disabled state of exactly this button).
I hope you can help me

You need to assign a function to onclick, not a string:
document.getElementById('today_button').onclick = function(event) {
window.location.replace(data[1]);
}

Why are you assigning a string as a click handler? Just use a function.
document.getElementById('today_button').onclick = function () {
location.replace(data[1]);
};

The problem is you assigned string to onclick, but it needs function.
document.getElementById('today_button').onclick = function() {
window.location.replace(data[1]);
}

onReady() doesn't execute $.getJSON() when browser restores a page

Let me state initially that the code below works fine when I open a new browser page and enter my web server's URL, and it works also when I reload a page (F5 or Ctrl-R).
It only works partially however if I reopen a closed browser window and the browser restores my old tabs: then, the today's date is updated and displayed (see the code below, very simple), but the getJSON() call doesn't seem to be executed. The browser keeps displaying the data from the previous session. Only if I update the page (F5), the data in the browser window is updated.
I'm sure it's not the server. What else could it be?
Browsers: Firefox, Chrome, latest versions.
Using this code in index.html
<script>
$(document).ready(onReady());
</script>
and this code in helper.js
var onReady = function() {
// Display current date
var dateText = moment().format("dddd, Do MMMM YYYY");
var dateHTML = "<h2>" + dateText + "</h2>";
$("#date-col").append(dateHTML);
:
:
// Retrieve data from server and display it
var statText = "Statistics:";
$.getJSON("courses/starter", function(data) {
statText = statText.concat(" " + data.count + " starter");
$.getJSON("courses/dessert", function(data) {
statText = statText.concat(", " + data.count + " dessert");
$("#statistics").text(statText);
});
});
}

You have to pass a callback instead of executing the function immediately.
Try:
<script>
$(document).ready(onReady);
</script>

$( document ).ready(handler) expects argument to be a function expression which will be executed later when DOM is ready
In your example, you are invoking onReady() function and that function is not returning anything(undefined) hence exection will be like: $(document).ready(undefined);
Either use function expression like $(document).ready(onReady); or onReady() should return a function to be executed later.
Shorthand would be $(onReady)

Triggering a custom event with attributes from a Firefox extension

I have a Firefox extension that modifies the content of the page that the user is looking at. As part of that process the extension needs to trigger a custom event that the extension itself adds to the page source. I am having difficulties passing parameters to that custom event. What am I doing wrong?
Script block inserted into the head of the page:
document.addEventListener("show-my-overlay", EX_ShowOverlay, false, false, true);
function EX_ShowOverlay(e) {
alert('Parameter: ' + e.index);
// ...
}
Code in the extension:
var event = content.document.createEvent("Events");
event.initEvent("show-my-overlay", true, true);
event['index'] = 123;
content.document.dispatchEvent(event);
The event gets triggered successfully, but e.index is undefined.
I managed to get it working by creating an element on the page and then having the event handler find the element and read its attributes, but it didn't feel elegant. I want to do it without the element.
EDIT:
I also tried triggering the event with CustomEvent, but it throws an exception in the handler:
var event = new CustomEvent('show-my-overlay', { detail: { index: 123 } });
content.document.dispatchEvent(event);
function EX_ShowOverlay(e) {
alert('Parameter: ' + e.detail.index);
// ...
}
Permission denied to access property 'detail'

OP has solved their problem using postMessage. For those of us who actually do have to solve it using CustomEvent (being able to specify message types is useful), here's the answer:
Firefox won't allow the page script to access anything in the detail object sent by the content script via CustomEvent unless you clone the event detail into the document first using the Firefox-specific cloneInto() function.
The following does work over here to send an object from the extension to the page:
var clonedDetail = cloneInto({ index: 123 }, document.defaultView);
var event = new CustomEvent('show-my-overlay', { detail: clonedDetail });
document.dispatchEvent(event);
The Mozilla docs have more detail on cloneInto.

You cannot access "expandos" (additional properties defined on a native prototype object) across security boundaries. The security boundary in this case being between the fully privileged chrome (add-on) code and the non-privileged website code.
So you need to pass data using something "standard". The CustomEvent stuff would do, however your code is wrong. You have to call the constructor or initCustomEvent() correctly:
var event = new CustomEvent('show-my-overlay', { detail: { index: 123 } });
content.document.dispatchEvent(event);
Another alternative is the postMessage API.

JavaScript page bruteforcer

I have written a very simple script to test one page for possible discounts options.
But I have faced the problem that once I do 'button.click();' the page loading is blocked until I complete my function, so following actions like button.click(); do not make sense.
Is that possible to make page to load while I am inside of the function? This should be ran in Developer toolbar in safari (I believe I cannot set onload event for the page on my side, so need to do that without using even handlers).
var card = document.getElementById('discount_card');
var button = $('.buttonTotal');
var disc_val = document.getElementById('cart_discount').firstChild;
for(var i=init;i<=finish;i++){
card.value = i;
button.click();
disc = disc_val.data;
if(disc > my_discount) console.log(disc + " : " + i);
}

Does order of buttons clicking matters? If no, try to replace button.click(); with (function (button) {setTimeout(function () {button.click();}, 1)})(button);
If order matters, you still can use setTimeout, but you'll be needed to change your script logic (replace loop with recursion).

Javascript passing data from child window to parent window, IE bug?

I've got a popup window that gives data back to its parent. Using window.opener.document.data = data_from_popup;
This work well in FF, but in IE (6/7) the data can be accessed for the time the popup is still displayed. When I close the popup it looks like the data gets garbage collected.
I've tried to use a clone() function for the data received from the popup :
window.opener.add_data(data_from_popup);
and in the parent :
function add_data(data_from_popup) {
data = clone(data_from_popup);
}
It somewhat works, but in certain conditions the clone() function seems to recurse infinitely.
Have you ever experienced the same thing, and is there a way to prevent that without using a clone function?

Not sure exactly what you are experiencing, but I have successfully stored data on the opener from the child popup on a regular basis in IE (6,7 & 8) in development and production applications.
do you have a URL or some more source code that you can provide?
on a related note... you aren't trying to determine the type of an object on the opener... from the popup are you? - there's some known IE bugs in this area.
Update:
Here's a quick example...
<!--main window-->
<script>
function getThing(id){
url = 'http://mysite.com/...whatever...';
features = 'locationbar=X,menubar=Y...';
window['popup4'+id] = open(url, 'someNameWithoutSpaces', features);
}
function popupCallback(data){
alert('I got data back! ' + data);
document.getElementById('someID').innerHTML = '<b>' + data.label + ' (' + data.id + ')</b>';
//close the popup (now that we have/are done with the data)
window['popup4someID'].close();
}
</script>
<div id="someID">{Nothing Selected Yet}</div>
<input type="button" value="Pick One" onclick="getThing('someID');"/>
<!--popup window-->
<script>
function saveSelection(){
//acquire data however you want/need
var selData = {};
selData.id = 123456;
selData.label = 'iPod Touch (Jeff Atwood Edition)';
//call callback on opener
window.opener.popupCallback(selData);
}
</script>
Update 2
In testing it appears that in IE7,IE8 (but not IE6) after the popup window is closed, any reference data is lost (the references don't capture a snapshot) thus if you need the data after the popup is closed, you will need to clone it.
I thought if the data can be wrapped in an Array, cloning is a piece of cake. Just call .slice() on it to copy it, but... that doesn't work either!
I guess you'll need to save the values out that you need (either to form elements, or the DOM) since IE doesn't look like it will let you use them after the popup closes. :-(

The way I finally did it is by json encoding the complex object I wanted to pass to the parent in the popup window. The data passed back is then a simple string and can be copied without problem. On the parent side the json encoded string is evaluated to a Javascript object.