Update only div panel on button click in Ruby on Rails -


is there functionality in ror create dynamic panels within ror website? trying accomplish in main page able update panel click of navigation button instead of loading entirely new page.

located in pages view

here want load new content in dynamicloadingpanel button click in navbutton span in home.html.erb:

<span id="navbutton" class="button">content2</span> <div id="dynamicloadingpanel"></div> 

the page want show in dynamicloadingpanel _categoryone.html.erb file located under pages view folder.

thanks help!

like other answers said, want use ajax. rails has nice ajax integration jquery now, via jquery_ujs.js file , gem. should start installing gem , running generators readme mentions: https://github.com/rails/jquery-ujs

there's 4-5 steps take: in view, add remote link along div receive returned content. create .js.erb file named same controller action, partial .js.erb file renders view, , controller action handle remote call. may have add route matches controller#action new action.

then set page div loading content partial. partial reloaded during ajax call. assumes controller named sort , action album_select.

<div id="panels">   <div id="dynamicloadingpanel">     <%=render :partial=>'album_select'%>   </div>   <%=link_to 'link text', :url=>'/sort/album_select/params', :remote=>'true', :id=>'navbutton'%> </div> 

or use jquery , onclick event link:

  $("#navbutton").bind('click',function(){     //post controller/action/params     $.post("/sort/album_select?album=100");   }); 

in controller

 def album_select       @variables_for_your_view        respond_to |format|         format.js        end  # or use new respond_with(@variables), , make sure declare respond_to in controller after class definition  end 

in album_select.js.erb file

$("#dynamicloadingpanel").html("<%=escape_javascript(render :partial=>"album_select")%>"); 

maybe throw alert('works!'); in here make sure linking up...i find hard debug jquery in .js.erb files. double check quotes, javascript escaping, , other easy miss javascript errors.

in partial

<p>info returned new instance variables , fanciness</p> 

helps have javascript debugger on hand, , / or tail -f log file.


Comments

Popular posts from this blog

linux - Using a Cron Job to check if my mod_wsgi / apache server is running and restart -

actionscript 3 - TweenLite does not work with object -

jQuery Ajax Render Fragments OR Whole Page -