Rails, X-Editable not passing correct params in AJAX call

Question

I have been looking at this for 2 days now. I have an app in Rails 4.2.5 and ruby 2.1.7. I am trying to implement inline editing with X-Editable.

I am not using any gems, just importing the relevant files with:

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

<!-- x-editable (bootstrap version) -->
<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.6/bootstrap-  editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.6/bootstrap-editable/js/bootstrap-editable.min.js"></script>

In my view I have:

<a href="#" class="editable bolbol editable-disabled" data-pk="1" id="amount" data-type="text" data-url="<%=crossingcost_path(crossingcost.id)%>" data-title="Enter Amount">
  <%= crossingcost.amount %>
</a>

and I'm initializing with

// make amount editable
$('.bolbol').editable({
});

So far so good, I can access the pop up to edit the value I am looking to edit.

Then I get an error message:

ParameterMissing (param is missing or the value is empty: crossingcost)

So the parameter hash which is sent is as follows (from the logs):

Parameters:

{
  "name" => "amount",
  "value" => "166",
  "pk" => 1,
  "id" => "1"
}

whereas as it should likely send something like:

{
  :crossingcost => {
    "name" => "amount",
    "value" => "166",
    "pk" => 1,
    "id" => "1"
  }
}

Any ideas as to how to send the correct parameter so that the update action can work properly?

EDIT1: adding controller

# PATCH/PUT /crossingcosts/1
# PATCH/PUT /crossingcosts/1.json
def update

  respond_to do |format|
    if @crossingcost.update(crossingcost_params)
      format.html { redirect_to @crossingcost, notice: 'Crossingcost was successfully updated.' }
      format.json { render :show, status: :ok, location: @crossingcost }
    else
      format.html { render :edit }
      format.json { render json: @crossingcost.errors, status: :unprocessable_entity }
    end
  end
end



private
# Use callbacks to share common setup or constraints between actions.
def set_crossingcost
  @crossingcost = Crossingcost.find(params[:id])
end

def set_ticket
  @ticket = Ticket.find(params[:ticket_id])
end

# Never trust parameters from the scary internet, only allow the white list through.
def crossingcost_params
  params.require(:crossingcost).permit(:ticket_id, :usermetum_id, :amount,:firm_id)
end

def crossingcost_params_nested
  params.require(:mynested_crossingcost).permit(:ticket_id, :usermetum_id, :amount,:firm_id)
end

Answer 1

So first of all, I would recommend you to use Rails HTML Helpers instead of wrapping ERB into your HTML tag. It looks a bit messy:

<%= link_to '#', class: 'editable bolbol editable-disabled', data: { pk: '1', type: 'text', url: crossingcost_path(crossingpost.id), title: 'Enter Amount' }, id: 'amount' do %>
  <%= crossingcost.amount %>
<% end %>

instead of

<a href="#" class="editable bolbol editable-disabled" data-pk="1" id="amount" data-type="text" data-url="<%=crossingcost_path(crossingcost.id)%>" data-title="Enter Amount">
  <%= crossingcost.amount %>
</a>

To your other problem:

If I understand you right I think the best way to solve this problem would be to permit the params directly instead of trying to nest them.

So for example:

def crossingcost_params
  params.permit(:name, :value, :pk, :id)
end

In this way, you can permit params which aren't nested.

So like in your example:

{
  "name" => "amount",
  "value" => "166",
  "pk" => 1,
  "id" => "1"
}

I think it should also be possible to nest this parameters in the X-editable. Take a look into the Docs if you want to solve the problem in this way.

Hope this helps!

Happy coding :)