Trouble with jQuery ajax

Question

I am getting different errors in FF, Chrome and IE, but it all boils down there is an error with the data in $.ajax. Following is the code. Please go easy if I made a dumb mistake. I have spent hours researching this and can't figure it out. Any help appreciated.

Edited to include the error messages

FF Error message: NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument

Chrome Error message:Uncaught TypeError: Illegal invocation

IE9 Error message: SCRIPT65535: Argument not optional

Here is the code

    mc.mc_data.click_tracking = [];
var sequence = 0;
var send_it;
// the container click event will record even extraneous clicks.  need to change it to extending the jquery on click handler
$('#container').on('click', function(event) {
    logClicks(event);
    if(!send_it){
        sendIt()
    }
    sequence++;
});


function sendIt(){
    var tracking = mc.mc_data.click_tracking;
    var url = '/ajax/click_trackin';
    console.log("clicks["+sequence+"] "+$.isArray(tracking));
    $.each(tracking, function(i,v){
        console.log(i + v.innerText + " - " + v.sequence);
    });
    send_it = window.setInterval(function(){
        $.ajax({
            type: 'POST',
            url: url,
            data: {
                clicks:tracking
            },
            success: function(response)
            {
                if(response.result.length<1){
                    console.log(response+ ': no response');
                }else{
                    console.log(response);
                    tracking = mc.mc_data.click_tracks = [];                            
                }
                mc.mc_data.click_tracks = [];
                clearInterval(send_it);
                sendIt();
            },
            error: function(a, b, c){
                console.log(a+" - " + b+" - "+ c);
                clearInterval(send_it);
            }
        });

    }, 5000);
}


//

function logClicks(e){
    var temp_click = {
      'business_id':window.mc.businessid, 
      'userid':window.mc.userid, 
      'timestamp':e.timeStamp,
      'leg':window.mc.currentLeg,
      'workflow': 'dummy data',
      'sequence': sequence,
      'type':e.type, 
      'target':e.target, 
      'parent': e.target.parentElement,
      'id':e.target.id, 
      'class':e.className,
      'innerText': $(e.target).text()
    }
    mc.mc_data.click_tracking.push(temp_click);

}

Answer 1

For data, you are meant to pass an object which will later be converted into a query string. You are passing the variable tracking, which contains stuff like e.target.parentElement, which is a DOM Node, containing really a lot of further properties (like other DOM Nodes!). The error can originate from either having problems converting a DOM Node into a query string, or creating a way too long query string. It would not make much sense to send a DOM Node to the server anyways.

Only send what is necessary and can be reasonably converted to a query string.