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
Related
using rails 3.1, jquery v1.6.4, jquery-ujs
im trying to reload a partial but it doesnt seem to be working as desired:
<div id="album"> <%= render 'album_index' %></div>
<%=link_to 'Show All Albums', albums_path(:filter_by => 'all'), :remote => true%><br>
<%=link_to 'Show Old Albums', albums_path(:filter_by => 'old'), :remote => true%><br>
index.js.erb
$("#album").html('<%= escape_javascript(render 'album_index') %>');
when a user first loads 'index', <%= render 'album_index' %> will render properly with return ALL rows in my Album model be default. when a user clicks on the 'Show Old Albums' link, the jquery action will load 'album_index' with will run a specific query in my controller based on the param[:filter_by] == "old" and return the proper result that is passed back into the view.
now the problem is when i click on the link that loads the "old" filter, it doesnt reload the existing render but double renders it. So my view includes the render 'album_index' with the results from param[:filter_by] == "all" and below that 'album_index's renders again but with results from param[:filter_by] == "old".
i would for it not not double render but reload the existing partial with new results.
any suggestions?
You are using single quotes for the internal and external string in the second part of this:
$("#album").html('<%= escape_javascript(render 'album_index') %>');
This is causing the html to not be a proper string, which may be causing your issues. Use double quotes for the outter string as follows
$("#album").html("<%= escape_javascript(render 'album_index') %>");
I am using Ruby on Rails 3 with Prototype/Scriptaculous and I am trying to update a 'div' content after that ActiveRecord values are changed, without reload the page.
In the "edit.html.erb" I have:
...
<div id="test_id">
<%= #account.name.to_s %>
</div>
<%= link_to_function( "Make test" ) do |page|
page.replace_html :test_id, #account.name.to_s
end %>
...
Before clicking on "Make test" I update the '#account.name' value, even via AJAX. Then, clicking on "Make test", the template doesn't changes.
These are steps:
I show the page
I update '#account.name' via AJAX
I click on "Make test"
'div' with 'id="test_id"' doesn't change!
What am I doing wrong?
P.S.: I think that #account is not reloaded in the page, also if his values are changed in the database. If so, what should I do?
I have seen the Railscasts "AJAX with RJS" and I followed an example in that (it is like the my), but it doesn't work for me.
If you have rendered edit.html.erb when the value of #account.name is "George", the HTML will remain the same (with the value "George") until you refresh it. Your call to link_to_function is, on page load, rendering an html link that calls javascript that replaces the inner html of the "test_id" div with 'George'. Unless you replace that HTML, it will always replace the inner html of that div with 'George'.
It's hard to recommend a solution without knowing exactly what you'd like to do...
updated to have more detail:
If you are making an AJAX call that changes the value of the account name on the server to "Fred", and want that change to appear on the page, you should refresh the parts of the page that use that value in that same AJAX call (that same controller action).
Your link_to_function generates HTML like this (if #account.name was 'George' when the page was rendered):
<a onclick="try { Element.update("test_id", "George"); ... >Make test</a>
It is not an ajax call, it is just a link that executes javascript. If you want to make it an ajax call that finds the latest value of the account name and refreshes the test_id div, do something like this:
<%# you need prototype included, but it should probably be in application.rhtml %>
<%= javascript_include_tag "prototype.js" %>
<div id="test_id">
<%= #account.name.to_s %>
</div>
<%= link_to_remote "Make test", :url => { :controller => "account", :action => "change_name" } %>
The 'Make test' link will now perform an AJAX call to the 'change_name' method in the 'account' controller. This method would look something like this:
def change_name
# here you would load the account from the db; I'm cheating
#account = Account.new(:name => "Fred")
render :update do |page|
page.replace_html :test_id, :text => #account.name.to_s
end
end
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.
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.
I am running into a strange problem.
I simply want to display a loading icon on the page when pressing a button.
If my call to form_remote_for contains Ajax options then the RJS script does not work.
This works ("loading" is hidden by the controller and RJS):
View:
<%=form_remote_for(:job, #job, {:url => {:action=>:create}}) do |f| %>
[...]
<div id="loading">Loading...</div>
controller:
def create
render :action => "create.js.rjs"
end
RJS:
page.hide 'loading'
This does not work (just adding :loading=> and loading is shown by the view but not hidden back by the controller as it was before):
<%=form_remote_for(:job, #job, {:url => {:action=>:create}}, {:loading=>"$('loading').show()"}) do |f| %>
[...]
<div id="loading" style="display:none;">Loading...</div>
So if my call to form_remote_for contains Ajax options then the RJS script does not work. Why?
Change your form to:
<% form_remote_for (:job, #job, :url => {:action => :create}, :loading =>"$('loading').show()") do |f| %>
# ...
<% end %>
Make sure create is:
# POST /jobs
# POST /jobs.xml
def create
render :action => "create.js.rjs"
end
And make sure your create.js.rjs is:
page.hide 'loading'
This scenario works for me. As you had it, it was returning the erb in the template because it was posting to "new" -- based on a quick scaffold implementation I did. Now I might still be missing something because as I said before the massive edit, I'm new, but this should get you going.
EDIT: Removed "is this your code?" post.
While not directly answering your question of "why" it isn't working, have you looked at using the :loaded parameter to hide the loading DIV rather than rely on the rjs file?
Assuming your using prototype you should use the Ajax.Responders to do the show/hide:
Ajax.Responders.register({
onCreate: function() {
Ajax.activeRequestCount++;
if($('loading') && Ajax.activeRequestCount>0) {
Effect.Appear('loading',{duration:0.4,queue:'end'});
};
},
onComplete: function() {
Ajax.activeRequestCount--;
if($('loading') && Ajax.activeRequestCount==0) {
Effect.Fade('loading',{duration:0.4,queue:'end'});
};
}
});
You can stick it in public/javascripts/application.js
Unobtrusive javascript - will work on any page with a hidden loading div and ajax events.