How can I debug why this click handler never fires?

Question

I am going to be excrutiatingly detailed here. I am using Firefox 3.6.3 on Max OSX with Firebug 1.5.3.

I have two versions of a project, one which works and one with a bug. One I downloaded and one I typed by hand. Take a guess which one doesn't work. They should be the same except that mine uses a newer version of jQuery and the files are named differently. jQuery version is not the issue. I made mine use the older jquery and I made the working one use the newer jquery. Either way, mine still broke and the downloaded one still works. I've busted my eyes trying to see how these projects are different. The only thing I don't want to do is copy the working code to the busted code because I need to be able to figure this stuff out when it is my own unique code causing similar issues.

There are no errors that I can see in Firebug in my code, in fact, 2/3 of it works just fine. just the second button does nothing. So I wanted to step through. These are always eyeball errors and I really suck at seeing them.

I put it on a public server. http://colleenweb.com/jqtests/ex71.html And I want to debug ex71.js

If you firebug the working one and set a break point at line 13 in ex71.js the variable json has the expected values when you click on the second button. But If you firebug this one, it never gets there. I've been over the html and all the names of everything seem to match up. I also wonder why the buttons aren't right justified but that's a css thing. Please tell me what I'm missing, and more importantly, what tool/technique I could use to find these types of bugs.

Answer 1

From api.jquery:

For example, all strings represented in JSON, whether they are properties or values, must be enclosed in double-quotes. For details on the JSON format, see http://json.org/.

Are you sure the incoming data is syntactically accurate?

Answer 2

I think the function you're using is expecting JSONP. That's what the callback=? indicates anyway. Have you tried leaving it off?

$.getJSON('ex71.json', function(json) {
    $('input#tmpTitle').val(json.title);
    $('input#tmpCompany').val(json.company);
}); 

This page on the documentation explains in a note partway down that the callback=? can be used for JSONP which is needed for cross domain calls. If you're not doing a cross domain call then you don't need it. If you are doing a cross domain call then you need to return JSONP instead of regular JSON (which is actually a lot easier than it sounds).

http://api.jquery.com/jQuery.getJSON/