Access single Drop Down list from multiple HTML files

Question

I have created a drop down list in the top right corner to list various options for a user when he/she logs into a website. Currently to display the drop down list in the top right corner of every webpage i'm writing the HTML code in every HTML file.

I'm trying to implement a system where I can call this code from every HTMl webpage in the website and changes made once in a single file are applied for all webpages..I can't figure out how to implement it..Please help... HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="google-signin-scope" content="profile email">
    <meta name="google-signin-client_id" content="909447696017-ka0dc75ts261cua6d2ho5mvb7uuo9njc.apps.googleusercontent.com">
    <script src="https://apis.google.com/js/platform.js" async defer></script> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>My Friends</title>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-1.11.3.min.js"></script>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/mystore.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Happy+Monkey' rel='stylesheet' type='text/css'>
</head>
<body>
    <div id="main">
        <div class="collapse navbar-collapse" id="myNavbar1">
            <ul class="nav navbar-nav navbar-right" id="navbar1right">
                <li class="dropdown" id="subheader">
                    <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        <span id="salutation"></span> <span class="caret">  </span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="postings.html"><span class="glyphicon glyphicon-phone"></span>Postings </a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="wishlists.html"><span class="glyphicon glyphicon-heart-empty"></span>WishList </a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="incomingrequests.html"><span class="glyphicon glyphicon-inbox"></span>Incoming Requests </a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="leasedoutitems.html"><span class="glyphicon glyphicon-gift"></span>Leased Out Items </a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="leasedinitems.html"><span class="glyphicon glyphicon-shopping-cart"></span>Leased In Items </a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="friendslist.html"><span class="glyphicon glyphicon-user"></span>Friends </a></li>
                        <li role="separator" class="divider"></li>
                        <li id="logoutoptionmenu"><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout </a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

Screen-shot of how it looks on UI..

EDIT 1:

As mentioned by user @DelightedD0D I removed the unordered list code and added in a seperate .inc file in the same folder as the html file. I edited code in my body tag accordingly and added the Following jquery code in the head section

     $(function(){
        $.get("menu.inc", function(response) {
              $('#myNavbar1').html(response);
              applyDynamicBindings('#myNavbar1');
        });
    });

    function applyDynamicBindings(container_selector){
         var $container=$(container_selector);
         $container.find("ul").click(function(){
             alert('triggered function bound to dynamic element');
         });
    }

Somehow the code is not able to enter the get method as the alert inside it is not getting displayed. Even the button is not getting displayed in the browser.

Through links, some of which are displayed in the drop down list... — Lucy, Dec 15 '15 at 05:50

Wesley Smith · Accepted Answer · 2015-12-15T06:19:40.513

You could use a simple template. Write the html for your menu and save it in a separate file named menu.inc (use any non standard extension you want) then call the below on any page where you need the menu to appear:

$.get('path_to/menu.inc', function(response) {
      $('#myNavbar1').html(response);
});

Now if you ever need to edit the menu, you can do so in one place and have the changes automatically affect all including pages.

So in your pages do something like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="google-signin-scope" content="profile email">
    <meta name="google-signin-client_id" content="909447696017-ka0dc75ts261cua6d2ho5mvb7uuo9njc.apps.googleusercontent.com">
    <script src="https://apis.google.com/js/platform.js" async defer></script> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>My Friends</title>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-1.11.3.min.js"></script>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/mystore.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Happy+Monkey' rel='stylesheet' type='text/css'>
    <script>
        $(function(){
            $.get('path_to/menu.inc', function(response) {
                  $('#myNavbar1').html(response);
                   applyDynamicBindings('#myNavbar1');
            });
        });
        function applyDynamicBindings(container_selector){
             var $container=$(container_selector);
             $container.find('.some-menu-item').click(function(){
                 alert('triggered function bound to dynamic element');
             });
        }

    </script>
</head>
<body>
    <div id="main">
        <div class="collapse navbar-collapse" id="myNavbar1">
        </div>
    </div>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

In menu.inc have just this:

            <ul class="nav navbar-nav navbar-right" id="navbar1right">
                <li class="dropdown" id="subheader">
                    <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        <span id="salutation"></span> <span class="caret">  </span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="postings.html"><span class="glyphicon glyphicon-phone"></span>Postings </a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="wishlists.html"><span class="glyphicon glyphicon-heart-empty"></span>WishList </a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="incomingrequests.html"><span class="glyphicon glyphicon-inbox"></span>Incoming Requests </a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="leasedoutitems.html"><span class="glyphicon glyphicon-gift"></span>Leased Out Items </a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="leasedinitems.html"><span class="glyphicon glyphicon-shopping-cart"></span>Leased In Items </a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="friendslist.html"><span class="glyphicon glyphicon-user"></span>Friends </a></li>
                        <li role="separator" class="divider"></li>
                        <li id="logoutoptionmenu"><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout </a></li>
                    </ul>
                </li>
            </ul>

or a similar solution found here http://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file — Bindrid, Dec 15 '15 at 05:51
@DelightedD0D Do i need to copy only the code inside body tag or the code in head tag as well?? — Lucy, Dec 15 '15 at 06:03
@DelightedD0D I copied just the code of div container having id "main" to the other file "main.inc" in the same floder and calling it using jquery like you said, but not getting any output..just the blue screen.. — Lucy, Dec 15 '15 at 06:09
Please see my update. What part you break out into the template is up to you but that should work, just make sure that the `'path_to/menu.inc'` is modified to reflect the actual path to where you saved the file — Wesley Smith, Dec 15 '15 at 06:10
Also, keep in mind that if you are applying any jQuery functions to the buttons, links, dropdowns, etc, you will need to make sure that your call to pull in the menu *completes* before you bind those functions to the elements. See the `applyDynamicBindings()` that I added as an example — Wesley Smith, Dec 15 '15 at 06:15
@DelightedD0D I added "ul" in the jquery find method of applyDynamicBindings() but somehow the code is not being able to go inside jQuery get() method. sample Alerts inside get method are not getting displayed..Take a look at my edit.. — Lucy, Dec 15 '15 at 06:37
@Lucy [Check out this demo](http://dodsoftware.com/sotests/get_tests/) let me know if you have any issues from here — Wesley Smith, Dec 15 '15 at 14:48
@DelightedD0D Actually the problem was that chrome was not letting the code access the .inc file due to security reasons. This issue was solved by running the html file on a server(tomcat in my case)..Please edit your answer accordingly so that it helps other users... — Lucy, Dec 16 '15 at 05:54

Access single Drop Down list from multiple HTML files

1 Answers1