Using Jquery buttons inside table rows

petrusjak

Hi,

I am using the following code to make use of jQuery UI buttons inside rows in the datatable:
The buttons get rendered but i can not get the click event to work properly - in other words no interaction toggle, mouseover etc.

The data is correctly a sequencial number from 1 ..

Any suggestions?

{ mData: 'positions',

"mRender": function (data, type, full ) {
// Checkbox - buttonstyle
console.log("data:",data)
return $("")
.append($("Toggle").button(
{
text: true,
icons: {
primary: "ui-icon-circle-minus"
}
}).click(function(event) {
event.preventDefault();
}
))
.html();
},

sTitle:"Sluttet" }

allan

That's because you are returning a string, not a node (which by the way is correct, you can't return a node from mRender). Because its a string and node a node, the reference is lost when the new node is actually made.

You'll be much better off using something like:

[code]
$('#myTable tbody').on( 'click', 'input', function (e) {
...
} );
[/code]

Allan

petrusjak

Hello - and thanks alot Allan,

Unfortunately I'm not capable to see where I would make the change - do i change the code within the
return $("") ?

allan

Hi,

So what I would say is do something like this in your DataTables initialisation:

[code]
{
"mData": 'positions',
"mRender": function (data, type, full) {
return "Toggle"
},
"fnCreatedCell": function ( cell ) {
$('input, label', cell)
.button( {
text: true,
icons: {
primary: "ui-icon-circle-minus"
}
} )
.click( function (event) {
event.preventDefault();
} );
}
}
[/code]

What is happening is there that the render function is returning the plain HTML, and then when the cell is actually available (it might bot be when the table is initialised if you have deferred rendering switched on for example), which is the fnCreatedCell callback, it uses the buttons plug-in and attaches the click handler.

I hadn't realised that there was a button plug-in being used before when I mentioned about using `on` . If you weren't using the button plug-in, then you would just drop the fnCreatedCell function above and have this following the DataTables initialisation:

[code]
$('#myTable tbody').on( 'click, 'td input[type=checkbox]', function(event) {
event.preventDefault();
} );
[/code]

Assigning the event that was is faster, since there is only one call, but since you are using the buttons plug-in the method above using fnCreatedCell is as good as any.

Regards,
Allan

petrusjak

GREAT!! Works fine - thanks Allan!

petrusjak

Hello Again Allan, I still have some issues i need to resolve:

Here is the code you suggested with some changes in my end:

My goal is to make use of the jQuery UI button/checkbox to be clickable in the last column in my datatable to check/unchech if employee is still working for the organization.

To do this I need to be able to toggle a true/false value, as well as collecting the other row values - and combine into a variable which I can use later on and post to the database.

1. One issue with the jQuery button UI - not "sticking" to "selected" visual state. Hoover works fine.
2. Toggling of true/fals seems to work - might need to set initial value - not shure if I did that correctly.
3. Selecting row values (from mData?) and combine into at string - I tried several examples - but could not get it right.
4. Button initially showed as very long - needed to correct length - seems OK now.

Think you could give me some further help ? - would be greatly appreciated :)

{ mData: 'positions',

"mRender": function (data, type, full) {
return ("Sluttet")
},
"fnCreatedCell": function ( cell ) {
$('input, label', cell)
.button( {
text: true,
icons: {
primary: "ui-icon-play"
}
} ).css({ 'height':'25', 'width':'125', }).prop("checked", true)

.click( function (event) {

// var anOpen = [];
// var nTr = this.parentNode;
// var i = $.inArray(nTr, anOpen);
// console.log(this); // clicked cell
// console.log(nTr); // clicked row
// $(this).parent().find("td").each(function() {
// console.log($(this).html()); // logs each cell value
// });


// Seems to work OK
var $ico = $('input').prop('checked', !$('input').is(':checked'));
$(".ui-button-icon-primary", this).toggleClass("ui-icon-pause ui-icon-play");

// Trying to use this code to get data from row
// Error - sData shows null all the time ?
var sData = t.fnGetData(this);
alert("========= "+sData);

var aPos = t.fnGetPosition(this);
alert("aPos ..."+aPos);

// Variable for later use to store info to database
// would like to incorporate data from table row also
var $myvar = $ansattnummer + ':' + $initials + ":" + $ans;

console.log($myvar)
console.log("klikk value:",$('input').prop('checked'));

event.preventDefault();
} )
},

sTitle:"Sluttet" }

allan

[quote]
// Error - sData shows null all the time ?
var sData = t.fnGetData(this);
[/quote]

`this` is the button, while fnGetData expects a TR or TD element. You could do:

[code]
var data = t.fnGetData( $(this).parents('tr')[0] );
[/code]

Which will get the data for the whole row so you can use that in the following part where you build up the $myvar variable.

Beyond that, are you able to link me to the page you are working on so I can take a look to see what is happening?

Thanks,
Allan.

petrusjak

Thanks Allan I will try that!

Unfortunately the project is in our intranet - and not accessible from the outside. I have however uploaded to debugger - an here is the link : http://debug.datatables.net/onedul

If possible I could let you in on a TeamViewer.com session - I don't know which timesone you are in - but I am in Norway. If that is possible - we could do that tomorrow ?

allan

UK here (GMT+1) so not too different!

With my suggested fix above, what issues are left to resolve? Assuming that fixed some of the problems?

Allan

petrusjak

Hi Allan - yes your suggestion works fine - I'm now able to construct a variable for saving to the database. I'm thinking of making this a JSON to be posted using ajax - are there issues about using/constructing json string or json objects ?

I also think I have the "logic" going correct now - with the button/checkbox toggling, -the only issue I can see right now is on the visual side - the checkbox/button does not "remember - stick" with the (in my case) green color - from the jquery UI theme - when clicked. I am able to change icons and text (but not the size of the text inside the button for some reason).

The checkbox/button do however respond to mouseover - and when i keep the mousebutton down - the icon color is correct.

I was thinking if there is any css in the datatables that "override" the jquery UI css?

allan

> are there issues about using/constructing json string or json objects ?

Not really. You could stringify the JSON object if you want type etc to be preserved before sending it to the server if you are concerned about that though (since you would loose type information when sending as HTTP variables). Then you'd just decode the JSON on the server.

> I was thinking if there is any css in the datatables that "override" the jquery UI css?

There shouldn't - not for buttons certainly. It makes a few modifications for the table, but not in buttons. You could try removing the DataTables CSS and see if it makes any difference.

I'd also suggest using the Inspector tools in your browser to see what CSS style is being applied to the buttons and see if something is overriding it.

Regards,
Allan