Question

I have the following Javascript code:

$('td:eq(2)', nRow).html('<a class="critical" href="#" OnClick="toAjax(\''+aData[1]+'\', \''+aData[2]+'\');">'+aData[3]+'</a>');

I’m getting in Firebug the following error message

toAjax is not defined

My function:

    $(document).ready(function() {

        oTable = $('.statisticsTable').dataTable({

                "bJQueryUI" : true,

                "iDisplayLength" :50,

                "sAjaxSource": 'arrays.txt',

                "aoColumns"   : [{ "bSearchable": true, "bVisible": false },null, null, null, null, null,null,null,null,null,null],

                "fnRowCallback" : function(nRow, aData, iDisplayIndex) {

                    if (aData[3] == "1") {
                        $('td:eq(2)', nRow).html('<a class="critical" href="#" OnClick="toAjax(\''+aData[1]+'\', \''+aData[2]+'\');">'+aData[3]+'</a>');

                        } 

                    else if

                    (aData[4] == 123) {
                        $('td:eq(3)', nRow).html( '<a class="critical" href="serverID='+aData[0]+'&db='+aData[1]+'&task=Workload'+'">'+aData[2]+'<span class="highcharts"></span></a>' ).attr("class","kritikal");



                    } 

                    else if

                    (aData[3] >1) {
                        $('td:eq(3)', nRow).html( '<a id="ajax_call" class="critical" href="#">'+aData[3]+'<span class="highcharts"></span></a>' );

                        } 

                    return nRow;
                },


            } );


        function toAjax( server, db )
        {
            $.ajax({
                type: "POST",
                url: "someurl.php",
                data: "server=" + server + "&db=" + db,
                success: function(msg){
                    alert( "Data Saved: " + msg );
                }
            });
        }


    }); 

Answer 1

I can get this to work (a simplified example):

<table>
    <tbody>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
    </tbody>
</table>

$(document).ready(function(){
    var aData = [1,2,3,4];
    $('td:eq(2)')
        .html('<a class="critical" href="#">'+aData[3]+'</a>')
        .children('a.critical')
            .click(function(){
                toAjax(aData[1],aData[2]);
            });
});

function toAjax( server, db )
{
    console.log(server, db);
    return false;
}

http://jsfiddle.net/Va39r/2/

Note how I add the click handler AFTER I add the html. This makes adding the handler much cleaner than with an inline text.

EDIT – After seeing your edit, the below is the reason your toAjax() function is ‘not defined’.

Also, I would check to make sure the toAjax() is declared and not within a function scope (for instance, you don’t have it in a $(document).ready() block).