Geek Answers Handbook

Bootstrap dropdowns do not work

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

It has several links and a search form. The search sends the request through AJAX, and then displays the results of the php file with a combo box.

I can get results for publication and get a drop-down menu, but links are not available. They are highlighted, and I see href below in the status bar, but I cannot click.

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, which is in php code, the links will work fine, but the style will be messed up. I can’t figure out how to do it right and be functional. Any help is 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 jFiddle demo:

https://jsfiddle.net/v2p04nsa/

Oddly enough, this works. I used the rendered HTML below instead of php.

Chapter

 <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>
+5
source share
1 answer

I used a different approach and have since received links. I had to use a table to output data, and then everything worked fine. I'm not sure why it worked on JSfiddle, but not on a live page. In any case, the tables are well developed, so there are no more problems with the 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>
0
source

More articles:


All Articles