I have a collection of products that I am showing in a dropdown. Now at the first view it will show only first 10 products in the dropdown with an option "more..." at last. if user clicks the "more..." he can see all the following products in that dropdown list (this is not any ajax request, just javascript show/hide). Of course the more... option will hide when showing all items. Any suggestion for it? My select tag have a "onchange" which submits the form and hence showing that product description. I cant find out the exact way to do this. Please help -- 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.
On 10 April 2010 09:47, Samiron <samironpaul-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> I have a collection of products that I am showing in a dropdown. Now > at the first view it will show only first 10 products in the dropdown > with an option "more..." at last. if user clicks the "more..." he can > see all the following products in that dropdown list (this is not any > ajax request, just javascript show/hide). Of course the more... option > will hide when showing all items. >I don''t know your reasoning for doing this, but assuming it''s to make the UI a bit cleaner (rather than the fact that the list is HUGE, in which case searching would be a better UI option anyway) I''d personally do this with jQuery rather than Rails/Ajax. If you''re using Prototype you''ll need someone who knows that framework to translate this jQuery code. I''ve tested the code below in Safari and it works fine, you may need to tweak it for your needs though... Cheers, Andy <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Test option enabling</title> <script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href=" http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css "> <script type="text/javascript" charset="utf-8"> $(document).ready(function() { // Extract the excess options in to a jQuery data attribute and remove them from the DOM elems = $(''#foo option:gt(9)''); $("#foo").data(''elems'', elems); elems.detach(); // Add the new "More..." option $("#foo").append("<option value='''' id=''foo-more''>More...</option>") // If they choose an option with no value (the More... element) then remove the more element, // bring back the hidden elements and remove the data attribute $("#foo").change(function() { if ($("#foo").val() == "") { $("#foo-more").remove(); $("#foo").append($("#foo").data(''elems'')); $("#foo").data(''elems'', null); } }); }); </script> </head> <body> <select id=''foo''> <option value=''1''>Option 1</option> <option value=''2''>Option 2</option> <option value=''3''>Option 3</option> <option value=''4''>Option 4</option> <option value=''5''>Option 5</option> <option value=''6''>Option 6</option> <option value=''7''>Option 7</option> <option value=''8''>Option 8</option> <option value=''9''>Option 9</option> <option value=''10''>Option 10</option> <option value=''11''>Option 11</option> <option value=''12''>Option 12</option> <option value=''13''>Option 13</option> <option value=''14''>Option 14</option> <option value=''15''>Option 15</option> <option value=''16''>Option 16</option> <option value=''17''>Option 17</option> <option value=''18''>Option 18</option> <option value=''19''>Option 19</option> <option value=''20''>Option 20</option> </select> </body> </html> -- 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.
You could always just render the output the results to the screen and not mess with the drop down. That would be much easier, then you could just have a "more" button at the bottom like twitter does. On Apr 12, 7:16 am, Andy Jeffries <andyjeffr...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> On 10 April 2010 09:47, Samiron <samironp...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > I have a collection of products that I am showing in a dropdown. Now > > at the first view it will show only first 10 products in the dropdown > > with an option "more..." at last. if user clicks the "more..." he can > > see all the following products in that dropdown list (this is not any > > ajax request, just javascript show/hide). Of course the more... option > > will hide when showing all items. > > I don''t know your reasoning for doing this, but assuming it''s to make the UI > a bit cleaner (rather than the fact that the list is HUGE, in which case > searching would be a better UI option anyway) I''d personally do this with > jQuery rather than Rails/Ajax. If you''re using Prototype you''ll need > someone who knows that framework to translate this jQuery code. > > I''ve tested the code below in Safari and it works fine, you may need to > tweak it for your needs though... > > Cheers, > > Andy > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> > <html> > <head> > <title>Test option enabling</title> > <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> > <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-gr... > "> > <script type="text/javascript" charset="utf-8"> > $(document).ready(function() { > // Extract the excess options in to a jQuery data attribute and remove them > from the DOM > elems = $(''#foo option:gt(9)''); > $("#foo").data(''elems'', elems); > elems.detach(); > > // Add the new "More..." option > $("#foo").append("<option value='''' id=''foo-more''>More...</option>") > > // If they choose an option with no value (the More... element) then remove > the more element, > // bring back the hidden elements and remove the data attribute > $("#foo").change(function() { > if ($("#foo").val() == "") { > $("#foo-more").remove(); > $("#foo").append($("#foo").data(''elems'')); > $("#foo").data(''elems'', null);} > }); > }); > > </script> > </head> > <body> > <select id=''foo''> > <option value=''1''>Option 1</option> > <option value=''2''>Option 2</option> > <option value=''3''>Option 3</option> > <option value=''4''>Option 4</option> > <option value=''5''>Option 5</option> > <option value=''6''>Option 6</option> > <option value=''7''>Option 7</option> > <option value=''8''>Option 8</option> > <option value=''9''>Option 9</option> > <option value=''10''>Option 10</option> > <option value=''11''>Option 11</option> > <option value=''12''>Option 12</option> > <option value=''13''>Option 13</option> > <option value=''14''>Option 14</option> > <option value=''15''>Option 15</option> > <option value=''16''>Option 16</option> > <option value=''17''>Option 17</option> > <option value=''18''>Option 18</option> > <option value=''19''>Option 19</option> > <option value=''20''>Option 20</option> > </select> > </body> > </html>-- 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.