Use this value in functionline in TD row

Use this value in functionline in TD row

martin1223345martin1223345 Posts: 84Questions: 23Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited June 2021

    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

  • martin1223345martin1223345 Posts: 84Questions: 23Answers: 0

    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>

  • martin1223345martin1223345 Posts: 84Questions: 23Answers: 0

    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?

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • martin1223345martin1223345 Posts: 84Questions: 23Answers: 0

    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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    Colin

  • martin1223345martin1223345 Posts: 84Questions: 23Answers: 0

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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

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

    Kevin

  • martin1223345martin1223345 Posts: 84Questions: 23Answers: 0

    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"

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • martin1223345martin1223345 Posts: 84Questions: 23Answers: 0

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

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

    Colin

Sign In or Register to comment.