locked
Problems reloading a Bootstrap menu RRS feed

  • Question

  • User625999351 posted

    I have an undocumented project (MVC C#).  My experience in BootStrap and jQuery is rather limited. 

    As near as I can tell the page has a Bootstrap dropdown menu that is populated using Ajax calls from a dedicated js file.

    What I need to happen is for this menu to refresh when ever there is an onclick event of a particular button. 

    Given the complexity of the menu's js code I was wondering if there was a generic refresh/reload call I could use?  (in jQuery?) 

    The problem is that I only want that one menu to refresh, not the whole page.

        <div class="dropdown-tree input-group btn-group" id="dropdown-tree-org" data-multiple="true" data-name="selectedItems" data-selected="@String.Join(",", Model.SelectedItems)">
                        <span class="input-group-addon"><i class="glyphicon icon-briefcase"></i></span>
                        <button class="dropdown-toggle btn btn-default" id="dropdown-tree-btn" data-toggle="dropdown" type="button" style="width: auto;">
                            AListOfItems <b class="caret"></b>
                        </button>
                        <ul class="dropdown-tree-container dropdown-menu" id="dropdown-tree-ul"></ul>
                    </div>

    Thursday, October 6, 2016 8:18 PM

Answers

  • User625999351 posted

    Actually I've finally solved it.  Embarrassingly simple.  

     $("ul#dropdown-tree-ul").empty();

    (Please understand that I can't share the entire jQuery code due to proprietary concerns, and it's entirely too big anyway.)

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 10, 2016 3:06 PM

All replies

  • User283571144 posted

    Hi bchernick,

    Given the complexity of the menu's js code I was wondering if there was a generic refresh/reload call I could use?  (in jQuery?) 

    According to your description, I couldn't understand your requirement clearly.

    Could you please explain more about refresh/reload bootstrap menu?

    Do you mean you want to change the bootstrap menu's test?

    If this is your requirement, I suggest you could use jquery selector to focus the menu's item, then you could use jquery html method to replace the text with new text.

    More details, you could refer to follow codes:

    JS:

     <script>
            $(function () {
                $("#Button1").click(function () {
                    $('#dropdown-tree-ul li').each(function (i) {
                        $(this).html('bbb'); // Here you could change the li's text
                    });
                });
            });
        </script>

    Html Makeup:

       <input id="Button1" type="button" value="button" />
        <div class="dropdown-tree input-group btn-group" id="dropdown-tree-org" data-multiple="true" data-name="selectedItems" data-selected="@String.Join(" ,", Model.SelectedItems)">
            <span class="input-group-addon"><i class="glyphicon icon-briefcase"></i></span>
            <button class="dropdown-toggle btn btn-default" id="dropdown-tree-btn" data-toggle="dropdown" type="button" style="width: auto;">
                AListOfItems <b class="caret"></b>
            </button>
            <ul class="dropdown-tree-container dropdown-menu" id="dropdown-tree-ul">
                <li>aaaaa</li>
                <li>aaaaa</li>
                <li>aaaaa</li>
                <li>aaaaa</li>
            </ul>
        </div>

    Best Regards,

    Brando

    Friday, October 7, 2016 7:08 AM
  • User625999351 posted

    My apologies.  I'd delete this append if I could.  I posted too soon.

    What I want to do is completely reload the menu and as I said, the code to do that is completely undocumented.  I was wondering if there was a simple way to trigger a 'reload' event, for lack of a better term.

    I'll just have to spend some time hacking.

    Actually, after some 'hacking' I'm at a point where I have almost everything I need.

    However my problem now is not 'reloading' the menu as such.  The only problem I seem to have is how to do a complete clear of that bootstrap menu before I reload it.

    Friday, October 7, 2016 12:30 PM
  • User-728446177 posted

    I am actually looking at simply gridview similar control, that allow to create list view and paging. However gridview is not responsive as in it does not display details cross platform, it doesn't look as good in mobile/table. I have chosen a bootstrap html template. the html code is like this below, vs gridview.  I know how to do gridview, but i don't know how to do paging in asp.net using the bootstrap template.  Please note that I am not doing MVC and just asp.net. Thanks in advance.

      <asp:GridView ID="gvPending" Runat="server"   Width="775px"  AllowPaging="false" 
      AutoGenerateColumns="False" 
      BorderWidth="1px" BackColor="#fbfcff"  AlternatingRowStyle-BackColor="#edf8fc"  CellPadding="0" BorderStyle="None"   onrowcommand="GridView_RowCommand" RowStyle-BackColor="#f4fbfd" 
      BorderColor="#CCCCCC" Font-Names="Arial" >
        <FooterStyle ForeColor="#000066" BackColor="White"></FooterStyle>
    
        <PagerStyle ForeColor="#000066" HorizontalAlign="Left" 
          BackColor="#dff0f7"></PagerStyle> .... 

     <div class="pagination-bar text-center">
                            <ul class="pagination">
                                <li class="active"><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#"> ...</a></li>
                                <li><a class="pagination-btn" href="#">Next &raquo;</a></li>
                            </ul>
                        </div>

    Friday, October 7, 2016 3:06 PM
  • User-835544317 posted

    My apologies.  I'd delete this append if I could.  I posted too soon.

    What I want to do is completely reload the menu and as I said, the code to do that is completely undocumented.  I was wondering if there was a simple way to trigger a 'reload' event, for lack of a better term.

    I'll just have to spend some time hacking.

    Actually, after some 'hacking' I'm at a point where I have almost everything I need.

    However my problem now is not 'reloading' the menu as such.  The only problem I seem to have is how to do a complete clear of that bootstrap menu before I reload it.

    Can you share the html( having the menu and the jquery code - may be I can try helping you with your issue..

    Sunday, October 9, 2016 5:06 AM
  • User625999351 posted

    Actually I've finally solved it.  Embarrassingly simple.  

     $("ul#dropdown-tree-ul").empty();

    (Please understand that I can't share the entire jQuery code due to proprietary concerns, and it's entirely too big anyway.)

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 10, 2016 3:06 PM