hey, i starting to use ajax in my site and i hope that u guys can help me, for an simple example, i have a list of users Users Lastname Firstname Brutyna Andydsfd Show Edit Brutynd Lucs Show Edit Brutynz Nick Show Edit this is the list, when u click on show, u get the ajax "popup" with the info. when u click on edit, u get also an ajax "popup", there u can edit the user values. when i click on the the update button (in the edit popup), i want this to happen: -popup closes -refresh user list -highlight the edited user ==> all this works with a static id like "user5" (this is the row in the list) but i want a dynamic id (see in edit.rhtml) :complete => ''user_updated("user5");'' ) %>) this is my code for the index.rhtml --------------------------------------- <% content_for("page_scripts") do -%> function changeSty(id, newClass){ //var item = $(''items'').firstChild; //new Effect.Highlight(item); item=document.getElementById(id); item.className=newClass; } function user_updated(item) { $(''form-submit-button'').disabled = false; Element.hide(''busy''); //popup becomes hidden changeSty("div_user","noshow_link"); changeSty("info","noshow_link"); //mark the edited row new Effect.Highlight(item); } function item_loading() { $(''form-submit-button'').disabled = true; Element.show(''busy''); } <% end -%> <div id="userlist"> <table border="1" width="500px"> <% if @users != nil %> <tr> <th colspan="4" style="border-bottom:2px solid #FFF">Users</th> </tr> <tr> <th>Lastname</th> <th>Firstname</th> <th> </th> <th> </th> </tr> <% if !@users.empty? %> <% for user in @users %> <tr id="user<%= user.id %>" > <td><%= user.last_name %></td> <td><%= user.first_name %></td> <td><%= link_to_remote ("Show", :update => "div_user", :url => { :action => :show, :id => user }, :complete => ''changeSty("div_user","show_popup")'' ) %> </td> <!--<td><%= link_to_remote ("Show", :complete => "new Effect.Appear(''div_user'')", :url => { :action => :show, :id => user }) %></td>--> <td><%= link_to_remote ("Edit", :update => "div_user", :url => { :action => :edit, :id => user }, :complete => ''changeSty("div_user","show_popup")'' ) %> </td> </tr> <% end %> <% else %> <tr><td colspan="4" class="centered">No entries found...</td></tr> <% end %> <% end %> </table> </div> <div id="div_user" class="popup"></div> -------------------------------------------- my edit.rhtml ------------------------------------------- <div id="info"> <table class="window" cellpadding="0px" cellspacing="0px"> <tr class="window_top"> <td>User Info</td> <td class="window_close"> <span class="close"> <a href="#" onClick="changeSty(''info'',''noshow_link'');">Close</a> </span> </td> </tr> <tr> <td colspan="2"> <%= form_remote_tag ( :url => { :action => :update, :id => @user }, :update => "userlist" , :loading => ''item_loading()'', :complete => ''user_updated("user5");'' ) %> <table cellpadding="0px" cellspacing="0px" class="window_content"> <tr> <td> <h2>User details</h2> <p><b>Lastname:</b><%= text_field "user", "last_name", :size => 20, :id => ''user[last_name]'' %></p> <p><b>Firstname:</b><%= text_field "user", "first_name", :size => 20, :id => ''user[first_name]'' %></p> <p><b>Email:</b><%= text_field "user", "email", :size => 20, :id => ''user[email]'' %></p> </td> </tr> <tr> <td class="right"> <%= submit_tag("Update", :id => ''form-submit-button'') %> <span id=''busy'' style="display: none">Updating...</span> </td> </tr> </table> </td> </tr> </table> </div> ----------------------- my controller -------------------------- class UserController < ApplicationController def index @users = User.find(:all, :order => "last_name ASC, first_name ASC") updated = params[:updated].blank? ? false : params[:updated] if updated render(:layout => false ) end rescue end def show user_id = params[:id] @user = User.find(:first, :conditions =>[''id = ? '', user_id]) render(:layout => false ) end def edit user_id = params[:id] @user = User.find(:first, :conditions =>[''id = ? '', user_id]) render(:layout => false ) end def update @user = User.find(params[:id]) @user.last_name = @params[:user][:last_name] @user.first_name = @params[:user][:first_name] @user.email = @params[:user][:email] if @user.save redirect_to :controller =>''user'', :action => ''index'', :updated => true #dont think this is a right way to do it, when the update is done, i dont need to render the global layout again else redirect_to :controller =>''user'', :action => ''edit'', :id => @user end end end ------------------------------------- when i change (in edit.rhtml) the complete stuff: :complete => ''user_updated("user5");'' ) %> to all the javascript function like :complete => ''user_updated("user5");changeSty("info","noshow_link");new Effect.Highlight("user5")'' he doesnt want to do all this, and something the layout is fucked up hope u guys can help me thanks alot
It is difficult for me to follow all the code, so I am suggesting you to use Firefox and watch the javascript console, looking for javascript errors. What is user5? On edit.rhtml you should probably have: <%= form_remote_tag ( :url => { :action => :update, :id => @user.id }, :update => "userlist" , :loading => ''item_loading()'', :complete => "user_updated(''user#{@user.id}'');" ) %> bogdan On 11/21/05, Brutyn nick <brutyn_nick-PkbjNfxxIARBDgjK7y7TUQ@public.gmane.org> wrote:> > hey, i starting to use ajax in my site and i hope that u guys can help me, > > for an simple example, i have a list of users > > Users > Lastname Firstname > Brutyna Andydsfd Show Edit > Brutynd Lucs Show Edit > Brutynz Nick Show Edit > > this is the list, when u click on show, u get the ajax "popup" with the > info. > when u click on edit, u get also an ajax "popup", there u can edit the > user > values. when i click on the the update button (in the edit popup), i want > this > to happen: > -popup closes > -refresh user list > -highlight the edited user > ==> all this works with a static id like "user5" (this is the row in the > list) > but i want a dynamic id > (see in edit.rhtml) > :complete => ''user_updated("user5");'' ) %>) > > this is my code for the index.rhtml > --------------------------------------- > <% content_for("page_scripts") do -%> > > function changeSty(id, newClass){ > //var item = $(''items'').firstChild; > //new Effect.Highlight(item); > item=document.getElementById(id); > item.className=newClass; > > } > > function user_updated(item) { > $(''form-submit-button'').disabled = false; > Element.hide(''busy''); > //popup becomes hidden > changeSty("div_user","noshow_link"); > changeSty("info","noshow_link"); > //mark the edited row > new Effect.Highlight(item); > } > > function item_loading() { > $(''form-submit-button'').disabled = true; > Element.show(''busy''); > } > <% end -%> > <div id="userlist"> > <table border="1" width="500px"> > <% if @users != nil %> > <tr> > <th colspan="4" style="border-bottom:2px solid #FFF">Users</th> > </tr> > <tr> > <th>Lastname</th> > <th>Firstname</th> > <th></th> > <th></th> > </tr> > <% if !@users.empty? %> > <% for user in @users %> > <tr id="user<%= user.id <http://user.id> %>" > > <td><%= user.last_name %></td> > <td><%= user.first_name %></td> > <td><%= link_to_remote ("Show", :update => "div_user", > :url => { :action => :show, :id => user }, > :complete => ''changeSty("div_user","show_popup")'' ) %> > </td> > <!--<td><%= link_to_remote ("Show", :complete => "new > Effect.Appear(''div_user'')", :url => { :action => :show, :id => user }) > %></td>--> > <td><%= link_to_remote ("Edit", :update => "div_user", > :url => { :action => :edit, :id => user }, > :complete => ''changeSty("div_user","show_popup")'' ) %> > </td> > </tr> > <% end %> > <% else %> > <tr><td colspan="4" class="centered">No entries found...</td></tr> > <% end %> > <% end %> > </table> > </div> > <div id="div_user" class="popup"></div> > > -------------------------------------------- > my edit.rhtml > ------------------------------------------- > <div id="info"> > <table class="window" cellpadding="0px" cellspacing="0px"> > <tr class="window_top"> > <td>User Info</td> > <td class="window_close"> > <span class="close"> > <a href="#" onClick="changeSty(''info'',''noshow_link'');">Close</a> > </span> > </td> > </tr> > <tr> > <td colspan="2"> > <%= form_remote_tag ( :url => { :action => :update, :id => @user }, > :update => "userlist" , > :loading => ''item_loading()'', > :complete => ''user_updated("user5");'' ) %> > <table cellpadding="0px" cellspacing="0px" class="window_content"> > <tr> > <td> > <h2>User details</h2> > <p><b>Lastname:</b><%= text_field "user", "last_name", :size => 20, :id => > ''user[last_name]'' %></p> > <p><b>Firstname:</b><%= text_field "user", "first_name", :size => 20, :id > => ''user[first_name]'' %></p> > <p><b>Email:</b><%= text_field "user", "email", :size => 20, :id => > ''user[email]'' %></p> > </td> > </tr> > <tr> > <td class="right"> > <%= submit_tag("Update", :id => ''form-submit-button'') %> > <span id=''busy'' style="display: none">Updating...</span> > </td> > </tr> > </table> > </td> > </tr> > </table> > </div> > > ----------------------- > my controller > -------------------------- > class UserController < ApplicationController > > def index > @users = User.find(:all, :order => "last_name ASC, first_name ASC") > updated = params[:updated].blank? ? false : params[:updated] > if updated > render(:layout => false ) > end > rescue > end > > def show > user_id = params[:id] > @user = User.find(:first, :conditions =>[''id = ? '', user_id]) > render(:layout => false ) > end > > def edit > user_id = params[:id] > @user = User.find(:first, :conditions =>[''id = ? '', user_id]) > render(:layout => false ) > end > > def update > @user = User.find(params[:id]) > > @user.last_name = @params[:user][:last_name] > @user.first_name = @params[:user][:first_name] > @user.email = @params[:user][:email] > if @user.save > redirect_to :controller =>''user'', :action => ''index'', :updated => true > #dont > think this is a right way to do it, when the update is done, i dont need > to > render the global layout again > else > redirect_to :controller =>''user'', :action => ''edit'', :id => @user > end > > end > > end > > ------------------------------------- > when i change (in edit.rhtml) the complete stuff: > > :complete => ''user_updated("user5");'' ) %> > > to all the javascript function like > :complete => ''user_updated("user5");changeSty("info","noshow_link");new > Effect.Highlight("user5")'' > he doesnt want to do all this, and something the layout is fucked up > > hope u guys can help me > > thanks alot > > _______________________________________________ > Rails mailing list > Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails >_______________________________________________ Rails mailing list Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails
user5 is just to make a unique id , text "user" and its id, "cuz i thougth ids couldnt start with numbers yeah thanks for that changed it to <% ......... :complete => "new EFfect.Highlight(''user#{@user.id}''); user_updated();changeSty(''info'',''noshow_link'');" ) %> And how can i now make the popup draggable??? <%= draggable_element("div_user", :revert => true) %> doesnt seem to work div => div_user is the div that is already on the index page (invisible, and position absolute) div => info is the div with the table and its user info (popup) thanks in advance
Brutyn nick
2005-Nov-21 14:52 UTC
Re: Ajax and ruby problem highlighting, creating new user
i have fixed the previous error, no thats works, but now i want to create a new user and highlight it after creation with my previous code in edit.html, i now have in new.rhtml edit.rhtml <%= form_remote_tag ( :url => { :action => :update, :id => @user }, :update => "userlist" , :loading => ''item_loading()'', :complete => "new Effect.Highlight(''user#{@user.id}''); user_updated();changeSty(''info'',''noshow_link'');" ) %> new.rhtml <%= form_remote_tag ( :url => { :action => :create, :id => @user }, :update => "userlist" , :loading => ''item_loading()'', :complete => "user_updated();changeSty(''info'',''noshow_link'');" ) %> here i also need new Effect.Highlight(''user#{@user.id}'') , but i dont now the user id yet, cuz i need to created if first, can anyone help here?