Using the onChange function
Use the onChange function to access gadget messages sent by data selection gadgets. This enables you to use JavaScript to access user selections. You can then view these values in a JavaScript debug console or in JavaScript alerts.
Displaying values in a JavaScript console
You can view a user selection from a list gadget using a a web browser’s JavaScript console. The following JavaScript code displays the publisher of a linked gadget event in a JavaScript console that supports the JSON method, such as Internet Explorer:
console.log(JSON.stringify(publisher,"",1));
The following JavaScript code displays the publisher object of a linked gadget event to a JavaScript console that supports the toSource method, such as Firefox 4:
console.log(publisher.toSource());
In both Internet Explorer and FireFox, you can inspect the JavaScript object using the following code:
console.dir(publisher);
This code writes the data exchanged between gadgets to the JavaScript console of the web browser. JavaScript code can give different results depending on the web browser it is used in. For example the toSource() method works in Firefox but not in the Internet Explorer or Safari web browser. Check your preferred web browser’s documentation for supported JavaScript debug tools.
Displaying values in Internet Explorer
Internet Explorer 9 users can use Developer Tools to view JavaScript values in the console pane. For example, the following code is in the onChange function for a chart gadget. This code runs when a user changes the list gadget that the chart gadget links to.
console.log(JSON.stringify(event,"",1));
console.log(JSON.stringify(publisher,"",1));
console.dir(data);
console.log(JSON.stringify(thisGadget,"",1));
Figure 6‑6 shows the console result of a user selecting a value in the list gadget. This console is in Developer Tools of Internet Explorer 9.
Figure 6‑6 Viewing the console in Developer Tools
Some JavaScript objects will only display the word [object Object]. For example, JSON.stringify() works in Internet Explorer but it will not display JavaScript objects in the Developer Tools console.
Use the Internet Explorer watch pane to either expand these objects or make a list of objects to watch, as shown in
Figure 6‑7.
Figure 6‑7 Viewing JavaScript objects in Developer Tools
Displaying selected values
You can extract specific parts of the message, for example:
alert(publisher._gadgetTitle);
This example creates a JavaScript alert displaying the name of the gadget that published the message.
