How do I catch Javascript functions that are being called?

Question

I'm working with COGNOS, a very frustrating BI application that relies heavily on Javascript. Basically, when a <select> box is changed, the data on screen is refreshed, presumably by an AJAX function or something similar. I'd like to force this change using jQuery, but I'm not sure how to intercept the call it is making so I can duplicate it. There's also a metric ton of JS code, so it's hard to find by hand.

Is there a way using Firebug to display the different functions being called? Is my approach correct?

Answer 1

If you're using Firefox + Firebug you can activate the "net" tab and examine all of the Ajax calls being made. (look under XHR button)

Answer 2

Select the Element in Firefox and see what its onclick event is or if it has an ID then search the JS file for that ID.

Answer 3

If you open the Firebug Script panel, on the top left there's a button that looks like a pause button on a TV remote: ||. That tells Firebug to pause on the next bit of JavaScript that runs. So I'd get the page open, ensure that the Script panel is enabled, click that button, then change the select box. That should trigger a breakpoint in Firebug, after which you can step through the code to figure out what's being called when.

Alternately, if you don't mind using a different tool, Google Chrome has a built-in debugger and inspector which can show you the event handlers attached to an element. So in Chrome, if you bring up the page, right-click the select box and choose Inspect Element, then on the right-hand side at the bottom there should be a list of the event handlers attached to it. That may be a bit easier to work with.

Finally, in either tool, if you can identify the bit of code in the guts that's actually causing the data reload (by looking for a URL, for instance, or an XmlHTTPRequest instance, or jQuery's .ajax, .post, .get, or .getJSON functions if it's using jquery), you can put a breakpoint on that and then trigger the select, then look at the call stack (on the right-hand side in both tools).

Good luck!

Answer 4

Sadly, at this point, you are probably best off in Cognos using the old-fashioned alert box method of debugging. IBM has said that newer versions of Cognos will work in Firefox, but the pre-IBM code was very IE-centric, and not even especially good in new versions of IE. You can also use the F12 debugger functionality in newer versions of IE, which is sometimes useful. I don't pretend any of this is as good as Firebug.

Also, with regard to the actual problem you were attempting to debug, the select in Cognos, if you click on it while editing the report, has a parameter called "Auto-submit". If you change that to "no", then you won't need to disable the behavior in jQuery.