AJAX/Django - where to put object id in HTML button?

Question

What is the pattern to creating a button which do some action using AJAX ?

I work with Django-tables2 and I'm not sure what to put into the row to delete this object using AJAX . This works but I would like to know what is the most common approach. Where to put id of the object?

So I have a view which deletes the object using it's id . Currently, I put an id of the object as a value of the button and name "delete-button".

In JS file, JQuery , after click on button checks, which type of button is it (delete or confirm), then checks for id and send request to my-site/delete-object/.

def delete_object(request,id):
    # deletes the object
    # returns JSON 

This is my current HTML , should I change way I provide data to AJAX ?

delete = tables.TemplateColumn('<button name="delete-button" 
id="" value={{record.id}} type="button">Delete order</button>')

I did not put "delete-button" string as an id because there are multiple delete buttons in the table - each row has it's own.

And I did not put {{record.id}} as an id because there are two types of buttons so both buttons would have the same id .

Answer 1

You can use a data attribute which lets you store information on an element.

<button name="delete-button" id="" data-id={{record.id}} type="button">Delete order</button>

You can then pull the value from the data attribute in your click handler.

function onClick (event) { var id = event.target.dataset.id; }

Answer 2

You could use:

delete = tables.TemplateColumn('<button name="delete-button" 
id="delete-button-{{record.id}}" value={{record.id}} type="button">Delete order</button>')

That way each button will have it's own id ej: delete-button-1 and will have a reference to the id of the record.