How do i update a portion of a page using Ajax in rails 2.3.8?
i am trying to make a calendar with buttons to go to next and previous months. At the click of the buttons i want the calendar to change without reloading the whole page.
On of my buttons to scroll through months look like this:
<%= link_to_remote "<",:update=>'calendar',:url=>{:action=>'ajax_calendar',:month => (#date.beginning_of_month-1).strftime("%Y-%m")} %>
This is my main page where i have rendered the partial.
index.html.erb
<div id="calendar">
<%= render :partial=>'calendar' %>
</div>
when i tried to debug with firebug the ajax call is getting executed correctly and i am also getting the correct response from the server but the id 'calender' is not getting updated.
Can somebody please point out what i am doing wrong?
Thanks in advance.
Edit: Added controller
def ajax_calendar
#events = Event.all
#date = params[:month] ? Date.parse(params[:month].gsub('-', '/')) : Date.today
render :partial => 'calender'
end
I think rails wants the url parameter before update. Try switiching the order like this:
<%= link_to_remote "<", :url=>{:action=>'ajax_calendar',:month => (#date.beginning_of_month-1).strftime("%Y-%m")}, :update=>'calendar' %>
However, this probably isn't it. Your link_to_remote looks good, it's probably something in the controller. Could you show us your controller code for the action?
I was getting this error because of using both prototype and jquery together. removing jQuery solved this.
Related
I would like to use lambda as a parameter for link_to for the code below: edit.html.erb
<h2>Edit customer info</h2>
<%= render 'form' %>
<%= link_to(#return_to) do %>
Back
step_back()
<% end %>
Here is the def for step_back:
#return link for previous page in page step
def step_back
session[:page_step] -= 1
end
The problem with the code above is that the step_back() is executed as soon as the edit.html.erb is loaded. Actually the step_back should only be executed when the user clicks the Back link. I figure that only lambda can accomplish this.
Any thoughts?
Your options are limited since you're interacting with the session.
You're getting that #return_to from somewhere; it'd probably be easiest to call an action that gets the same data and redirects to it, and does the same session manipulation.
See about writing your step_back() function in javascript and attaching it to an onClick html attribute on an tag instead of using the link_to rails helper
Then also .preventDefault() the event with javascript if you don't want the link to go anywhere, or to '#'
This will allow the code to execute on the click event in the browser and not during asset compilation before the page is served.
I am trying to setup a navigation bar on my home page that loads a partial into a div element when the user clicks on the links. I have followed the steps in this post and modified them as I thought I needed:
Rails 3 - link_to to call partial using jquery ajax
My code:
views/pages/home.html.erb:
<%= link_to "Files", :action => 'load_upload_partial', :remote => true %>
.
.
.
<div id="main_frame"></div>
pages_controller:
def load_upload_partial
respond_to do | format |
format.js {render :layout => false}
end
end
/views/uploads/load_upload_partial.js.erb:
$("#main_frame").html( "<%= escape_javascript( render( :partial => "/upload/upload_form" ) %>" );
The partial in this example is just a form. When I click on the link I get a blank page with this is the address bar:
http://localhost:3000/load_upload_partial?remote=true
This makes me think that link is not triggering an ajax GET request (if that's the correct terminology). If that is the case is there anything I need to be adding to my application.js file? I followed the railscast #136 on rails and jquery but couldn't figure out which bits of the application.js code applied to my case.
Any thoughts are much appreciated. Thanks. Tom
I now tend to avoid using RJS like you're intending to. I prefer creating js templates with tools like handlebars.
I only use ajax to get raw data and then recreate the partial client side. It's much better for server load and data transfer.
I think you have to change your link_to to:
<%= link_to "Files", {:action => 'load_upload_partial' }, remote => true %>
The problem is related to the method signature of link_to.
ran into this same problem - the hint was in the malformed html produced - take a look at the value of the href attribute of the tag produced by your code. I bet it looks funky. Here's the correct code:
<%= link_to "Files", your_path, action: 'load_upload_partial', remote: true %>
have you tried using .load() instead of .html()?
Also, try using this line instead:
$("#main_frame").html( "<%= escape_javascript( render( :partial => '/upload/upload_form' ) %>" );
I'm working on a small picture application. That I'm trying to do is build a counter to track how many times each image is clicked.
Right now I have in my view:
<% #galleries.each do |g| %>
<% for image in g.images %>
<div id="picture">
<%= render 'top_nav'%>
<%= link_to g.source, :target => true do %>
<%= image_tag image.file_url(:preview) %>
<% g.vote %>
<% end %>
<%= will_paginate(#galleries, :next_label => "Forward", :previous_label => "Previous") %>
</div>
Obviously this doesn't work, as the g.vote executes every time it's rendered, not clicked. Here's the vote method in my model:
def vote
self.increment!(:score)
end
I'm looking for a solution to run the vote method only when the image above is clicked. The links are to external resources only, not to a show action. Should I be building a controller action that's accepts a post, executes the vote, then redirects to the source?
Anyway, looking for some ideas, thanks.
I've done something similar, but keeping a count of how many times a Download link was clicked. This was awhile ago and I didn't know about Ajax at the time, but now I would recommend using jQuery (a great library in my opinion, but you could use something else) and do an Ajax call when the image is clicked that would execute some controller action which would increment that vote.
The other way, which is what I did in my scenario, and is what you talked about there, is creating a custom action in the controller that accepts a post. But I have to ask as well, does clicking on the image do something else in the behaviour of your website? For example, if when you click the picture, another random image is supposed to come up, that means you'll already have an action to load a new image and it be easy to stick the vote up in there before showing a new image. Otherwise you'd have to create the new controller action. If that's the case, the Ajax would be more efficient as the user wouldn't see a momentary flash as the page was refreshed (especially bad if the refresh time is long).
I am attempting to reload a partial on a page periodically but it does not seem to be working. The partial loads correctly when I first load the page but it will not update when I introduce new info to it without reloadig the page. The view looks like:
<div id="menuarea"style="height: 399px; width: 181px">
<%=periodically_call_remote(:url => {:action => :findnew}, :frequency => '20', :update => 'menuarea') %>
<p> Please select a color </p>
<%#partil renders the color table %>
<%= render :partial => "colortable" %>
</div>
and the controller looks like:
def findnew
#bunny= Xparsing::Xmlparse.new
#fuzzybunny= #bunny.hex1
#pinkbunny=#bunny.pantone1
#blackbunny=#bunny.description1
render(:partial => 'colortable')
end
All I am attemptinging to do is reload the partial colortable without reloading the page. I am seeing the render color table in the comand line every 20 seconds but the table is not reloading on the page What do I need to fix?
Are you sure you are not overwriting the Javascript containing periodically_call_remote when you update the <div>?
Don't you want to put that script outside the updating <div>? Or put it into the partial and remove it from where you have it now.
turns out it was an issue with jquery and prototype. I removed jquery and it worked perfectly. Still trying to figure out why
I've got facebox working using the following tags in my rails app
<%= link_to 'test' some_path, :rel => 'facebox' %>
Now that works perfect if the page is already loaded.
However, I have ajax updates on certain parts of the page which contain new links like the one shown above.
When you click the links from an ajax update facebox doesn't work follows on to the template.
I believe since the page doesn't refresh the source code is the same and :rel => 'facebox' doesn't work.
Does anyone have any advice on how I can get this to work without refreshing the page?
I've tried this in a method in a controller.
render :update do |page|
page << "
facebox.loading();
facebox.reveal('text', null);
new Effect.Appear(facebox.facebox, {duration: .3});
"
end
However, for some reason in chrome and IE the facebox appears for a brief second and then disappears.
Any advice? I've been banging my head off the wall all day.
Thank you
All you need to do, is ensure that you're making a javascript call to facebox somewhere in the view of your AJAX response: arguably the best location would be in the layout file. Just make sure that you include the following:
#app/views/layouts/ajax.html.erb
#...snip...
<% javascript_tag :defer => 'defer' do -%>
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox();
})
<% end -%>
or with prototype (untested):
#app/views/layouts/ajax.html.erb
#...snip...
<% javascript_tag :defer => 'defer' do -%>
document.observe("dom:loaded", function() {
$$('a[rel*="facebox"]').facebox();
});
<% end -%>
This will ensure that any new links that appear on the page, as part your AJAX updates, will be handled by facebox.