Topic: Load partial with jquery and ajax

How do I reload a partial, in a div, after an ajax call with jquery?

With RJS is was really easy: page.replace_html 'mydiv', :partial => 'thepartial'

What's the equivalent in jquery?

Last edited by palb (2011-07-04 09:35:15)

Re: Load partial with jquery and ajax

Sitting with this problem for several days now. How can it be so hard to explain such a simple thing (if it is simple, which I presume)? I must have missed it, but I've really searched. Since version 3 rails has become more complex, harder to understand, and to find solutions to common problems.

Re: Load partial with jquery and ajax

I'm no RJS expert but do you mean something like this:

$.get('"<%= raw my_controller_action_path -%>"', { var1: "url_param_1", var2: "url_param_2" },
  function(data){
    $("#yourdiv").html(data);
  });

That is: you render the partial in your ajax call in the controller; which then gets passed back to jQuery as "data"; which is then replaced into the div of your choice.

Sorry I sticked my nose in it; but if others are inactive.

PS: Yes, IMHO Rails got a lot more complex, hope we don't end up with a framework nearing those in java or .net (in complexity, I mean).  I'd rather climb alpine-style (i.e. light with gears).

Re: Load partial with jquery and ajax

boomerang wrote:

I'm no RJS expert but do you mean something like this:

$.get('"<%= raw my_controller_action_path -%>"', { var1: "url_param_1", var2: "url_param_2" },
  function(data){
    $("#yourdiv").html(data);
  });

That is: you render the partial in your ajax call in the controller; which then gets passed back to jQuery as "data"; which is then replaced into the div of your choice.

Sorry I sticked my nose in it; but if others are inactive.

PS: Yes, IMHO Rails got a lot more complex, hope we don't end up with a framework nearing those in java or .net (in complexity, I mean).  I'd rather climb alpine-style (i.e. light with gears).

I'll try this. Thanks.

PS: Well put. Good to know that I'm not the only one who thinks like that.

Re: Load partial with jquery and ajax

So did this work?

Re: Load partial with jquery and ajax

win.joshi wrote:

So did this work?

No. But I didn't quite understand how to implement it. I can make an ajax call. The problem I have is how to use jq .html and load a partial, or update a div.

Re: Load partial with jquery and ajax

OK, now I only have a couple minutes but in short:

  1. You make the ajax call

  2. In your controller you respond to the js format by rendering a view (or a partial if you like), which produces HTML output

  3. This gets passed back to the ajax caller javascript, in which you have a 'success' clause (whose syntax depends on if you use $.get or $.ajax).  This is a function anyways (see jQuery docs) that receives the generated HTML as a parameter

  4. Use some jQuery method (such as html(), replaceWith(), replaceAll()) in the success function to replace the content of the div

Let me know if you're still at a loss.

Re: Load partial with jquery and ajax

boomerang wrote:

OK, now I only have a couple minutes but in short:

  1. You make the ajax call

  2. In your controller you respond to the js format by rendering a view (or a partial if you like), which produces HTML output

  3. This gets passed back to the ajax caller javascript, in which you have a 'success' clause (whose syntax depends on if you use $.get or $.ajax).  This is a function anyways (see jQuery docs) that receives the generated HTML as a parameter

  4. Use some jQuery method (such as html(), replaceWith(), replaceAll()) in the success function to replace the content of the div

Let me know if you're still at a loss.

Thanks for taking your time.

I get the action working and beforeSend. But it doesn't reach success. Hmm. It did when I add format.html { redirect_to...(to the same page where I have the link triggering the ajax call) }

Re: Load partial with jquery and ajax

Progress. Adding format.html { render :layout => false } helped.

Re: Load partial with jquery and ajax

If I understand this properly, you want to initiate an AJAX request and then update part of the page with a partial?  If so, this is what you would do:

# html page
# (remote: true marks this link as an AJAX link)
<%= link_to "AJAX request", url_path_you_want, remote: true %>
<div id="content"></div>

# controller
def action_name_to_match_your_path
  @name = "Bob Smith"
end

# partial: _partial_name.html.erb
<%= @name %>

# view: action_name_to_match_your_path.js.erb (important to have .js.erb portion)
# (assumes you're using jquery)
$("#content").html("<%= escape_javascript(render(:partial => 'partial_name', locals: { name: @name })) %>");

This code will replace the innerHTML of the #content div with the text "Bob Smith", which is the contents of the partial file.  I wrote this off the top of my head, so if it complains about unknown variables in the partial try "name" instead of "@name".  I can never remember whether it's local or class variables in there.

This has the server generating javascript which is then sent back to the client browser and executed.  I use it quite often and it works very well.

Another approach is having the server just send back a message (via JSON or something) and then having the browser execute select code based upon success or failure.  I think that's much more complicated, IMO, and the above approach is much cleaner.

I can't take credit for this concept; Ryan Bates (of Railscasts.com) is where I first saw this employed.

Hope this helps!

Re: Load partial with jquery and ajax

daniel_l wrote:

If I understand this properly, you want to initiate an AJAX request and then update part of the page with a partial?  If so, this is what you would do:

Hope this helps!

Thanks.

Re: Load partial with jquery and ajax

daniel_l wrote:

If I understand this properly, you want to initiate an AJAX request and then update part of the page with a partial?  If so, this is what you would do:

Didn't work. Are you sure the action should look like that?

Re: Load partial with jquery and ajax

This was so easy with rjs. What happened with this in jquery?

Re: Load partial with jquery and ajax

Solved it. I missed rails.js for jquery. I probably missed it or, and more likely, a miss in documentation.