Using rails and ajax to dynamically render content.

Question

I am really in a bind on how to get this last step of my app done.

I want to dynamically replace the main content without needing to refresh the page.

The application.html.erb looks like this:

<div id="wrapper">
        <!-- ><div id="headcontainer">
            <header>
            </header>
        </div> -->
        <div id="maincontentcontainer">
            <div id="maincontent">
                <div class="section group">
                    <div class="col span_1_of_7">
                        <%= render :partial => "shared/menu" %>
                    </div>
                    <div id="replace">
                        <%= yield %>
                    </div>
                </div>
            </div>
        </div>

I have my menu partial which when clicked I want to dynamically replace the content of the #replace div

<ul class='kwicks kwicks-vertical'>
    <li id='panel-1'><%= link_to_unless_current image_tag('keyIssues.png'), :remote => true %></li>
    <li id='panel-2'><%= link_to_unless_current image_tag('pollVsLeader.png'), :remote => true  %></li>
    <li id='panel-3'><%= link_to_unless_current image_tag('keyBubble.png'), :remote => true  %></li>
    <li id='panel-4'><%= link_to_unless_current image_tag('dataSource.png'),  :remote => true  %></li>
    <li id='panel-5'><%= link_to_unless_current image_tag('group14.png'), :remote => true  %></li>
</ul>

I had some Jquery that I was using to remove the div and replace it.. but it is replacing the div with the fill contents of the page.. a page within a page here is some of the code:

$(function(){
  $('#panel-1').click(function(){
    $("#remove").remove();
    $.get('../key_issues/index.html', function(html){
      $('.col.span_6_of_7').remove();
      $('.section.group').append(html);  
    });
  });
});

I have tried the ajax-rails gem but i cant get that to work either.. can someone offer some advice please?

Debadatt · Accepted Answer · 2013-10-25 10:43:24Z

4

In simple way

<li id='panel-1'><%= link_to image_tag('keyIssues.png'), some_path_to_url_controller , :remote => true %></li>

Controller code

def some_method
 //your code
 respond_to do |format|
  format.js
 end
end

some_method.js.erb

$("#replace_div").html("<%= j render partial: 'your_partial' %>");

For more info railscast

edited Oct 25, 2013 at 10:43

answered Oct 25, 2013 at 10:30

Debadatt

6,0134 gold badges30 silver badges40 bronze badges

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

7 Comments

Nate Uni Over a year ago

Thanks for the reply.. Can you explain the controller code please..?

Debadatt Over a year ago

making your link to remote true, it will search for the response in js format. You do what ever you want to display in the replace div.

Debadatt Over a year ago

Specifically, link will submit an Ajax request to call a remote function in controller, which subsequently queries some data and returns a JS object to the page. replace the content/ partial with the ajax.

Nate Uni Over a year ago

Sorry if this seems like a dumb question,.. where is some_method called from (i cant see it anywhere) ? Does that go in application_controller.js?

Debadatt Over a year ago

the href in your link_to image_tag, is 'some_path_to_url_controller' where you basically put your path to app/controller method, adjust this with your own routes and methods. then click the link it definitely reach the controller/method.

|

Collectives™ on Stack Overflow

Using rails and ajax to dynamically render content.

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related