Dynamically set jeditable target URL

Question

I have a series of div's that I am making editable with jEditable. Each item in the collection has a unique, RESTful URL that I need to PUT to to save. For example:

• budgets/6/incomes/1
• budgets/6/incomes/5
• budgets/6/incomes/8
• etc...

I'm not sure how to inject the unique URL into the settings.target property of jEditable for each row of my output (income, in this case).

The JavaScript:

  $(document).ready(function() {
     $('.edit').editable("http://<needstobedynamic", {
        method    : 'PUT',
        indicator : "saving...",
        tooltip   : "Click to edit"
     });

The Rails view (html.erb):

<% @incomes.each do |income| %>
    <div class="row-fluid action_container">
        <div class="edit"><%= number_to_currency income.amount %></div>
    </div>
<% end %>

Here is another post that references the problem, but with no accepted answer. The answer given in this post allows me to set the target URL dynamically, but doesn't solve the problem of having that URL set somewhere in the HTML declaration as opposed to being set in JavaScript.

I am also open to and appreciative of suggestions for other libraries.

Answer 1

OP,

Expanding on the answer in the related SO question provided.

For referencing RESTful urls in the markup, (as well as in the JS) would storing the value in a data attribute suit your needs?

$('div.whatever').editable("", {
    onsubmit: function (settings) {
      settings.target = "//foo.bar" || $(this).attr('data-editable-url');
    }
});

<div class="whatever" data-editable-url="budgets/6/incomes/1">
...
</div>

That's the route that immediately comes to mind.

Hope it helps.