我有引导标签和过滤器。当用户选择过滤器并提交时,将生成ajax调用,并且选项卡应显示内容。
<ul class="nav nav-tabs " role="tablist">
<li class="active col-md-3"><a data-toggle="tab" href="#home">Notes</a></li>
<li class="col-md-3"><a data-toggle="tab" href="#menu1">Question Bank</a></li>
<li class="col-md-3"><a data-toggle="tab" href="#menu2">Summary</a></li>
<li class="col-md-3"><a data-toggle="tab" href="#menu3">Videos</a></li>
</ul>
<hr>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<?php
include "notes.php"
?>
<br><br><hr>
<div class="col-md-12">
</div>
</div>
Notes.php包含过滤器的代码,其形式为
<script type="text/javascript">
$(function(){
$('input[type=submit]').click(function(){
$.ajax({
type: "GET",
url: "filter_form.php",
data: $("#filter_search").serialize(),
beforeSend: function(){
$('#home').html('<img src="/img/loading.gif" />');
},
success: function(data){
$('#home').html(data);
}
});
});
});
</script>
form action="" method="GET" id="filter_search">
<ul class="nav navbar-nav container-fluid col-md-12">
<li class="col-md-3">
<select class="form-control dropdown-toggle" data-toggle="dropdown" name="select_category">
<option value="category">Select Category</option>
<?php
$sql1 = mysqli_query($conn,"call category_dropdown()");
while($row = mysqli_fetch_array($sql1))
{
echo "<option value='" . $row['category'] ."'>" . $row['category'] . "</option>";
}
mysqli_free_result($sql1);
mysqli_next_result($conn);
?>
</select>
</li>
<li class="col-md-3">
<select class="form-control dropdown-toggle" data-toggle="dropdown" name="select_course"></a>
<option value="course">Select Course</option>
<?php
$sql2 = mysqli_query($conn,"call courses_dropdown()");
while($row = mysqli_fetch_array($sql2))
{
echo "<option value='" . $row['courses'] ."'>" . $row['courses'] . "</option>";
}
mysqli_free_result($sql2);
mysqli_next_result($conn);
?>
</select>
</li>
<li class="col-sm-3">
<select class="form-control dropdown-toggle" name="select_subject">
<option value="subjects">Select Subjects</option>
<?php
$sql3 = mysqli_query($conn,"call subject_dropdown()");
while($row = mysqli_fetch_array($sql3))
{
echo "<option value='" . $row['subjects'] ."'>" . $row['subjects'] . "</option>";
}
mysqli_free_result($sql3);
mysqli_next_result($conn);
?>
</select>
</li>
<li class="col-md-3">
<input type="submit" name="filter" class="btn form-control btn-warning" value="Filter Results">
</li>
</ul>
</form>
filter_search.php
<?php
include 'includes/dbconfig.php';
if(isset($_GET['id']))
{
$id=$_GET['id'];
$start=($id-1)*$limit;
}
else{
$id=1;
}
if(isset($_GET['filter']))
{
$start = 0;
$limit = 16;
$category = $_GET['select_category'];
$course = $_GET['select_course'];
$subject = $_GET['select_subject'];
$sql = mysqli_query($conn,"call filter('category','course','subject')") or die('Query failed: '. mysqli_error($conn));
while($row = mysqli_fetch_array($sql))
{
$title = $row['title'];
$description = $row['description'];
$url = $row['content_url'];
$icon = $row['thumb_icon'];
?>
<div class="col-md-3">
<a href="<?php echo $url ;?>">
<div class="well well-sm">
<img class="img" alt="PDF" src="<?php echo $icon ;?>" >
<h4><small><?php echo $title ; ?></small></h4>
<p> <a data-toggle="modal" data-target="#myModal">Preview</a></p>
</div>
</a>
</div>
<?php
}
}
?>