X-editable how to get clicked element id

Question

I am new to x-editable and jQuery, so I had a problem understanding how to get the "id" of an element with a click using x-editable, hope someone can help.

I have some links on my page in a div called #line_item_unit_cost.

<div id="line_item_unit_cost"> <a id="1">link</a> <a id="2">link</a> <a id="3">link</a> <a id="4">link</a> <a id="5">link</a> </div> 

When I click on one of the links, I run an x-editable script that will allow me to do inline editing. The problem I am facing is that I need to convey in which position I work so that I can update my db. I do not know how (or am I doing it wrong) to access this "id" of the link that I click.

Here is my script:

  $('#line_item_unit_cost a').editable({ validate: function(value) { if($.trim(value) == '') return 'This value is required.'; }, type: 'text', url: '/post', pk: {{ purchaseOrder.id }}, title: 'Enter Value', params: { purchaseOrderId : {{ purchaseOrder.id }} , lineId : $(this).attr("id"), text: 223 }, ajaxOptions: { dataType: 'json' }, success: function(response, newValue) { } }); 

This line: lineId: $ (this) .attr ("id") gives me a null value.

If I use lineId: $ ("# line_item_unit_cost a"), attr ("id") continues to pull the first instance on the id page, not the one that is being edited.

Does anyone know how to get the id of the link I clicked using x-editable?

Thanks a lot!

Answer 1

I decided to offer a solution instead of deleting the message if someone needed it ...

  $('#line_item_unit_cost a').editable({ validate: function(value) { if($.trim(value) == '') return 'This value is required.'; }, type: 'text', url: '/poste', pk: {{ purchaseOrder.id }}, title: 'Enter Freight Value', params: function(params) { var line = $(this).attr("id"); var data = {}; data['purchaseOrderId'] = params.pk; data['field'] = params.name; data['value'] = params.value; data['lineId'] = line; return data; }, ajaxOptions: { dataType: 'json' }, success: function(response, newValue) { } }); 

Answer 2

 $(custom_selector).each(function() { var current_element = $(this); $(this).editable({ //common code where you can use current_element }); });