lundi 20 avril 2015

Bootstrap dropdown links not working

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!

Aucun commentaire:

Enregistrer un commentaire