Bootstrap dropdown links not working

Question

I am using the latest version of bootstrap, and I have a top menu page with a fixed top navbar.

It has several links, and a search form. The search submits the query via AJAX and then outputs the results of the php file with a drop down result.

I am able to get the results to post and get the dropdown menu working, but the links are not clickable. They are highlighted and I can see href below in the status bar, but I can't click through.

HTML CODE:

<div class="row">
<img class="img-responsive center-block" src="images/header.jpg">
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-rc">
    <div class="container-fluid">
        <div class="highlight-light navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-navbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand visible-xs" href="#"><span class="glyphicon glyphicon-home">&nbsp;</span>Main Menu</a>
        </div>
        <div id="top-navbar" class="collapse navbar-collapse">
            <ul class="highlight-light nav navbar-nav">
                <li><a href="newcontact.php"><span class="glyphicon glyphicon-user">&nbsp;</span>New Contact</a></li>
                <li><a href="newsearch.php"><span class="glyphicon glyphicon-search">&nbsp;</span>Search</a></li>
                <li><a href="#contact"><span class="glyphicon glyphicon-list-alt">&nbsp;</span>Attendance</a></li>
                <li><a href="#contact"><span class="glyphicon glyphicon-calendar">&nbsp;</span>Planner</a></li>
                <li><a href="#contact"><span class="glyphicon glyphicon-stats">&nbsp;</span>Statistics</a></li>
                <li class="dropdown">
                    <form class="navbar-form navbar-left" id="QuickSearch" role="form" method="post" action="">
                        <div class="form-group form-group-xs">
                            <input type="text" class="input" placeholder="Search by Name or Email" name="SearchTerm" id="SearchTerm"/>
                            <div class="btn-group btn-group-xs">
                                <input class="btn btn-default" type="submit" value="Search" />
                            </div>
                        </div>
                    </form>
                    <div id="QuickSearchResults"></div>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="newlogout.php"><span class="glyphicon glyphicon-log-out">&nbsp;</span>Log-out</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>
</div>

JS

$("#QuickSearch").submit(function(){

$.blockUI({ message: '<h1><img src="img/busy.gif" />&nbsp;Please Wait...</h1>' }); 
// Intercept the form submission
var formdata = $(this).serialize(); // Serialize all form data

// Post data to your PHP processing script
$.post( "quicksearch.php", formdata, function( data ) {
    // Act upon the data returned, setting it to #success <div>
    $("#QuickSearchResults").html ( data );
    $(function () {
        $('#QuickResultsMenu').dropdown('toggle');
    });
    $.unblockUI();
});

return false; // Prevent the form from actually submitting
});

PHP

/* Code that does DB connection and processing, then below */
<ul id="QuickResultsMenu" class="dropdown-menu padding10">
<?php   
//And we display the results 
foreach($ContactSearch as $Results) : ?>

<!-- Search Results -->
    <li class="smalltext">
        <a href="contact.php?Id=<?php echo $Results['Id'];?>"><?php echo $Results['FirstName'];?>
        <?php echo $Results['LastName'];?>,<?php echo $Results['Phone2'];?>,<?php echo $Results['Email'];?></a>
    </li>

<?php endforeach; ?>

<!-- Total Search Results -->
    <li class="">
        <form role="form" id="QuickResults" name="QuickResults">
        Show more results
        </form>
    </li>
</ul>

I noticed that if I remove the ul tag that is in the php code, the links work fine, but the styling gets messed up. I can't figure out how to make this look right and be functional. Any help is greatly appreciated. Thanks!

CSS

@charset "utf-8";
/* CSS Document */

/* START
** Div and container setup */

/* Set a max-width for horizontal fluid layout and make it centered */
.container-fluid {
    margin-right: auto;
    margin-left: auto;
    max-width: 970px;
}

/* Padding */
.padding10 {
    padding:10px;
}

