How to pass custom data in jeditable

Question

I have field being updated by jeditable It is a file name so I show file name like "filename...." if it is long.

i want to use of data $(this).data("id") but it show undefined

if console it in submit data it show correct value.

Here is my code.

<span id="2012_03_10 15_05_46.jpg" class="rename" title="Doubleclick to edit...">2012_03_10 15_...</span>
<span id="2012_03_10 15_05_47.jpg" class="rename" title="Doubleclick to edit...">2012_03_10 15_...</span>
<span id="2012_03_10 15_05_48.jpg" class="rename" title="Doubleclick to edit...">2012_03_10 15_...</span>

$(".rename").editable("process.php", { 
    data : $(this).data("id"),
    //placeholder : "txt -  "+$(this).attr('id'),
    indicator : "<img src='images/indicator.gif'>",
    tooltip   : "Doubleclick to edit...",
    event     : "dblclick",
    onblur    : "submit",
    style     : "inherit",
    submitdata : function() {
        console.log($(this).attr("id"));
        return {action : 'rename_file'};
    }
});

how can I access that correct value as data. and also separate value for each

Answer 1

This working fine

<span id="folder.jpg" class="rename" data-attribute="folder.jpg" title="Doubleclick to edit...">folder.jpg</span>

$(".rename").editable("process.php", { 
data : $(this).data("attribute"),

Answer 2

$(this).data("id") only works if your are using any event like click, if not then you have to use your selector for this like,

$(".rename").editable("process.php", { 
    data : $(".rename").data("id"), // use .rename instead of this
    // your remaining code

Yes, $(this) will work fine in submitData

If you have only id then try this data : $(".rename").attr("id"), but according to your edited question you have to use looping for unique every rename span like

HTML

<span data-id="2012_03_10 15_05_48.jpg" class="rename" title="Doubleclick to edit...">2012_03_10 15_...</span>

SCRIPT

$(".rename").each(function(){
    $(this).editable("process.php", { 
       data : $(this).data("id"),
       // your code;
    });// end of editable code
});// end of each loop