Kleber Shimabuku
2011-Aug-09 09:25 UTC
How can I update a div value using Ajax but calling a function on the OnChange?
Hey guys,
I''m trying to update a div with a result coming from a request to the
database.
So I have created this method on the controller
def retrieve_part_price
@price = Part.find(params[:id])
respond_to do |format|
format.html { redirect_to(items_path)}
format.js { render :nothing => true }
end
end
and added it to the routes properly, but I don''t know how should I
call it from my view side to bring the value using Ajax.
any advice? blog post?
Thank you.
--
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.
7stud --
2011-Aug-09 17:29 UTC
Re: How can I update a div value using Ajax but calling a function on the OnChange?
Kleber Shimabuku wrote in post #1015666:> any advice? blog post? >This works for me: <h1>Users#new</h1> <p>Find me in app/views/users/new.html.erb</p> <%= link_to "Click me", {:controller => ''users'', :action => ''get_info''}, :remote => true %> <div id="update_me">Hello</div> <div>world</div> == class UsersController < ApplicationController def new @title = "Sign up" end def get_info @data = ''world'' end end === <!DOCTYPE html> <html> <head> <title><%= @title %></title> <%= csrf_meta_tag %> <%= javascript_include_tag :defaults %> </head> <body> <%= yield %> </body> </html> == TestApp::Application.routes.draw do get "users/get_info" ===app/views/users/get_info.js.erb $("update_me").update("<%= @data %>"); -- Posted via http://www.ruby-forum.com/. -- You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en.
7stud --
2011-Aug-09 19:04 UTC
Re: How can I update a div value using Ajax but calling a function on the OnChange?
You can make your js more general by doing this:
<h1>Users#new</h1>
<p>Find me in app/views/users/new.html.erb</p>
<%= link_to "Click me",
{:controller => ''users'',
:action => ''get_info'',
:my_target => ''update_me''},
:remote => true %>
<div id="update_me">Hello</div>
<div>world</div>
==
class UsersController < ApplicationController
def new
@title = "Sign up"
end
def get_info
@target = params[:my_target]
@data = ''world''
end
end
==app/views/users/get_info.js.erb
$("<%= @target %>").update("<%= @data %>");
--
Posted via http://www.ruby-forum.com/.
--
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.
Kleber Shimabuku
2011-Aug-09 21:54 UTC
Re: How can I update a div value using Ajax but calling a function on the OnChange?
Thank you guys, but as I said in the topic, I looking how to perform this on event OnChange of an <select> On Aug 10, 4:04 am, 7stud -- <li...-fsXkhYbjdPsEEoCn2XhGlw@public.gmane.org> wrote:> You can make your js more general by doing this: > > <h1>Users#new</h1> > <p>Find me in app/views/users/new.html.erb</p> > > <%= link_to "Click me", > {:controller => ''users'', > :action => ''get_info'', > :my_target => ''update_me''}, > > :remote => true %> > > <div id="update_me">Hello</div> > <div>world</div> > > ==> > class UsersController < ApplicationController > def new > @title = "Sign up" > end > > def get_info > @target = params[:my_target] > @data = ''world'' > end > > end > > ==app/views/users/get_info.js.erb > > $("<%= @target %>").update("<%= @data %>"); > > -- > Posted viahttp://www.ruby-forum.com/.-- You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk+unsubscribe@googlegroups.com. For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en.
Kleber Shimabuku
2011-Aug-09 22:33 UTC
Re: How can I update a div value using Ajax but calling a function on the OnChange?
Just updating:
I have this on a partial:
<p class="fields">
<%= f.collection_select(:part_id, @parts, :id, :title, { :prompt =>
true } , { :onchange => "load_part_price_select(this.id,
this.options[this.selectedIndex].value);" } ) %>
<span class=''part_price''> _ _ _ _ </span>
<%= f.hidden_field :_destroy %>
<%= link_to_remove_fields "remove", f %>
</p>
and the relative function on application.js file:
function load_part_price_select(id, value) {
alert(id);
alert(value);
$(''#'' + id ).live(''change'',function() {
$.ajax({
url: value + ''/retrieve_part_price/'',
success: function(responseData) {
alert(''test'');
}
});
});
};
For now, I have to figure out a question about routes
I''ve created the right method on my ItemsController:
def retrieve_part_price
@price = Part.find(params[:id])
end
and configured the routed as:
resources :items do
get ''retrieve_part_price'', :on => :member
end
but the development log shows me an error:
--
Started GET "/items/29/8/retrieve_part_price/" for 127.0.0.1 at
2011-08-10 07:22:57 +0900
ActionController::RoutingError (No route matches "/items/29/8/
retrieve_part_price"):
--
Probably the best way would be something like "/items/29/
retrieve_part_price/8"
But how to make the route act this way?
On Aug 10, 6:54 am, Kleber Shimabuku
<klebershimab...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> Thank you guys, but as I said in the topic, I looking how to perform
> this on event OnChange of an <select>
>
> On Aug 10, 4:04 am, 7stud --
<li...-fsXkhYbjdPsEEoCn2XhGlw@public.gmane.org> wrote:
>
>
>
>
>
>
>
> > You can make your js more general by doing this:
>
> > <h1>Users#new</h1>
> > <p>Find me in app/views/users/new.html.erb</p>
>
> > <%= link_to "Click me",
> > {:controller => ''users'',
> > :action => ''get_info'',
> > :my_target => ''update_me''},
>
> > :remote => true %>
>
> > <div id="update_me">Hello</div>
> > <div>world</div>
>
> > ==>
> > class UsersController < ApplicationController
> > def new
> > @title = "Sign up"
> > end
>
> > def get_info
> > @target = params[:my_target]
> > @data = ''world''
> > end
>
> > end
>
> > ==app/views/users/get_info.js.erb
>
> > $("<%= @target %>").update("<%= @data
%>");
>
> > --
> > Posted viahttp://www.ruby-forum.com/.
--
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.
7stud --
2011-Aug-10 05:34 UTC
Re: How can I update a div value using Ajax but calling a function on the OnChange?
<!DOCTYPE html>
<html>
<head>
<title><%= @title %></title>
<%= csrf_meta_tag %>
<%= javascript_include_tag :defaults %>
<script type="text/javascript">
function update_info() {
new Ajax.Updater( ''target_div'',
''/users/get_info'',
{
method: ''get'',
parameters: {select_choice:
$F("my_select")}
}
);
}
document.observe(''dom:loaded'', function() {
$("my_select").observe(''change'',
update_info)
});
</script>
</head>
<body>
<%= yield %>
</body>
</html>
==
<h1>Users#new</h1>
<p>Find me in app/views/users/new.html.erb</p>
<div id="target_div">Hello world</div>
<select id="my_select">
<option value="mars">mars</option>
<option value="venus">venus</option>
</select>
==
class UsersController < ApplicationController
def new
@title = "Sign up"
end
def get_info
@choice = params[:select_choice]
@reply = "Hello #{@choice}"
render :text => @reply
end
end
--
Posted via http://www.ruby-forum.com/.
--
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.
Kleber Shimabuku
2011-Aug-10 08:24 UTC
Re: How can I update a div value using Ajax but calling a function on the OnChange?
Hi everyone,
Thank you all for the help. I pasted the final code on the pastebin so
if someone else needs it someday it will be available for consulting.
http://pastebin.com/E7dpHRhs
and the form
<p class="fields">
<%= f.collection_select(:part_id, @parts, :id, :title, { :prompt =>
true } , { :onchange => "load_part_price_select(this.id,
this.options[this.selectedIndex].value);" } ) %>
<%= f.label(:part_id, "Price: ") %>
<span class="price"></span>
<%= f.hidden_field :_destroy %>
<%= link_to_remove_fields "remove", f %>
</p>
On Aug 10, 2:34 pm, 7stud --
<li...-fsXkhYbjdPsEEoCn2XhGlw@public.gmane.org>
wrote:> <!DOCTYPE html>
> <html>
> <head>
> <title><%= @title %></title>
> <%= csrf_meta_tag %>
> <%= javascript_include_tag :defaults %>
>
> <script type="text/javascript">
> function update_info() {
>
> new Ajax.Updater( ''target_div'',
> ''/users/get_info'',
> {
> method: ''get'',
> parameters: {select_choice:
$F("my_select")}
> }
> );
>
> }
>
> document.observe(''dom:loaded'', function() {
> $("my_select").observe(''change'',
update_info)
> });
> </script>
>
> </head>
> <body>
>
> <%= yield %>
>
> </body>
> </html>
>
> ==>
> <h1>Users#new</h1>
> <p>Find me in app/views/users/new.html.erb</p>
>
> <div id="target_div">Hello world</div>
>
> <select id="my_select">
> <option value="mars">mars</option>
> <option value="venus">venus</option>
> </select>
>
> ==>
> class UsersController < ApplicationController
> def new
> @title = "Sign up"
> end
>
> def get_info
> @choice = params[:select_choice]
> @reply = "Hello #{@choice}"
> render :text => @reply
> end
>
> end
>
> --
> Posted viahttp://www.ruby-forum.com/.
--
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.
7stud --
2011-Aug-10 16:05 UTC
Re: How can I update a div value using Ajax but calling a function on the OnChange?
Kleber Shimabuku wrote in post #1015905:> > and the form > > <p class="fields"> > <%= f.collection_select(:part_id, @parts, :id, :title, { :prompt => > true } , { :onchange => "load_part_price_select(this.id, > this.options[this.selectedIndex].value);" } ) %> > <%= f.label(:part_id, "Price: ") %> > <span class="price"></span> > <%= f.hidden_field :_destroy %> > <%= link_to_remove_fields "remove", f %> > </p> >js shouldn''t be in your html, i.e. this: { :onchange => "load_part_price_select(this.id,> this.options[this.selectedIndex].value);"should be done up in the <head> section of your html. In order to do that, you have to put your js inside a function that executes after the page has loaded. -- Posted via http://www.ruby-forum.com/. -- You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en.
Filippos
2011-Aug-10 16:25 UTC
Re: How can I update a div value using Ajax but calling a function on the OnChange?
now with rails 3.1 doesn''t all the java code go in a *.js.coffee file inside the app/assets/javascripts/ ? or do we write it on the corresponding view directly? On Aug 10, 7:05 pm, 7stud -- <li...-fsXkhYbjdPsEEoCn2XhGlw@public.gmane.org> wrote:> Kleber Shimabuku wrote in post #1015905: > > > > > and the form > > > <p class="fields"> > > <%= f.collection_select(:part_id, @parts, :id, :title, { :prompt => > > true } , { :onchange => "load_part_price_select(this.id, > > this.options[this.selectedIndex].value);" } ) %> > > <%= f.label(:part_id, "Price: ") %> > > <span class="price"></span> > > <%= f.hidden_field :_destroy %> > > <%= link_to_remove_fields "remove", f %> > > </p> > > js shouldn''t be in your html, i.e. this: > > { :onchange => "load_part_price_select(this.id, > > > this.options[this.selectedIndex].value);" > > should be done up in the <head> section of your html. In order to do > that, you have to put your js inside a function that executes after the > page has loaded. > > -- > Posted viahttp://www.ruby-forum.com/.-- You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk+unsubscribe@googlegroups.com. For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en.
Kleber Shimabuku
2011-Aug-10 21:47 UTC
Re: How can I update a div value using Ajax but calling a function on the OnChange?
@7stud, the "onchange" behavior make a function call, that''s right, and this function (load_part_price_select() ) belongs to a js file, in this case I did put it on the application.js file. this is actually working for me. @Filippos, I haven''t installed rails 3.1 yet, still on 3.0.9 for now, so I can''t tell you that, sorry. On Aug 11, 1:25 am, Filippos <filippos...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> now with rails 3.1 doesn''t all the java code go in a *.js.coffee file > inside the app/assets/javascripts/ ? > or do we write it on the corresponding view directly? > > On Aug 10, 7:05 pm, 7stud -- <li...-fsXkhYbjdPsEEoCn2XhGlw@public.gmane.org> wrote: > > > > > > > > > Kleber Shimabuku wrote in post #1015905: > > > > and the form > > > > <p class="fields"> > > > <%= f.collection_select(:part_id, @parts, :id, :title, { :prompt => > > > true } , { :onchange => "load_part_price_select(this.id, > > > this.options[this.selectedIndex].value);" } ) %> > > > <%= f.label(:part_id, "Price: ") %> > > > <span class="price"></span> > > > <%= f.hidden_field :_destroy %> > > > <%= link_to_remove_fields "remove", f %> > > > </p> > > > js shouldn''t be in your html, i.e. this: > > > { :onchange => "load_part_price_select(this.id, > > > > this.options[this.selectedIndex].value);" > > > should be done up in the <head> section of your html. In order to do > > that, you have to put your js inside a function that executes after the > > page has loaded. > > > -- > > Posted viahttp://www.ruby-forum.com/.-- You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk+unsubscribe@googlegroups.com. For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en.
7stud --
2011-Aug-11 04:31 UTC
Re: How can I update a div value using Ajax but calling a function on the OnChange?
Kleber Shimabuku wrote in post #1016065:> @7stud, > > the "onchange" behavior make a function call, that''s right, and this > function (load_part_price_select() ) belongs to a js file, in this > case I did put it on the application.js file. >Yeah, but you put the js that calls the function in the html here:> <p class="fields"> > <%= f.collection_select(:part_id, @parts, :id, :title, { :prompt => > true } , { :onchange => "load_part_price_select(this.id, > this.options[this.selectedIndex].value);" } ) %> > <%= f.label(:part_id, "Price: ") %>Doesn''t that look like a bunch of chicken scratchings to you? You could make it ''look'' better with some spacing, but the point is: mixing html and javascript is bad style. If you load that page in a browser and do a View Source, and then look at the <select> tag, it will have an onchange attribute. Mixing html and js was considered bad style more than 7 years ago, and it remains bad style today. In fact, Rails 3 was redesigned so that when rails generates html pages, no js appears in the html pages. In your case, you are writing your own js(using jQuery), and you just foiled the rails teams hard work by explicitly writing your js in the html. You should watch this: http://railscasts.com/episodes/205-unobtrusive-javascript> this is actually working for me.Yes. It''s horrible style though. css, js, and html should all be in separate files. If you examine the code I posted, this is what the html looks like: <h1>Users#new</h1> <p>Find me in app/views/users/new.html.erb</p> <div id="target_div">Hello world</div> <select id="my_select"> <option value="mars">mars</option> <option value="venus">venus</option> </select> See any js in there?? Okay, I used prototype. Here it is with jquery: <h1>Users#new</h1> <p>Find me in app/views/users/new.html.erb</p> <div id="target_div">Hello world</div> <%= form_for(@user) do |f| f.collection_select( :id, @users, :id, :email, { :prompt => true }, { :id => "my_select", :class => "cool_effects" } ) end %> ===app/views/layouts/application.html.erb: <!DOCTYPE html> <html> <head> <title><%= @title %></title> <%= csrf_meta_tag %> <% javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js", "jquery.rails.js" %> <script type="text/javascript"> $(document).ready(function () { $("#my_select").change( function () { var choice = $(this).val(); //turn ''this'', which is the select element, //into a JQuery collection object, which //has a val() method. var query_string = "select_val=" + choice + "&another_val=10"; $("#target_div").load(''users/get_info'', query_string) } ); }); </script> </head> <body> <%= yield %> </body> </html> == class UsersController < ApplicationController def new @user = User.new @users = User.find(:all) @title = "Sign up" end def get_info choice = params[:select_val].to_i other_data = params[:another_val].to_i reply = "Hello #{choice + other_data}" render :text => reply end end == As far as I can tell, I need the route: resources :users in order for collection_select to work--in addition to: get ''users/get_info'' for the ajax request. -- Posted via http://www.ruby-forum.com/. -- You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en.
7stud --
2011-Aug-11 05:46 UTC
Re: How can I update a div value using Ajax but calling a function on the OnChange?
In this code:
function load_part_price_select(id, value) {
// alert(id);
// alert(value);
$(''#'' + id
).live(''change'',function() {
$.ajax({
url: ''/parts/'' + value +
''/price'',
type: ''get'',
context: this,
dataType: ''script'',
success: function(responseData) {
// alert(''success: '' + responseData);
$(this).nextAll("span.price:first").html(responseData);
}
});
});
};
...why do you have:
dataType: ''script'',
I doubt your action is responding to the ajax request by sending a
string with js code in it back to your page--because your action looks
like this:
def retrieve_part_price
@price = Part.find(params[:id])
respond_to do |format|
format.html { redirect_to(items_path)}
format.js { render :nothing => true }
end
end
It looks like you are trying to send a price back, so you should
specify:
dataType: ''text''
But then I don''t understand how your action returns anything because
you
wrote this:
format.js { render :nothing => true }
I think that should be render :text.
--
Posted via http://www.ruby-forum.com/.
--
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.