Hello, I have tried implementing the shopping cart ajax example and have run into some problems. The only differences with the shopping cart is My list of products are generated from a partial view The images of the products come from an http link. However, Iam seeing a strange behavior when I drag and drop the elements to my cart. On the first drag and drop the image successfully reverts to original location, the second time I drag the same image, it reverts a few pixels off and when I drag it from there, its more off and eventually the image reverts out of the page !!!! Can somebody provide any clues on what may be causing this behavior? Appreciate your help Sunder -- _______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
I found that the revert works perfect, if I dont add an item to the cart. _______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>Hi maybe this is the answer.. http://dev.rubyonrails.org/ticket/2987 Best wishes.. Grzegorz Ślusarek Dnia 30-11-2005 o godz. 2:14 Sunder napisał(a): I found that the revert works perfect, if I dont add an item to the cart. ---------------------------------------------------- Andrzejki - wróżby tylko dla pań! Katarzynki - wróżby tylko dla kawalerów! Sprawdź - zanim będzie za późno ;) http://klik.wp.pl/?adr=http://adv.reklama.wp.pl/as/handrzejki.html&sid=581 _______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Thanks,
The bug was informative, but my application pretty much replicates what the
cart example does except for adding images instead of products. so Iam not
adding it to any html list. Here is my code. Like I said before, the revert
works fine when I dont add the object to the cart. The revert also works
fine when the same object is added twice to the cart. The third time its
added to the cart, it reverts a few pixels off and from then on, it goes all
over the page.
<h1>New entry</h1>
<%= javascript_include_tag "prototype" %>
<%= define_javascript_functions %>
<%= link_to 'Back', :action => 'list' %>
<h3>Add to list using Ajax</h3>
<%= form_remote_tag(:update => "pictures",
:loading => "Element.show
('indicator')",
:complete =>"Element.hide
('indicator')",
:url => { :action => :add_item },
:position => "top" ) %>
New item text:
<%= text_field_tag :newitem %>
<%= text_field_tag :flickrid %>
<%= submit_tag "Add item with Ajax" %>
<div style="height:40px;padding-top:10px;">
<p id="indicator"
style="display:none;margin-top:0px;">
<%= image_tag "indicator.gif" %> Updating
pics...
</p>
</div>
<div id="pictures"
style="clear:right;z-index:1;height:132px;margin-top:10px;">
<div style="clear:both;"></div>
</div>
<%= end_form_tag %>
<div id="cart" class="cart"
style="clear:right;z-index:1;height:132px;margin-top:10px;">
<div id="items">
<%= render :partial => "cart" %>
</div>
<div style="clear:both;"></div>
</div>
<%= drop_receiving_element "cart",
:update => "items", :url => { :action =>
"add" },
:accept => "photo_list", :hoverclass =>
"cart-active",
:loading => "Element.show('indicator')",
:complete => "Element.hide('indicator')" %>
************************* Partial View - Photo
<% if (session[:flickrid] != '' && @photos != nil) %>
<%= image_tag " #{photo.source('Square')}",
:tag => 'pictures',
:id =>
"#{photo.source('Small')}",
:alt =>
photo.source('Square'),
:class => "photo_list",
:style => "clear:both;"
%>
<%= draggable_element
"#{photo.source('Small')}", :revert =>
true %>
<% end %>
************************* partial View Cart
<% session[:cart].photos.each do |photo| %>
<%= image_tag "#{photo}",
:id => "#{photo}",
:style => "position:relative;"
%>
<%= draggable_element "#{photo}", :revert => true %>
<% end %>
<%= "Here's your photo cart." if session[:cart].photos.empty?
%>
Thanks for the help.
Sunder
On 11/30/05, Grzesiek Slusarek <gregtech@wp.pl>
wrote:>
> >Hi maybe this is the answer..
> http://dev.rubyonrails.org/ticket/2987
>
> Best wishes..
> Grzegorz Ślusarek
> Dnia 30-11-2005 o godz. 2:14 Sunder napisał(a):
>
> I found that the revert works perfect, if I dont add an item to the cart.
>
>
>
>
> ----------------------------------------------------
> Andrzejki - wróżby tylko dla pań!
> Katarzynki - wróżby tylko dla kawalerów!
> Sprawdź - zanim będzie za późno ;)
>
http://klik.wp.pl/?adr=http://adv.reklama.wp.pl/as/handrzejki.html&sid=581
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs@lists.rubyonrails.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>
>
>
--
<a href="http://www.sunderiyer.com"><img src="
http://feeds.feedburner.com/SunderIyer.gif" height="67"
width="200"
style="border:0" alt="Sunder Iyer"/></a>
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Look at your styles. Are they position:absolute or position:relative? I had similar problems that all came from CSS positioning. ______________________________________________________________ Verschicken Sie romantische, coole und witzige Bilder per SMS! Jetzt bei WEB.DE FreeMail: http://f.web.de/?mc=021193
Thanks. Are you referring to the image css styles? I tried both absolute and
relative with no success. Also, like I said, Does the css change when you
drop an object into the cart? because my revert is fine otherwise. Anyway, I
have inlcuded the css below.
body {
background-color:#eee;
color:#333;
}
a:link { color: #333; }
a:visited { color: #333; }
#content {
padding:0;
}
#shopping_cart {
padding:20px;
}
h1 {
padding:10px;
background-color:#35658F;
color:#eee;
}
img.photos {
position:relative;
width:75px;
height:75px;
margin-right:10px;
cursor:move;
}
div.cart {
position:relative;
border:1px solid #B3D4EF;
background-color:#B3D4EF;
width:500px;
}
div#wastebin {
width:135px;
padding:5px;
border:1px solid #eee;
}
div.cart img {
float:left;
width:32px;
height:32px;
margin-right:10px;
cursor:move;
}
div.cart div {
font-size:12px/14px;
font-weight:normal;
color:##444;
}
div.cart-active {
background-color:#eee;
}
div.wastebin-active {
width:135px;
padding:5px;
background-color:#ccc;
}
#cart {
height:132px;
margin:10px 0;
}
#photo_list {
position:absolute;
border:1px solid #CCCFFF;
background-color:#CCCFFF;
width:900px;
height:600px;
On 11/30/05, Martin Scheffler <wooyay-S0/GAf8tV78@public.gmane.org>
wrote:>
> Look at your styles.
> Are they position:absolute or position:relative?
> I had similar problems that all came from CSS positioning.
> ______________________________________________________________
> Verschicken Sie romantische, coole und witzige Bilder per SMS!
> Jetzt bei WEB.DE FreeMail: http://f.web.de/?mc=021193
>
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Okay folks. I finally got this working. In all my stupidity, I had the cart draggable and the partial draggable set to the same id. So when I added an item to the cart, everything was confused and my revert was all over the place. Thanks to everyone that responded. Sunder On 11/30/05, Sunder <talk2sunder-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> > Thanks. Are you referring to the image css styles? I tried both absolute > and relative with no success. Also, like I said, Does the css change when > you drop an object into the cart? because my revert is fine otherwise. > Anyway, I have inlcuded the css below. > > body { > background-color:#eee; > color:#333; > } > > a:link { color: #333; } > a:visited { color: #333; } > > #content { > padding:0; > } > > #shopping_cart { > padding:20px; > } > > h1 { > padding:10px; > background-color:#35658F; > color:#eee; > } > > img.photos { > position:relative; > width:75px; > height:75px; > margin-right:10px; > cursor:move; > } > > div.cart { > position:relative; > border:1px solid #B3D4EF; > background-color:#B3D4EF; > width:500px; > } > > > > div#wastebin { > width:135px; > padding:5px; > border:1px solid #eee; > } > > div.cart img { > float:left; > width:32px; > height:32px; > margin-right:10px; > cursor:move; > } > > div.cart div { > font-size:12px/14px; > font-weight:normal; > color:##444; > > } > > div.cart-active { > background-color:#eee; > } > > div.wastebin-active { > width:135px; > padding:5px; > background-color:#ccc; > } > > #cart { > > height:132px; > margin:10px 0; > } > > #photo_list { > position:absolute; > border:1px solid #CCCFFF; > background-color:#CCCFFF; > width:900px; > height:600px; > > > On 11/30/05, Martin Scheffler <wooyay-S0/GAf8tV78@public.gmane.org > wrote: > > > > Look at your styles. > > Are they position:absolute or position:relative? > > I had similar problems that all came from CSS positioning. > > ______________________________________________________________ > > Verschicken Sie romantische, coole und witzige Bilder per SMS! > > Jetzt bei WEB.DE FreeMail: http://f.web.de/?mc=021193 > > >-- <a href="http://www.sunderiyer.com"><img src=" http://feeds.feedburner.com/SunderIyer.gif" height="67" width="200" style="border:0" alt="Sunder Iyer"/></a> _______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs