Question

I have the following script which I want to debug:

function getTabFrame() {
    $.ajax({
        url: 'get_tab_frame.aspx?rand=' + Math.random(),
        type: 'GET',
        dataType: 'json',
        error: function(xhr, status, error) {
            //alert('Error: ' + status + '\nError Text: ' + error + '\nResponse Text: ' + xhr.responseText);
        },
        success: function( data ) {
            $( "#divTabsDropdown" ).empty();

            $.each( data, function( index, item ) {

                // create tabs with custom ids
                $( "#tabs" ).tabs( "add", "get_tab_content.aspx?tab=" + item.key, item.value)
                    .find( ">ul>li:last" )
                    .attr( "id", "tab_group_" + item.key );

                // creates the buttons
                $( "#divTabsDropdown" ).append( "<div class='item custom_group' id='tab" + item.ordering + "'>" + item.value + "</div>" );

                // link buttons with tabs
                $("#tab" + item.ordering).live('click', function() {
                    $("#tabs").tabs( "select" , $( "#tab_group_" + item.key ).index() );
                });
            });
        }
    });
}

If I add a breakpoint to $.ajax({, and run the debugging, that is where it stops. If I then hover over data in the line success: function( data ) {, no popup is displayed so no value can be seen. I want to see what is inside data.

So I thought “maybe I need to press F10 a couple of times so firebug can actually run enough of the javascript/jquery before a value is displayed”. So I did, I got to the end of the function, hovered the mouse over data in success: function( data ) {, and again, no popup, therefore no data is displayed.

What am I doing wrong? Why can’t I see what is held within data?

I have installed firebug plus firequery in firefox.

Answer 1

data is defined as a parameter of your success callback function. If you want to see it’s value, you have to be on a line in the implementation of this function.

You should put the breakpoint on the first line of your success callback, which is

$( "#divTabsDropdown" ).empty();

If it’s never hit, it’s that you request is still pending or ended up in an error. In this last case, error callback will be called.