/* Shadow for Page Outline */
.rcshadow {
    -moz-box-shadow: 0px 0px 30px 10px #000;
    -webkit-box-shadow: 0px 0px 30px 10px #000;
    -khtml-box-shadow: 0px 0px 30px 10px #000;
    box-shadow: 0px 0px 30px 10px #000;
    -moz-border-radius: 0px 0px 15px 15px;
    border-radius: 0px 0px 15px 15px;
}

/* Page Outline */
.rcpage {
    background-color:#FFF;
    padding:10px 30px 20px;
    margin-left:auto;
    margin-right:auto;
    -moz-border-radius: 0px 0px 15px 15px;
    border-radius: 0px 0px 15px 15px;
}

/* Body */
body {
    margin:0;
    padding:0;
    font-size:100%;
    font-family:verdana,arial,'sans serif';
    background-color:#3b607e;
    color:#000000;
}

/* END
** Div and container setup */


/* START 
** Navbar Styling */
.navbar-rc {
    margin-bottom:0px;
    -moz-border-radius:0px;
    border-radius:0px;
}

.navbar-nav > li > a, .navbar-brand {
    padding-top:5px !important; 
    padding-bottom:0 !important; 
    height: 30px; 
} 

.highlight-light > li:hover, .highlight-light .navbar-brand:hover {
    background-color:#e7e7e7;   
}


.highlight-dark > li:hover {
    background-color:#000000;   
}

.navbar {
    min-height:30px !important;
}
/* END 
** Navbar Styling */


/* START 
** Typography */
h1 {
    font-size:2em;
    color:#739CBF;
    font-weight:bold;
    text-shadow: #000 1px 1px 2px;
    text-align:center;
}

h2 {
    font-size:1.4em;
    color:#3b607e;
    font-weight:bold;
}

h3 {
    font-size:1.4em;
    color:red;
    font-weight:bold;
}

h4 {
    font-size:1.4em;
    color:#000;
    font-weight:bold;
}

/* Used for search text */
.smalltext {
    font-size:xx-small;
    color:#ABABAB;
}

.error {
    color:red;
    font-weight:bold;
}

/* text for footer that goes against background */
.bgtext {
    color: silver;
}

/* Form Error Code */
input.error {
    background: red;
    color: white;
}

/* Form Error Code */
label.error {
    color: red;
}
/* END 
** Typography */

/* START
** Buttons */
.rcbutton {
    -moz-box-shadow:inset 0px 1px 0px 0px #739CBF;
    -webkit-box-shadow:inset 0px 1px 0px 0px #739CBF;
    box-shadow:inset 0px 1px 0px 0px #739CBF;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #87A5BF), color-stop(1, #739CBF) );
    background:-moz-linear-gradient( center top, #87A5BF 5%, #739CBF 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
    background-color:#3B607E;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #394D5F;
    display:inline-block;
    color:#ffffff;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0px #528ecc;
}


.button {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
    background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
    background-color:#378de5;
}

.button:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
    background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
    background-color:#378de5;
}

.button:active {
    position:relative;
    top:1px;
}
/* END
** Buttons */

/* END
** Miscellaneous */
.panelhead {
    width:420px;
    color:#FFF;
    font-size:1.4em;
    font-weight:bold;
    background-color:#3b607e;
    padding:5px;
    border-top:thick ridge #000;
    border-left:thick ridge #000;
    border-right:thick ridge #000;
}

.panelbody {
    width:420px;
    color:#000;
    font-size:1.1em;
    background-color:#FFF;
    padding:5px;
    border:thick ridge #000;
}

.fullpanelhead {
    margin-left:auto;
    margin-right:auto;
    width:890px;
    color:#FFF;
    font-size:1.4em;
    font-weight:bold;
    background-color:#3b607e;
    padding:5px;
    border-top:thick ridge #000;
    border-left:thick ridge #000;
    border-right:thick ridge #000;
}

.fullpanelbody {
    margin-left:auto;
    margin-right:auto;
    width:890px;
    color:#000;
    font-size:1.1em;
    background-color:#FFF;
    padding:5px;
    border:thick ridge #000;
    margin-bottom:20px;
}
 .fullpanelsection
{
    margin-left:auto;
    margin-right:auto;
    width:890px;
    position:relative;
}

