Bootstrap Dropdown button-> post selected dropdown value onclick + Update dropdown with selected value

Question

Goal: User selects granularity from the drop-down button (see HTML below).
Granularity dropdown is updated to show users selected value.
Ajax post occurs in the background with selected value to be read via MVC controller. Could use some help with this also.

Note: I have looked at the following post to update the dropdown with the selected value. I use the second version of Jai's solution
How to Display Selected Item in Bootstrap Button Dropdown Title
The problem I have is that it wrongly updates another dropdown on the page. I need it to update dropdown buttons based on id for example id_granularity_dropdown.

Any help you would be of great assistance. The ajax post with value is also a problem for me.

HTML for Dropdown.

<ul class="nav navbar-top-links navbar-right">
<li>
    <div class="btn-group">
        <button data-toggle="dropdown" class="btn-xs btn-info dropdown-toggle" id="id_granularity_dropdown">Auto Sampling <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="#">5 min Sampling</a></li>
            <li><a href="#">30 min Sampling</a></li>
            <li><a href="#">Hourly Sampling</a></li>
            <li><a href="#">Daily Sampling</a></li>
        </ul>
    </div>
</li>
</ul>

You should post what you actually tried based on the other SO answer along with rest of your code that represents the other buttons that are inadvertently updating. — vanburen, Dec 28 '15 at 04:20
why dont you try to give a different id/class to that drop down ! So that you dont need to specify the as `first-child` `second-child` (as per the link you provided above). — KPK, Dec 28 '15 at 06:32
@vanburen jquery and ajax aren't my strong points, and I'm struggling to find similar scenarios, If you can point me even to a web link that may assist it would be appreciated. — Peter H, Dec 28 '15 at 08:50

score 2 · Accepted Answer · edited May 23 '17 at 10:28

Update :I dynamically populated dropdown in the separate function then called the click method which is updating title, You can put that in your ajax method and update your title.

this can be achieved by doing the following:

<ul class="nav navbar-top-links navbar-right">
<li>
<div class="btn-group">
<button data-toggle="dropdown" class="btn-xs btn-info dropdown-toggle" id="id_granularity_dropdown"><span id="sampVal">Auto Sampling</span> <span class="caret"></span></button>
    <ul class="dropdown-menu" id="list">
    </ul>
</div>
</li>

and javascript :

        $(document).ready(function(){
  populateLi();
})

$(function() {
  $(".dropdown-menu").on("click","li a",function(){
      a = $(this).closest("a");
      var getSampling = a.text();
      $(this).closest(".dropdown-menu").prev().find(".sampVal").text(getSampling);

});


});

function populateLi()
{

    $("#id_granularity_dropdown2").find(".dropdown-menu").empty();
    insertLi('list2',"#",'1115 min Sampling');
    insertLi('list2',"#",'3000 min Sampling');
    insertLi('list2',"#",'no Hourly min Sampling');
    insertLi('list2',"#",'no Daily min Sampling');
    $("#id_granularity_dropdown").find(".dropdown-menu").empty();
    insertLi('list',"#",'5 min Sampling');
    insertLi('list',"#",'30 min Sampling');
    insertLi('list',"#",'Hourly min Sampling');
    insertLi('list',"#",'Daily min Sampling');
        

        
}

function insertLi (ID,HREF,VALUE) {
    ul = document.getElementById(ID); 
    a= document.createElement("a");
    a.appendChild(document.createTextNode(VALUE));
    a.setAttribute("href", HREF);
    li =  document.createElement("li");
    li.appendChild(a);
    ul.appendChild(li);
}

.nav li {display:inline-block;margin-right:10px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav navbar-top-links navbar-right">
<li>
    <div class="btn-group">
    <button data-toggle="dropdown" class="btn-xs btn-info dropdown-toggle" id="id_granularity_dropdown"><span id="sampVal" class="sampVal">Auto Sampling</span> <span class="caret"></span></button>
        <ul class="dropdown-menu" id="list">
            
        </ul>
    </div>
</li>
<li>
    <div class="btn-group">
    <button data-toggle="dropdown" class="btn-xs btn-info dropdown-toggle" id="id_granularity_dropdown2"><span id="sampVal2" class="sampVal">No Auto Sampling</span> <span class="caret"></span></button>
        <ul class="dropdown-menu" id="list2">
            
        </ul>
    </div>
</li>

</ul>

and working fiddle here:https://jsfiddle.net/x5rbq4dn/5/

you can also place the ajax code in li click function and update the button to be updated title by wrapping it in another span as its done as #sampVal.

You can check here : AJAX list update, get new elements and count

Thanks for the help so far. I noticed an issue, if another button say button 2 with a dropdown is also on the page, selecting on of the fields in button 2 wrongly changes the granularity button dropdown. I Think this is why you populate the list but I'm trying to avoid the user manually having to click a button to populate the list when its first run. — Peter H, Dec 29 '15 at 00:11
I updated my code, please check the snippet, list is dynamically populated can be called inside ajax your choice, and title is updating accordingly. — wui, Dec 29 '15 at 09:17

Bootstrap Dropdown button-> post selected dropdown value onclick + Update dropdown with selected value

1 Answers1