tags:

views:

353

answers:

1

Often I find that I need to use jeditable on several areas each requiring different parameter settings.

For example I use jeditable with autosuggest input type, and then I need to pass different data sources to the different inputs.

I wanted to use just one instance of the editable plugin, and have tried to assign attr-values to the script, but obviously this does not work the way I'm approaching it..

I'm hoping someone can guide me a bit..

Essentially I would like to be able to set a jeditable parameter value based on the value of an ttribute of the dom element it is manipulating.

something like:

$('.editme').editable('savedata.php',{
    loadurl   : 'loaddata.php',
    loaddata  : { handle:  $(this).attr('rel') }
});

then I could simply specify different load sources with:

<div id="fruits" class="editme" rel="myfruits">apples</div>

I didn't find the keyword this to work in this way..

How can I access the attributes of the dom element being manipulated dynamically for each jeditable binding?

here is another example of what I want to do: authorsList = "".split(",");

  // extend jeditable with autocomplete 
  $.editable.addInputType('autoc', {
      element: function(settings, original) {
      var input = $("<input />").autocomplete(settings.mdata, settings.autoc);
      $(this).append(input);
  return input; }
   });

$('.editable.authors').editable('savedata.php',{
   type : "autoc", 
   mdata    : $(this).attr('rel'), // should hold the name 'authorsList'
   onblur   : 'ignore',
   autoc    : {  multiple: true,
                 multipleSeparator: ',' },
 loadurl   : 'loaddata.php',
 loadtype  : 'POST',
 loaddata  : {handle: function(){ return eval($("#objhandle").val())}, lookuptype: 'mirror'},
 submit    : 'save',
 cancel    : 'cancel',
 tooltip   : "Click to edit",
 style     : "inherit",
 cssclass  : 'jedi',
 id        : "field",
 name      : "data",
 submitdata : {
  storetype: 'mirror',
  handle: function(){return eval($("#objhandle").val())},
  timestamp: function(){return eval($("#objtimestamp").val())}
 } 
});
A: 

Warning, totally untested code but something like following should work:

$('.editme').each(function() {
    $(this).editable('savedata.php',{
        loadurl   : 'loaddata.php',
        loaddata  : { handle:  $(this).attr('rel') }
    });
});

This way the score of this should be correct when initializing Jeditable on the element.

Mika Tuupola
thanks for the quick response :) !! .. and yes it really should work.. so it must work.. don't know why I can't get it to.. but I'm probably missing something simple due to coding fatigue.. will debug futher then now I know I'm not essentially trying it the wrong way.. :)
I'm moving the followup to my 'real' account, this one was mistakingly done with a new account..For continuation, please see http://stackoverflow.com/questions/1277570/
still can't gt this to work.. I'm continuing this question here: http://stackoverflow.com/questions/1277570 for some reason the $(this).attr('rel') or any other as well as $(this).html() etc are all UNDEFINED. $(this) is [object Object] and <i>this</i> is [object HTMLDocument]