CODEWITHSUNDEEP
javascripthtmlajax
scdmb
scdmb

Reputation: 15621

Embedding database ID of element in HTML for Ajax request

There is given code:

<div id="256">
   <p>SOMELEMENT</p>
   <button class="edit">EDIT</button>
   <button class="delete">DELETE</button>
</div>
<div id="257">
   <p>SOMELEMENT2</p>
   <button class="edit">EDIT</button>
   <button class="delete">DELETE</button>
</div>
<script>
   $(".edit").click(function() { var id = $(this).parent().attr("id"); /* do some Ajax here, edit element in database with given id*/});
   $(".delete").click(function() { var id = $(this).parent().attr("id"); /* do some Ajax here, delete element in database with given id*/});
</script>

There is a database with some elements, these elements have ID and I would like to do some actions on these elements via Ajax. I need database ID of element so that I can do some Ajax requests on this element. Solution above works, however there are some flaws - it is dependent from HTML structure (for example when I wrap button with some other element then parent() will not work because HTML structure changed).

How to store the better way database IDs of elements in HTML so JavaScript can get it for example for Ajax requests?

Upvotes: 2

Views: 2406

Answers (3)

aphax
aphax

Reputation: 2925

Although you already have a (completely valid) accepted answer, I wanted to offer another way of solving your problem that removes the burden of having to attach data to every button, instead relying on a class that can be used to get a handle to the actual item/record/entry to which the data is attached, as my HTML tends to have such a class anyway I found this pretty convenient (I'll use a list of comments as an example):

<div class="comment" data-id="256">
    <p>SOMELEMENT</p>
    <button class="edit">EDIT</button>
    <button class="delete">DELETE</button>
</div>
<div class="comment" data-id="257">
    <p>SOMELEMENT2</p>
    <button class="edit">EDIT</button>
    <button class="delete">DELETE</button>
</div>

<script>
    $(".comment .edit"  ).click(function() { var id = $(this).closest('.comment').data('id'); });
    $(".comment .delete").click(function() { var id = $(this).closest('.comment').data('id'); });
</script>

Key is the .closest() jQuery function that travels up the DOM tree to find the '.comment' div that represents the comment entry. This means that as long as you keep your .edit and .delete elements inside the .comment DIV, you're free to modify your HTML structure without having to worry about your JavaScript, and without having to add the data-* attributes in multiple places.

Upvotes: 2

Chase
Chase

Reputation: 29549

Why not do something like this using the data() method: 

<div>
   <p>SOMELEMENT</p>
   <button class="edit" data-id="256">EDIT</button>
   <button class="delete" data-id="256">DELETE</button>
</div>
<div>
   <p>SOMELEMENT2</p>
   <button class="edit" data-id="257">EDIT</button>
   <button class="delete" data-id="257">DELETE</button>
</div>

Now that you have the data-id associated with your buttons, you can do:

$(".edit").click(function() { 
  var id = $(this).data("id"); 
  /* do some Ajax here, edit element in database with given id*/
});

EXAMPLE

Upvotes: 4

squeezebox
squeezebox

Reputation: 49

You could use data attributes. Instead of having the id of an data entity be represented by an html id attribute. These are attributes of the form data-*. Your code could then look like this: 

<div data-elementid="256">
   <p>SOMELEMENT</p>
   <button class="edit">EDIT</button>
   <button class="delete">DELETE</button>
</div>
<div data-elementid="257">
   <p>SOMELEMENT2</p>
   <button class="edit">EDIT</button>
   <button class="delete">DELETE</button>


    <script>
        $(".edit").click(function() { var id = $(this).parent().data('elementid'); });
        $(".delete").click(function() { var id = $(this).parent().data('elementid'); });
    </script>

John Resig writes about it here: http://ejohn.org/blog/html-5-data-attributes/

Additionally you could set the data attribute on the button elements, then you wouldn't have to traverse up to the parent() to get the id.

If you want to go deeper, check out a js framework like Angular.js, Ember.js or Backbone.js. The idea is that the DOM shouldn't be used for storing data, only presenting it. Javascript models can then be used to store your application data.

Upvotes: -2

Related Questions