Create links calling JS methods in a table cell (undefined method error)

jacek

Hello!

I'm struggling with (I hope) simple problem, but somehow can't sort it out. The scenario is the following: there is a form of creating new purchase order in the admin section of the site. At the beginning there is a button of client selection: it opens a jQueryUI Dialog with a simple search form, which makes an Ajax request and shows the results using the great DataTables. Each client can have more than one shipping address, so admin should be able to click the desired shipping address link, which calls a function selectClient() setting .val() of some hidden fields in a big form and closes the Dialog.

Here is a code snippet ( only the most important fragments, also I put an alert() only in selectClient() for a better clarity ):

[code]


Search phrase:







$(document).ready(function(){
function selectClient(a){
alert(a);
}


$("#search-user-form").submit(function(e){
e.preventDefault();

var q=$("#q").val();

if(q.length > 0){
$.ajax({
url: "/service/search-users/",
data: $("#search-user-form").serialize(),
type: "GET",
context: this,
dataType: 'json'
}).done(function(data) {

// Service returns: {"DATA":[], "TOTALROWS":n}
var totalRows=data.TOTALROWS;

if(totalRows > 0){
$("#search-results").html('');

var oTable = $('#sResults').dataTable( {
"bJQueryUI": true,
"aoColumns": [
{ "sTitle": "Box" },
{ "sTitle": "Name" },
{ "sTitle": "Email" },
{ "sTitle": "Company" },
{ "sTitle": "Billing direction" },
{ "sTitle": "Shipping directions" }
]
} );


$.each(data.DATA, function(index, value){
var tmpShipping='';
$.each(value.shipping, function(i, v){
// !!! Those links give a described error:
tmpShipping+='' + v.SHIPPINGDESCRIPTIVENAME + '
';
})

$('#sResults').dataTable().fnAddData( [
value.BOXNUMBER,
value.billing.BILLINGNAME + ' ' + value.billing.BILLINGLASTNAME,
value.USEREMAIL,
value.billing.BILLINGCOMPANYNAME,
value.billing.BILLINGADDRESS + ', ' + value.billing.BILLINGDISTRICT + '
' + value.billing.BILLINGCITY + ', ' + value.billing.BILLINGREGION,
tmpShipping
] );
});

}
else{
$("#search-results").html('Client not found');
}

oTable.fnAdjustColumnSizing();

});
}

return false;
});
});

[/code]

Problem: created link in the [code] tmpShipping [/code] variable, when clicked, gives an error "selectClient is not defined". I did a lot of search in the forums and of course Google, the only solutions i found were the ones creating a link to external resources, not JS methods. I'm using DataTables 1.9.4.

I'd greatly appreciate pointing me in the right direction.

jacek

Well, I'm responding my own question for the reference of whoever might encounter him-/herself in a similar situation:

The "external" function should be defined outside the $(document).ready(function(){}); block, then everything will be working as expected:

[code]

function selectClient(a){
alert(a);
}

$(document).ready(function(){

$("#search-user-form").submit(function(e){
...
[/code]