Use this value in functionline in TD row

martin1223345

Hey Guys,

I am trying to add a function call "onblur" where i can type a new value in the TD cell. What I than need is the new value to be passes by the function to a other Jquery script. My problem is that the datatable wont see the This value as it seems the code is not written correctly. What am I doing wrong?

Concrete. How do i use the new typed value as "this" in the folowing line:

{data: 'my_data', render: function ( data, type, row, meta ) { return '<div>onBlur="saveInlineEdit('this.innerHTML,'name', + row.data_id + ') "<font color='+row.cat_color+'>'+data+'</font></div>';
} } ,

See link here, i tried to make a example out of it. On click the cell becomes editable, than I type in a new value, when clicked elsewhere the value should be passes by that function. with the values: this (the new typed value), name (the post atribute), row.date.id ( the id of the sql result)

http://live.datatables.net/yowunefo/1/edit

kthorngren

I think its better to use delegated events, like this example with text inputs:
http://live.datatables.net/zukacehi/74/edit

See thejQuery delegated events docs.

I'm not sure what you are wanting to do with the onBlur event of a div in the td. If my example doesn't help then please provide more detaisl of what you are trying to do.

For a reasonable price you can buy Editor and save yourself a lot of time creating editing code.

Kevin

martin1223345

Thank you for your suggestion. I just need to find a way to simply get the value in the html code. Or a good way to achieve the same result. That is user clicks, begins editing, when done the post will accure. The script I use does that when just in php, so I am trying to create that php part in the datatable td row. That i why I am rendering. So I need this line of php rendered in datatables

<td contenteditable="true" data-old_value="<?php echo $rows["name"]; ?>" onBlur="saveInlineEdit(this,'name','<?php echo $rows["id"]; ?>')" onClick="highlightEdit(this);"><?php echo $rows["name"]; ?></td>

martin1223345

Any idea how I use a so called delegent event to simply achieve, the click of the cell, edit the cell, save the cell than post the new data?

kthorngren

This example shows the use of cell().data() to get the data of the clicked cell. You can use that for your edit form. Then submit the data via jQuery ajax to the server. Return the updated data to the client and in the success function use cell().data() to update the cell with the new data.

Kevin

martin1223345

Thank you. I keep getting errors. Can you show me what you mean in the example?

onBlur="saveInlineEdit('this.innerHTML,'name', + row.data_id + ')

I think the this.innerHTML should be your suggestion. the name should be the name of the colomn as selected from the sql datatabse. the ros.data.id is the id from the sql database row and is used to SQL state Where ID = ..

http://live.datatables.net/yowunefo/1/edit

colin

It would be worth considering Editor, as it provides this kind of functionality,

Colin

martin1223345

I know. But for my project it needs to be “free”..

kthorngren

Sorry I didn't link to my example:
http://live.datatables.net/rakimojo/1/edit

Kevin

martin1223345

Thanks I will try to see if that can work. The console gives an error on yout example and nothing is happening?

"http://live.datatables.net/runner:7:10
dispatch@http://code.jquery.com/jquery-1.11.3.min.js:4:8554
http://code.jquery.com/jquery-1.11.3.min.js:4:5257"

kthorngren

I'm not sure what example you are referring to, the link you posted doesn't work. My example seems to work without errors. Here is a screenshot:

http://live.datatables.net/rakimojo/1/edit

Kevin

martin1223345

How strange. I open your link and click on cells and nothing is happening

colin

Have you pressed "Run with JS" first to get the JS code loaded?

Colin