rails load partial from jquery load request

Question

I am sending a remote form via submit.rails when a user clicks a checkbox in my app which works great. Now there is a value inside a div that would need to get refreshed immediately after the form was sent. After researching a bit how to realise this, I came to this solution inside my jquery function:

$( "input#my-checkbox" ).click(function() {
 $(this.form).trigger('submit.rails');
 $("#count-items").load();
});

this doesn't work because the load() function requires something to load e.g. a specific view. I cannot load a view into my div so I created a partial but that would not render correctly. There must be a much more simple way to refresh what is inside my div.

<div id="count-items"><%= render "pages/count_items" %></div>

The above also does not work as explained. The partial would not render here on load().

How could I simply reload the div content (foo) which would look like this:

<div id="count-items"><%= foo %></div>

after I hit my checkbox (click event) from the above code?

in callback u can write in update.js.erb , `$('#count-items').html("<%= foo %>"); — Sahil Grover
– Sahil Grover, Commented Jul 24, 2014 at 12:13
that works - but somehow foo is not up to date when its called. looks like this needs some kind of delay though. — DonMB
– DonMB, Commented Jul 24, 2014 at 12:39

Geoffgom · Accepted Answer · 2014-07-24 13:16:06Z

1

Here is how I handle this kind of interaction. It is probably not the only solution, but it has been working well for me. In your view, when you want something to be rendered as a result of an ajax request, you also need to create a request to the server, the server returns a response, and you render that response in the desired html node.

In the view (something like this, I've updated it from coffeescript), let's say you are updating the checkbox counter (url -> /checkboxes/update_counter)

$("input#my-checkbox").click(function() {
    $.ajax(
        type: "POST",
        data: {key: 'value'}, //$(this.form).trigger('submit.rails'); should be handled here
       url: "/checkboxes/update_counter",
       dataType: "script",
       success: function(data){
           $("#count-items").update(data);
       }
    )
}

I don't really think the $("#count-items").trigger('submit.rails') is necessary, you can use the post to transmit your data.

In the corresponding controller, if necessary, you should define a format.js in the respond_to block, if no respond_to is defined, rails should automatically try to retrieve a update_counter.js.erb

So in your controller (do not forget to create the corresponding route if necessary):

...
def update_counter
    @new_count = do_update_counter
end
...

in your update_counter.js.erb view:

$("#count-items").html("<%= escape_javascript(render "pages/count_items", locals: {new_count: @new_count}) %>");

I hope this help. Let me know if you need more explanation.

Regards

edited Jul 24, 2014 at 13:16

answered Jul 24, 2014 at 12:19

Geoffgom

566 bronze badges

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

1 Comment

DonMB Over a year ago

That has worked although I stayed with my submit.rails solution. I simply created a related .js filed and put format.js in my create logic in the respective controller. Thanks for bringing me on the right path!

Collectives™ on Stack Overflow

rails load partial from jquery load request

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related