jquery Ajax call resulting in Undefined Error in Firefox

Question

Hi

I've been pulling my hair out for the last few hours with this problem. And the googling has been hampered by the very vagueness of this. So let me apologise for that first.

Basically I'm using jquery and ajax (with C#) to return data from the backend and display that to the screen. The code works perfectly for firefox and IE. But when the data gets too large (??) (1500+ table rows) all I get is an undefined popup.

Debugging in firefox (3.6) it doesn't even go into the success method. Worse still it doesn't even go into the error method. A lot of superfluous information there, but I'd rather show everything I'm doing.

The Code

$j.ajax(
        {
            type: "POST",
            url: "AdminDetails.aspx/LoadCallDetails",
            data: "{" + data + "}",
            contentType: "application/json;charset=utf-8",
            dataType: "json",                
            success: function(msg) {
                $j("#CallDetailsHolder").html(msg.d);
                $j(".pointingHand").hide(); 

                var oTable = $j('#dt').dataTable({
                    "bProcessing": true,
                    "bPaginate": true,
                    "bSort": true,
                    "bAutoWidth": false,
                    "aoColumns": [
                        { "sType": 'html' },
                        { "sType": 'custdate' },
                       { "sType": 'html-numeric' },
                        { "sType": 'ariary' },
                        { "sType": 'html' },
                        { "sType": 'html' }
                    ],
                    "oLanguage": {
                        "sProcessing": "Traitement...",
                        "sLengthMenu": "_MENU_ Montrer",
                        "sZeroRecords": "Aucun enregistrement",
                        "sInfo": "_START_ à _END_ de _TOTAL_",
                        "sInfoEmpty": "0 à 0 de 0",
                        "sInfoFiltered": "(filtrée à partir de _MAX_ )",
                        "sInfoPostFix": "",
                        "sSearch": "Rechercher",
                        "sUrl": "",
                        "oPaginate": {
                            "sFirst": "premier",
                            "sPrevious": "Précédent",
                            "sNext": "suivant",
                            "sLast": "dernier"
                        }
                    },
                    "sDom": 'T<"clear">lfrtip'

                });

                $j('#CompteBlocRight0').unblock();

                $j('#btnRangeSearch').click(function() { oTable.fnDraw(); });

            },
            error: function(msg) {
                DisplayError(msg);
                $j('#CompteBlocRight0').unblock();
            }
        });               //$.ajax 
    }

The code definitely works. And even displays in IE without any issues.

Any help???

Answer 1

Since it works with small datasets, and fails with large datasets, you need to isolate a failing case with a large dataset.

Use the Net tab in Firebug to see the server's response. Status 2xx should go into the success handler, all others should go into the error handler. Perhaps your server is puking in a way that the Ajax control gets confused?

With these sorts of errors, it's often very helpful to simplify your code for debugging. Try this code, with the handlers replaced with simple messages:

$j.ajax(
    {
        type: "POST",
        url: "AdminDetails.aspx/LoadCallDetails",
        data: "{" + data + "}",
        contentType: "application/json;charset=utf-8",
        dataType: "json",                
        success: function(msg) {
            console.log("in success handler");
        },
        error: function(xhr, textStatus, errorThrown) {
            console.log("in error handler: "+textStatus);
            console.dir(xhr);
            console.dir(errorThrown);
        }
    });               //$.ajax 
}

UPDATE: the signature of your error handler is not correct. Updated my sample.

Answer 2

You've set your charset to utf-8? Could the keyword that triggers a big popup be something that the server side doesn't understand?

This article is about JSON/Ajax/UTF-8 using PHP, but have a read: http://particletree.com/notebook/json-ajax-and-utf8/

Answer 3

After a bit of digging, this seems to be the problem.

Bugzilla