Calling function in javascripts _path helper

Question

I have this "Add Vehicle" button which renders and adds partial to view, and I will have it many times, so anonymous function won't work, so is there any way I can define function and parameters in link_to helper?

part from form where I'm calling js, and in which i need to define functions name and parameters

...
<div id="add_vehicle_div_button2">
   <%= link_to 'Add vehicle', attach_vehicle_path, remote: true, id: "add_vehicle_button2" %>
</div>
<div id="attached_vehicle2" style="display:none;"></div>
...

../views/diys/attach_vehicle.js.erb to which it leads

function addAttachVehicleFields(newAttachVehicleDiv, addVehicleDivButton, attachVehiclePartial) {
    $(newAttachVehicleDiv).html("<%= escape_javascript (render #{attachVehiclePartial}) %>");
    $(newAttachVehicleDiv).slideDown(350);
    $(addVehicleDivButton).css('display', 'none');
}

And from there it renders defined partial.

The reason why I have this function in its own file in views folder is that i need it to have its own controller action.

Damian Borowski · Accepted Answer · 2016-02-25 20:00:07Z

1

I am not exactly sure what you are trying to achieve here. If I am not mistaken you are trying to add element to the page from the partial after clicking a button.

If you use Turbolinks then you could try its partial replacement Turbolinks-Classic Github

However, when I worked on one of my projects and needed said functionality - it just did not work no matter what I did. So I decided to implement my own using render js:. Based on that here is what I would do:

Attach your js function to globally accessible variable, lets say:

app/assets/stylesheets/javascripts/vehicles.coffee

@Vehicles =
  addAttachVehicleFields: (newAttachVehicleDiv, addVehicleDivButton, attachVehiclePartialHtml) ->
    $(newAttachVehicleDiv).append(attachVehiclePartialHtml);
    $(newAttachVehicleDiv).slideDown(350);
    $(addVehicleDivButton).css('display', 'none');

And then in your specific action for handling this request (attach_vehicle_path):

vehicle_partial_html = render_to_string(partial: params[:vehicle_partial]).squish

render(js: "Vehicles.addAttachVehicleFields('#{params[:vehicle_div]}', '#{params[:vehicle_div_button]}', '#{vehicle_partial_html}')")

Then you could modify your link_to helper with the following:

<%= link_to 'Add vehicle', attach_vehicle_path(vehicle_div: [your_div_selector_here], vehicle_div_button: [your_div_button_selector_here]), remote: true, id: "add_vehicle_button2" %>

I am showing the idea here you might want to DRY it and implement it your way. Me and my colleague are working on the gem to provide this functionality.

I hope this is helpful. Let me know if you'd have questions.

answered Feb 25, 2016 at 20:00

Damian Borowski

1711 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

T.Kiril Over a year ago

Thanks for your effort! I was thinking that if i will not come up with better idea i will make onclick function in assets/javascripts/related.coffee that will call via ajax attach_vehicle.js.erb which will then load partial. Will now test and decide which way to pick :)

Damian Borowski Over a year ago

Sure thing. Let me know how you got on.

T.Kiril Over a year ago

Yea, did it my way, if you are interested check my answer to this question :)

T.Kiril · Accepted Answer · 2016-02-25 23:18:12Z

Don't think that this is the best way of doing this, but I didn't come up with any better idea so...

Created new function in

../app/assets/javascripts/diys.coffee

# Add fields for additional vehiclesS
addVehicleFields = (addVehicleButton, newAttachVehicleDiv, attachVehiclePartial, addVehicleDivButton) ->
    $(document).on 'click', addVehicleButton, (evt) ->
        $.ajax 'attach_vehicle',
            type: 'GET'
            dataType: 'script'
            data: {
                addVehicleButtonDiv: addVehicleDivButton,
                newVehicleDiv: newAttachVehicleDiv,
                newVehiclePartial: attachVehiclePartial
            }
            error: (jqXHR, textStatus, errorThrown) ->
                console.log("AJAX Error: #{textStatus}")
            success: (data, textStatus, jqXHR) ->
                console.log("Addin new vehicle fields OK!")

addVehicleFields '#add_vehicle_button2', '#attached_vehicle2', 'diys/attach_vehicles/attach_vehicle2_form', '#add_vehicle_div_button2'
addVehicleFields '#add_vehicle_button3', '#attached_vehicle3', 'diys/attach_vehicles/attach_vehicle3_form', '#add_vehicle_div_button3'
...

which leads to

../app/views/diys/attach_vehicle.js.erb

$("<%= @newAttachVehicleDiv %>").html("<%= escape_javascript (render  @attachVehiclePartial) %>");
$("<%= @newAttachVehicleDiv %>").slideDown(350);
$("<%= @addVehicleDivButton %>").css('display', 'none');

And had to define those variables in

../diys_controller.rb attach_vehicle action

def attach_vehicle
    ...
    @addVehicleDivButton = params[:addVehicleButtonDiv]
    @newAttachVehicleDiv = params[:newVehicleDiv]
    @attachVehiclePartial = params[:newVehiclePartial]
    respond_to do |format|
      format.js
    end
end

And changed buttons path to '#'

<div id="add_vehicle_div_button2">
    <%= link_to 'Add vehicle', '#', remote: true, id: "add_vehicle_button2" %>
</div>

Collectives™ on Stack Overflow

Calling function in javascripts _path helper

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related