Question

Hope someone can help me as I’ve been searching for hours.

I’m planning on using jeditable for in place editing with ruby on rails. I can do normal text just fine but I’m having some problems with the select option.
I’d like to pass the data to the editable field through a collection embedded in the field using data-attributes. Since I have around 40 or 50 fields on my page I can’t just create one call per each editable field.

Here’s some code:

$(".editable[data-type='select']").editable("/post/here", {
    id: '_action',
    height: '1.8em',
    type: "select",
    data: $(this).data("collection")
    submit: "Ok",
    submitdata : function () {
        return {
            "id": this.getAttribute("data-query"),
            "index": this.getAttribute("data-index")                
        };
    }
});

The collection can be found on the link which I generate through a helper method:

content_tag(:div, opt_value, class: "editable", id: options[:_action], "data-query" => query.id, "data-index" => options[:index], "data-type" => "select", "data-collection" => Hash[double_array].to_json, style: "display:inline")

which produces something like this:

<div class="editable" data-collection="{'0':'Option 0','1':'Option 1'}" data-query="33" data-type="select" id="some_action" style="display:inline">Option 1</div>

Obviously this doesn’t work:

data: $(this).data("collection")

By trying to stay as unobtrusively as possible, is there a way to access the embedded attributes within the calling editable field?

Thanks,
Octavian

Answer 1

Apparently that’s a bit difficult to perform.

I ended up editing the src in a way that if a tag has a data-collection attribute it will try to use that data, otherwise it will perform as before.

Here’s some code:
Original

...truncated...

content : function(data, settings, original) {
  /* If it is string assume it is json. */
  if (String == data.constructor) {
    eval ('var json = ' + data);
  } else {
    /* Otherwise assume it is a hash already. */
    var json = data;
  }

...truncated...

Edited code:

...truncated...

content : function(data, settings, original) {
  /* If it is string assume it is json. */
  if (collection = $(original).data("collection")) {
    var json = collection;
  } else if (String == data.constructor) {
    eval ('var json = ' + data);
  } else {
    /* Otherwise assume it is a hash already. */
    var json = data;
  }

...truncated...