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?