javascript ul button dropdown crashes after if doing more than 1 button
- by Apprentice Programmer
So i have a button drop down list that i want users to select a choice, and basically the button will return the users selection.Pretty straight forward, tested on jsFiddle and works great. Using ruby on rails btw, so i'm not sure if it might conflicting the way rails handle javascript actions.
Heres the code:
<%= form_for(@user, :html => {:class => 'form-horizontal'}) do |f| %>
<fieldset>
<p>Do you have experience in Business? If yes, select one of the following:
<div class="input-group">
<div class="input-group-btn btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Select one <span class="caret"></span></button>
<ul class="dropdown-menu">
<li ><a href="#">Entrepreneurship</a></li>
<li ><a href="#">Investments</a></li>
<li ><a href="#">Management</a></li>
<li class="divider"></li>
<li ><a href="#">All of the Above</a></li>
</ul>
</div><!-- /btn-group -->
<%= f.text_field :years_business , :class => "form-control", :placeholder => "Years of experience" %>
</div>
Now there are 2 more of these, and basically what happens is that if I select an item for the first time from the dropdown list, everything works great. But the moment I select the same button/or new button, the page immediately kind of refreshes, they selected value will not show up after the list drops down and user selects a value. I viewed the page source and
added additional javascript src and types, but still doesnt work.
the jquery code:
jQuery(function ($) {
$('.input-group-btn .dropdown-menu > li:not(.divider)').click(function(){
$(this).closest('ul').prev().text($(this).text())
})
});
Any suggestions what is causing the problem?? The jsfiddle link is here:
http://jsfiddle.net/w4s8u/7/
