fnDrawCallback / forms (checkbox) / fnRowCallback

spidernet1979

Hi!

I have a problem with the 3 elements in the topics.
I have created a table (server-side -> so cool thx). The first column represents the "+"-img for details on the row and the second represents a "checkbox" which u can select and do other things (I hope you can follow me).
This worked great, and then i implemented the "fnRowCallback" to click on a row for redirecting to the details-page.
My problem is, if i click on the "+" or wants to check a "checkbox", i will redirect to the details-page. This is not the desired effect.

Here is my code:
[code]
/* Formating function for row details */
function fnFormatDetails(nTr) {
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += '';
sOut += 'C:'+aData[12]+'T:'+aData[11]+'';
sOut += 'P:'+aData[13]+'M:'+aData[10]+'';
sOut += '';
return sOut;
}

/* Event handler function */
function fnOpenClose(oSettings) {
$('td img', oTable.fnGetNodes()).each(function() {
$(this).click(function() {
var nTr = this.parentNode.parentNode;
if (this.src.match('details_close')) {
this.src = "img/data/details_open.png";
var nRemove = $(nTr).next()[0];
nRemove.parentNode.removeChild(nRemove);
} else {
this.src = "img/data/details_close.png";
oTable.fnOpen(nTr, fnFormatDetails(nTr), 'details');
}
});
});
}

$(document).ready(function() {
$('#merge').click(function() {
var sData = $('input', oTable.fnGetNodes()).serialize();
if (sData == '')
alert('Nothing to merge');
else
window.location.href='merge.php?'+sData;
return false;
});

$('#table tbody td').hover(function() {
var iCol = $('td').index(this) % 5;
var nTrs = oTable.fnGetNodes();
$('td:nth-child('+(iCol+1)+')', nTrs).addClass('highlighted');
}, function() {
var nTrs = oTable.fnGetNodes();
$('td.highlighted', nTrs).removeClass('highlighted');
});

oTable = $('#table').dataTable({
"sDom": '<"top"fl>rt<"bottom"ip<"clear">',
"iDisplayLength": 25,
"bProcessing": true,
"bServerSide": true,
"bStateSave": false,
"bSortClasses": false,
"sPaginationType": "full_numbers",
"sAjaxSource": 'response.php',
"fnServerData": function (sSource, aoData, fnCallback) {
aoData.push({"name": "no", "value": ""},
{"name": "text", "value": ""});
$.getJSON(sSource, aoData, function (json) {
fnCallback(json)
});
},
"fnRowCallback": function(nRow, aData) {
$(nRow).unbind('click').bind('click', function() {
location.href='details.php?id='+aData[10];
});
return nRow;
},
"aoColumns": [
{ "bSortable": false, "bSearchable": false },
{ "bSortable": false, "bSearchable": false },
{ "sType": "string", "sName": "state_id", "sClass": "center", "bSearchable": false },
{ "sType": "numeric", "sName": "number", "sClass": "center" },
{ "sType": "string", "sName": "email", "sClass": "left" },
{ "sType": "string", "sName": "subject", "sClass": "left" },
{ "sType": "string", "sName": "user_id", "sClass": "center" },
{ "sType": "numeric", "sName": "countprogress", "sClass": "center", "bSearchable": false },
{ "sType": "date", "sName": "date", "sClass": "right" },
{ "sType": "numeric", "sName": "attachment", "sClass": "center", "bSearchable": false },
{ "bVisible": false, "bSearchable": false },
{ "bVisible": false, "bSearchable": false },
{ "bVisible": false, "bSearchable": false },
{ "bVisible": false, "bSearchable": false },
{ "bVisible": false, "bSearchable": false }
],
"aaSorting": [[3, 'desc']],
"fnDrawCallback": fnOpenClose
});
[/code]

Can anybody help me please!!!

Lg
spidernet1979

spidernet1979

Nobody with an idea?

allan

So the problem is that the click is following the link? Have a look at preventDefault. jQuery even wraps it up to make it easier: http://api.jquery.com/event.preventDefault/

Allan

spidernet1979

Thank you for your idea.
I must confess that, sadly, I'm not the big Javascript guru. Although I have it tried, but I do not come behind it. What did you mean that, I'm not a div tag, which I can assign it?

spidernet1979

allan

What code modification did you try to use preventDefault with?

Allan

UPEngineer

I think what he is trying to accomplish (at least from what I can gather) is that he wants to click the + image to display some data.

It appears that within fnFormatDetails() is a table where there is a link to redirect to a "details" page.

Probably does what he wants until he added the fnRowCallback() function which now binds the click on the entire row, not the column. Shouldn't really need the fnRowCallback unless I am totally missing something here. It appears he accomplishes that with the fnFormatDetails table.

spidernet1979

That's alright. Thanks for the overview.
Have you got an idea to correct this problem.