how to get to the value of manipulated dom element

Question

This is a Continuation of Jeditable: how to set parameters based on dom element attributes

Please respond here.. this is my 'real' account..

I'm trying to assign different parameter values to different divs on which I have enabled the jQuery plugin 'Jeditable'. I can't get it to work, I'm sure its something simple.. but I can't figure it out..

How do I acheive it?

Given the following DOM element:

<div class="editme" id="theone" rel="test"></div>

These various snippets produce the following dafault placeholder texts for the above empty div:

$('.editme').editable('savedata.php',{
    placeholder : "txt -  "+$(this),
    }   
);
// outputs: "txt -  [object Object]"

$('.editme').editable('savedata.php',{
placeholder : "txt -  "+this,
}   
);
// outputs: "txt - [object HTMLDocument]"

$('.editme').editable('savedata.php',{
placeholder : "txt -  "+$(this).html(),
}   
);
// outputs: "txt - undefined"

$('.editme').editable('savedata.php',{
placeholder : "txt -  "+$(this).attr('rel'),
}   
);
// outputs: "txt - undefined"

$('.editme').editable('savedata.php',{
placeholder : "txt -  "+this.attr('rel'),
}   
);
// outputs: "" (NULL / EMPTY STRING, must be due to error)

Answer 1

Unfortunately, when you use this in your code it's referencing the parameter collection and not the jQuery object you are trying to access. To accomplish what you're trying to do, you will need reference the jQuery object outside of the parameter collection.

Something like:

$('.editme').each( function() {
    var rel = $(this).attr('rel');
    $(this).editable('savedata.php', {
        placeholder : "zzz" + rel,
        }       
    );
});