2

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())}
    }   
});
Mika Tuupola
  • 19,877
  • 5
  • 42
  • 49

2 Answers2

3

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
  • 19,877
  • 5
  • 42
  • 49
  • 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.. :) –  Aug 12 '09 at 20:57
  • 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/ –  Aug 14 '09 at 12:30
  • 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 this is [object HTMLDocument] –  Aug 14 '09 at 12:36
-1

this worked for me 

$(this).data('rel)

and for the html

<div id="fruits" class="editme" data-rel="myfruits">apples</div>
Jakub Folejtar
  • 320
  • 1
  • 2
  • 11