.fieldcolumn {
    float:left;
    width:180px;
    display:inline;
}

img.pic {
    border:solid thin #000000;
}

img.profilepic {
    border:solid thin #000000;
    display:block;
    margin-left:auto;
    margin-right:auto;
}

.mousehand {
    cursor:pointer;
}
/* END
** Miscellaneous */

/* START
** PICTURE TAKER */
#videocontainer {
    margin: 0px auto;
    width: 500px;
    height: 375px;
}
#videoElement {
    width: 500px;
    height: 375px;
    background-color: #666;
}
#canvas {
    width: 500px;
    height: 375px;
    margin: 0px auto;
    background-color: #CCC;
}
/*
** END PICTURE TAKER */

RENDERED HTML FROM PHP

<div class="open" id="QuickSearchResults"><ul aria-expanded="true" id="QuickResultsMenu" class="dropdown-menu padding10">

<!-- Search Results -->
    <li class="smalltext">
        <a href="contact.php?Id=2352">Dave      </a>
    </li>


<!-- Search Results -->
    <li class="smalltext">
        <a href="contact.php?Id=1850">Dave      Fenstermaker</a>
    </li>


<!-- Search Results -->
    <li class="smalltext">
        <a href="contact.php?Id=3268">Dave      Hughes</a>
    </li>


<!-- Search Results -->
    <li class="smalltext">
        <a href="contact.php?Id=24870">Dave     Tello</a>
    </li>


<!-- Search Results -->
    <li class="smalltext">
        <a href="contact.php?Id=18998">Dave     Thigpen</a>
    </li>


<!-- Total Search Results -->
    <li class="">
        <form role="form" id="QuickResults" name="QuickResults">
        Show more results
        </form>
    </li>
</ul>
</div>

Here is a link to a jFiddle demo:

https://jsfiddle.net/v2p04nsa/

Oddly enough, this works. I used the rendered HTML from below in place of the php.

Head

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Roll Call For Infusionsoft</title>
    <link rel="icon" type="image/ico" href="https://avellanenterprises.com/favicon.ico">
    <link rel="stylesheet" href="<?php echo "css/bootstrap.min.css" ?>">
    <link rel="stylesheet" href="<?php echo "css/bootstrap-datepicker.css" ?>">
    <link rel="stylesheet" type="text/css" href="css/bsmaster.css">
    <script src="<?php echo "js/jquery.min.js" ?>"></script>
    <script src="<?php echo "js/jquery.validate.js" ?>"></script>
    <script src="<?php echo "js/additional-methods.js" ?>"></script>    
    <script src="<?php echo "js/bootstrap.min.js" ?>"></script>
    <script src="<?php echo "js/jquery.blockUI.js" ?>"></script>
</head>

Answer 1

I have used a different approach and since have gotten the links working. I had to use a table to output the data and then everything worked fine. I'm not sure why it worked on the JSfiddle but not on a live page. Either way, the tables worked out nicely so no more issues with outputting search results.

NEW PHP

<table class="table table-hover table-condensed">
<thead><tr><th>Full Name</th><th>Mobile Phone</th><th>Email Address</th></tr></thead><tbody>
<?php   

    //And we display the results 
    foreach($ContactSearch as $Results) : ?>
    
    <!-- Search Results -->
    <tr class="clickable-row" onclick="document.location = 'contact.php?Id=<?php echo $Results['Id'];?>';">
    <td><span class="glyphicon glyphicon-user">&nbsp;</span><?php echo $Results['FirstName'];?> <?php echo $Results['LastName'];?></td>
    <td><span class="glyphicon glyphicon-earphone">&nbsp;</span><?php echo $Results['Phone2'];?></td>
    <td><span class="glyphicon glyphicon-envelope">&nbsp;</span><?php echo $Results['Email'];?></td></tr>       
    <?php endforeach; ?>
    </tbody></table>