I am new to x-editable and jQuery so I am having an issue understanding how to get the "id" of a clicked element using x-editable, hopefully someone can help.

I have several links on my page within 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 am firing an x-editable script that will allow me to do an inline edit. The issue I am having is that I need to pass in which line item I am working on so that I can update my db. I dont know how (or I am doing it wrong) to access that "id" of the link 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") keeps pulling up the first instance on the page's "id", not the one that is being edited.

Anyone know how to get the id of the link that I clicked using x-editable?

Thanks so much!!!

I am new to x-editable and jQuery so I am having an issue understanding how to get the "id" of a clicked element using x-editable, hopefully someone can help.

I have several links on my page within 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 am firing an x-editable script that will allow me to do an inline edit. The issue I am having is that I need to pass in which line item I am working on so that I can update my db. I dont know how (or I am doing it wrong) to access that "id" of the link 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") keeps pulling up the first instance on the page's "id", not the one that is being edited.

Anyone know how to get the id of the link that I clicked using x-editable?

Thanks so much!!!

• javascript
• jquery
• ajax

2 Answers 2

Decided I would offer the solution instead of deleting the post in case anyone else needed this...

 $('#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) {

            }
        });

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