Join the Teckiy Community
Sign up for Free !!
World's first open source developer community with
Ticketing System
Hi developers, could somebody advise me how to create on-click editable table in web application in Django? I am using Django Rest Framework API and AJAX when adding and deleting rows from my table in one url. But I also want users of my web application to be able edit items in the table when clicking on the item (without a button and on the same url). After the change I need altered item in the table to be automatically saved into the database (without save button). I appreciate every help or idea, I am bit lost with this problem. Thank you very much for your help.
When user clicks on the item/cell in the table itself. And then, when he changes it and clicks elwhere I need the cell to be automatically saved into the database. I am using Django Rest Framework API and AJAX to get everyrhing done in one URL.
- hakinen100 4 years, 9 months agoStep 1:
We need to create the table using GET API end points just like below,
var currentItem =
<div class="table-responsive-sm">
<table class="table">
<tr>
<td><p id='todo-${elem.id}' onclick="strikeTask(${elem.id},${elem.completed}, '${elem.name}')">${name}<p></td>
<td>
<button class="button float-lg-right" id='delete-${elem.id}'
onclick="deleteTask(${elem.id})">x
</button>
<button class="button float-lg-right" id='delete-${elem.id}'
onclick="editTask(${elem.id},'${elem.name}')">Edit
</button>
</td></tr>
</table>
</div>;
Step 2:
Now we have onclick event to handle the edit part just like below,
function editTask(item, name) {
submitType = document.getElementById("submitTask").value;
/
if (submitType == "Submit") {
document.getElementById("title").value = name;
document.getElementById("taskform").action = /api/todo/${item}/edit/;
document.getElementById("submitTask").value = "Update";
}
}
I hope above answer resolved your problem. We are closing the ticket. Happy coding :) !!!
- Vengat
4 years, 9 months ago
good
Do you want to edit the item in that table row itself or do you want to edit the item when user click edit option and then navigate to edit url ?