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?

Hollywood

Answer 1

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!

Vaunt

I prefer to use GC actually, but didn't think it'd work with Cognos. I'll give it a shot and report back. Thanks TJ! – Hollywood

Eep. Ok, so no luck in Chrome because it isn't supported by Cognos. So I went back to FF/FB and used the pause as suggested. I triggered an AJAX call, but the script didn't break. I did this before I asked the question, thinking I did something wrong. Any ideas? The AJAX call was still sent. – Hollywood

@melee: Wow. Actually, wow^2 because I'm surprised Cognos doesn't work with Chrome (what are they doing, browser sniffing? tsk). Sadly, if the break didn't work, all you can do is find out how they're attaching the handler (easy if the select has an id or even an onclick, harder if it doesn't) and put a breakpoint on the handler you find. But you knew that. :-( Good luck! – Vaunt

It's not breaking because the JS isn't being recognized by Firebug. I thought maybe because it was in a frame, but that's not the case. Now I'm really, really confused. – Hollywood

Went ahead and gave you the answer for at least pointing me in the right direction. I was able to actually see the report (but not edit it) in Chrome, so I got to see the event handlers. Didn't tell me much, but it was what I was looking for. – Hollywood

Answer 2

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.

Atalaya

Answer 3

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)

Aggi

Right, that's the call that is being made with the post data, but does it show the actual function that made the AJAX call? (Does that make sense?) – Hollywood

Answer 4

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.

Augmentative

Tried that, unfortunately I think there's an onChange function being run. – Hollywood