I want to display the iframe inside a div. I want to display the data inside the iframe. So I've tried like this:
nav-bar.php:
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" title="Report">Report<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Dashboard
</li>
</ul>
</li>
report.php:
<!DOCTYPE html>
<html lang="en">
<head>
<?php include("heading.php"); ?>
</head>
<body role="document">
<?php include("includes/inc-header.php"); ?>
<div class="panel-body">
<div class="col-sm-12">
<iframe id="iframe_report" name="iframe_report" style="border:dotted; width:100%; height:450px;"></iframe>
</div>
</div>
</body>
</html>
content.php:
<?php
include("configuration.php");
$report = $_GET["report"];
$title = $_GET["title"];
$pagetitle = $title;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<?php include("heading.php"); ?>
</head>
<body role="document">
<?php include("nav-bar.php"); ?>
<div class="panel panel-default">
<div class="panel-heading">
<?php echo $title; ?>
<input type="hidden" id="input" name="input" value="<?php echo $report; ?>">
</div>
<div class="panel-body">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="table_list" class="table table-striped table-bordered hide">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>List</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<script type="text/javascript" language="javascript">
jQuery(document).ready(function() {
jQuery.ajaxSetup({ cache: false });
var input_report = jQuery("#input").val();
var table_id = "#table_report_" + input;
jQuery(table_id).removeClass("hide").addClass("show");
jQuery(table_id).DataTable({
paging: false,
select: true,
ajax: "reports-db.php?report=" + input_report,
});
});
</script>
This is how I tried. When I click the option in the nav-bar, the data should be fetched and displayed in the same page. But, what happens is, when I click the option, it opens in the new page. But, I want to display it in the same page and all the nav-bar options should also be displayed. I've want it in such a way that, the nav-bar should be displayed and below that there lies a div, inside which the iframe should be displayed. But, don't know what's redirecting it to the new window. Can someone guide me?
Related
I am using DataTables to have a pagination.
I think I set the script correctly, since I followed the instruction in their website. But feel free to pinpoint if there's any wrong/mistake to the indicated script link
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Admin Reservation Management</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/datepicker3.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function(){
$('#myTable').DataTable();
});
</script>
<!--Custom Font-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<style type="text/css">
td,tr {
white-space: nowrap;
width: 45%;
}
th{
text-align: center;
}
form {
display: inline;
}
</style>
</head>
And now this is my table and stuff, I am fetching the datas from my database.
I did some research here in Stackoverflow, regarding to this issue and the results that I've found was they did not put and which I included, but feel free to pinpoint if I haven't included any.*
php
<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
<div class="row">
<ol class="breadcrumb">
<li> <em class="fa fa-home"></em></li>
<li class="active">Manage Room</li>
</ol>
</div>
<div class="row">
<div class="col-lg-12">
<br>
<h3> Super Admin Reservation Management </h3>
<hr>
<!-- ################### FUNCTIONALITY ####################### -->
<!-- ################### FUNCTIONALITY ####################### -->
<div class="container">
</div>
<br>
<div class="container">
<table class="table table-bordered" id="myTable" style="background-color: white;" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th> Room Number</th>
<th> Room Availability </th>
<th> Action </th>
</tr>
</thead>
<!-- ############################################# FETCHING DATA FROM THE DATABASE ######################################################### -->
<?php
$connection = mysqli_connect("localhost", "root");
$db = mysqli_select_db($connection, 'db_hotelreservation');
$query = "SELECT * FROM tbl_reservation WHERE room_status = 'Pending' OR room_status ='Booked'";
$query_run = mysqli_query($connection, $query);
$resultCheck = mysqli_num_rows($query_run);
if($resultCheck > 0)
{
while($row = mysqli_fetch_assoc($query_run))
{
?>
<tbody>
<tr>
<td style="display: none;"> <?php echo $row['ID'];?> </td>
<td> <?php echo $row['room_number']; ?></td>
<td> <?php echo $row['room_status'];?></td>
<td style="display: none;"> <?php echo $row['room_type'];?> </td>
<td style="display: none;"> <?php echo $row['first_name'] . " " .$row['last_name']?> </td>
<td style="display: none;"> <?php echo $row['check_in'];?> </td>
<td style="display: none;"> <?php echo $row['check_out'];?> </td>
<td style="display: none;"> <?php echo $row['contact_number'];?> </td>
<td style="display: none;"> <?php echo $row['numberof_days'] ." ". "day/s";?> </td>
<td style="display: none;"> <?php echo $row['calculated_price'];?> </td>
<td>
<form action="approve.php" method="POST" onclick="return confirm('Are you sure you want to Approve this Booking?');">
<input type="hidden" name="id" value="<?php echo $row['ID'] ?>" style="">
<input type="submit" name="update" class="btn btn-success" value="Approve">
</form>
<button type="button" class="btn btn-primary viewbtn">View Details</button>
</td>
</tr>
</tbody>
<?php
}
}
else{
echo "No Records Found";
}
?>
</table>
</div>
</div>
</div>
</div>
This might be because of delayed data binding, you can try datatable ajax approach to bind the data. Refer datatable option.
I am new to ajax. I am using spring mvc, hibernate and Ajax. My ajax is able to persist to DB but to view the list in the table is not working. Could anyone help me on that. Below is the code snippet:
Once the user click on create button (
Create New Customer) Then a modal dialog opens and the user is asked to put name and age. Once the create button with in the modal is clicked it calls the ajax function and i see the value gets persisted to DB but am not able to get the list with in the table.
my JSP(ajaxExmpl):
<%# taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset="utf-8"">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript">
function doAjaxPost() {
// get the form values
var name = $('#name').val();
var age = $('#age').val();
$.ajax({
type : "POST",
url : "createP",
data : "name=" + name + "&age=" + age,
success : function(response) {
// we have the response
alert('data saved to DB');
}
});
}
</script>
</head>
<body>
<div class="navbar-inner">
</div>
<a href="#" class="createCustomer" data-toggle="modal"
data-target="#createCustomerModal">Create New Customer</a>
<!-- Table to view the list saved in database -->
<section class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Person List</h3>
</div>
<div class="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<c:forEach var="person" items="${persons}" varStatus="status">
<tr>
<td><c:out value="${status.count}" /></td>
<td>${person.name}</td>
<td>${person.age}</td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
Actions <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a>Edit</a></li>
<li>Delete</li>
</ul>
</div>
</td>
</tr>
</c:forEach>
<tbody>
</table>
</div>
</div>
</section>
<!-- All modal dialog goes below this line -->
<!--create customer modal -->
<div id="createCustomerModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Create New Customer
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<table class="form-table">
<tbody>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="pool-name">Name:</label></td>
<td><input type="text" id="name" class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Age:</label></td>
<td><input type="text" id="age" class="form-control" /></td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<div>
<input type="submit" id="createNewCustomer"
onclick="doAjaxPost();" value="Create" class="btn btn-default" />
<button type="button" class="btn btn-default" data-dismiss="modal">close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
My Controller:
#RequestMapping(value="/createP", method=RequestMethod.POST)
public String addPerson(Person person, Model model) {
personService.addPerson(person);
return "redirect:/listP";
}
#RequestMapping(value="/listP", method=RequestMethod.GET)
public String listPerson(Model model) {
model.addAttribute("persons", personService.getAllPersons());
return "ajaxExmpl";
}
Since you are making Ajax call it was not refreshing the page hence you new model attribute is not getting loaded. You need to do partial refresh or full page refresh in success function. For full refresh, In success method try to refresh your jsp by putting window.location = '/CRUDWebUI/listP'
I am using BOOTSTRAP ACCORDIAN to show invited speakers in our website.
I am in Wordpress 4.8.
The code used addtionally is the following:
function toggleChevron(e) {
var theAccordion = $('#accordion');
$(e.target)
.prev('.panel-heading')
.find('i.indicator')
.toggleClass('glyphicon-minus glyphicon-plus');
//$('#accordion .panel-heading').css('background-color', 'green');
theAccordion.find('.panel-heading').removeClass('highlight');
$(e.target).prev('.panel-heading').addClass('highlight');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);
$('#accordion').on('show.bs.collapse', function () {
$('#accordion .in').collapse('hide');
});
I am getting the panel heading and body from a php:
PHP:
<div class="clearfix panel-group" id="accordion" >
<?php
global $wpdb;
$result = $wpdb->get_results( "SELECT * FROM `Invited_Speakers_auto`;");
foreach ( $result as $print ) { ?>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#<?php echo $print->Last_Name;?>"> <?php echo $print->First_Name;?> <?php echo $print->Last_Name;?>, <?php echo $print->Institute_Address;?>
</a> </h4>
</div>
<div id="<?php echo $print->Last_Name;?>" class="panel-collapse collapse in">
<div class="panel-body">
<img style="border-radius: 10%; padding: 10px; float: left;" src="<?php echo $print->Image_link;?>" alt="" width="20%" align="middle" />
<table style="width:79%;float: right;">
<tbody>
<td ><?php echo $print->Designation;?> </td>
</tr>
<tr>
<td style="display:block; width:50%;"><?php echo $print->Department_Address;?></td>
</tr>
<tr>
<td> Email Id: <?php echo $print->Email_Id;?> </td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td >Research Interests</td>
<td>:</td>
<td> <?php echo $print->Research_Interests;?></td>
</tr>
<tr>
<td>
Achievements
</td>
<td> : </td>
<td> <?php echo $print->Acheivements;?>
<button style="float:right;"><a style="color: white;" href="Home_page_Link" target="_blank" rel="noopener"> More Info </a> </button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<?php } ?>
</div>
When I am running the above code, all works fine except the following issue:
All collapsible body is opened when the page gets refreshed.
For successive double click on any panel-heading all settle down normally.
What is the problem?
I dont want any of the body should open when the page gets refreshed. Only when the user click one of the panel heading, the corresponding panel-body should be displayed and the rest should remain invisible.
PS: I have added all the javascript files at the footer.
Is that a problem??
Is it a running error?
Kindly clarify this. Click here to visit the page. In that Invited Speaker section has this problem.
Thank you in advance.
Try removing the in class from the panel-collapse element. Bootstrap adds this automatically when opening an expander panel - having this class set by default causes each panel to appear open.
Trying to pass an attribute value to PHP through an jQuery post method. It is successful according to the console.log but the page is not refreshing the $_POST value on the page. However, it shows in the data on success.
jQuery post data:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dracanon Application</title>
<script src="js/jquery-2.2.4.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/bootstrap-theme.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="css/jquery-ui.css" type="text/css">
</head>
<body>Array
(
[id] => 22
)
data from ajax post:22<br/><form name="test" method="post" action="">
<div class="bs-example">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#newaltrequest">New Requests</a></li>
<li><a data-toggle="tab" href="#archive">Archive</a></li>
</ul>
<div class="tab-content">
<div id="newaltrequest" class="tab-pane fade in active">
<h3>New Requests</h3>
<table class="table table-striped" id="application-table">
<div class="display-limit">
<div class="btn-group page-limit">
<button id="pagelimit" type="button" class="form-control btn btn-default btn-small dropdown-toggle" data-toggle="dropdown">
<span>10</span><span class="caret"></span>
</button>
<input type="hidden" id="limit-selection" name="limit-selection" />
<ul class="dropdown-menu limit-selector" role="menu" >
<li>5</li>
<li>10</li>
<li>25</li>
<li>50</li>
<li>All</li>
</ul>
<script>
$('.limit-selector li a').click(function (e) {
var value = $(this).data("value");
$('#limit-selection').val(value);
document.getElementById("classForm").submit();
});
</script>
</div>
</div>
<div class="button-container">
<script>
/* limit page dropdown */
$('.dropdown-menu a').on('click', function(){
$('.dropdown-toggle').html('<span>'+$(this).html() + '</span><span class="caret"></span>');
});
/* End limit page dropdown */
</script>
</div>
<thead>
<tr>
<th>Username</th>
<th>Alt Character</th>
</tr>
</thead>
<tbody>
<tr>
<tr>
<td>bwilson</td><td>Bracchius</td><td class='btnreview'><button type='button' class='btn btn-primary btn-small reviewbutton' data-toggle='modal'
data-target='#view_detail_modal'
data-requestid='22'>Review</button></td></tr><tr><td>dcaldessa</td><td>sojurne</td><td class='btnreview'><button type='button' class='btn btn-primary btn-small reviewbutton' data-toggle='modal'
data-target='#view_detail_modal'
data-requestid='23'>Review</button></td>
</tr>
<!--<script>
$(document).ready(function () {
$(document).on('click','.reviewbutton',function () {
var requestid = $(this).attr('data-requestid');
console.log(window.location);
$.ajax({
type:"POST",
url: "../index.php",
data: {id: 13},
success: function (data) {
console.log("data-resolved");
}
});
});
});
</script>--> </tr>
</tbody>
</table>
</div>
<div id="archive" class="tab-pane fade">
<h3>Archive</h3>
<table class="table table-striped" id="archive-table">
<div class="display-limit">
<div class="btn-group page-limit">
<button id="pagelimit" type="button" class="form-control btn btn-default btn-small dropdown-toggle" data-toggle="dropdown">
<span>10</span><span class="caret"></span>
</button>
<input type="hidden" id="limit-selection" name="limit-selection" />
<ul class="dropdown-menu limit-selector" role="menu" >
<li>5</li>
<li>10</li>
<li>25</li>
<li>50</li>
<li>All</li>
</ul>
<script>
$('.limit-selector li a').click(function (e) {
var value = $(this).data("value");
$('#limit-selection').val(value);
document.getElementById("classForm").submit();
});
</script>
</div>
</div>
<div class="button-container">
<script>
/* limit page dropdown */
$('.dropdown-menu a').on('click', function(){
$('.dropdown-toggle').html('<span>'+$(this).html() + '</span><span class="caret"></span>');
});
/* End limit page dropdown */
</script>
</div>
<thead>
<tr>
<th>Username</th>
<th>Alt Character</th>
</tr>
<tbody>
<tr>
<td>Sample Data</td>
<td>Sample Data</td>
</tr>
</tbody>
</thead>
</table>
</div>
</div>
<script>
$(document).on('click','.reviewbutton',function () {
var requestid = $(this).attr('data-requestid');
var value = {id: requestid};
console.log(window.location);
$.post("testing.php",value, function (data) {
console.log(data);
});
});
</script>
</body>
</html>
so it shows that the data is being returned but it is not refreshing the $_POST array to display the values on the screen.
Below is the original form:
<?php
include "includes/header.php";
include "includes/functions.php";
print_r($_POST);
if (isset($_POST['id'])){
print_r("data from ajax post:".$_POST['id']."<br/>");
}else if (isset($_POST['id'])){
echo "data not found";
}
if (!isset($_SESSION['requestlimit'])) {
$_SESSION['requestlimit'] = 10;
}else if (isset($_POST['limit-selection'])){
if($_POST['limit-selection'] != null) {
$_SESSION['requestlimit'] = $_POST['limit-selection'];
}
}
if (!isset($_SESSION['archivelimit'])) {
$_SESSION['archivelimit'] = 10;
}else if (isset($_POST['limit-selection'])){
if($_POST['limit-selection'] != null) {
$_SESSION['archivelimit'] = $_POST['limit-selection'];
}
}
$start=0;
$limit=$_SESSION['archivelimit'];
if(isset($_GET['pid']))
{
$id = $_GET['pid'];
$start = ($id-1)*$limit;
}
else
{
$id=1;
}
?>
<form name="test" method="post" action="">
<div class="bs-example">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#newaltrequest">New Requests</a></li>
<li><a data-toggle="tab" href="#archive">Archive</a></li>
</ul>
<div class="tab-content">
<div id="newaltrequest" class="tab-pane fade in active">
<h3>New Requests</h3>
<table class="table table-striped" id="application-table">
<?php include "includes/pagelimit_button.php"?>
<thead>
<tr>
<th>Username</th>
<th>Alt Character</th>
</tr>
<tbody>
<tr>
<?php include "includes/alt_requestlist.php"?>
</tr>
</tbody>
</thead>
<?php /*include "includes/view_alt_request.php" */?>
</table>
</div>
<div id="archive" class="tab-pane fade">
<h3>Archive</h3>
<table class="table table-striped" id="archive-table">
<?php include "includes/pagelimit_button.php"?>
<thead>
<tr>
<th>Username</th>
<th>Alt Character</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sample Data</td>
<td>Sample Data</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
<script>
$(document).on('click','.reviewbutton',function () {
var requestid = $(this).attr('data-requestid');
var value = {id: requestid};
console.log(window.location);
$.post("testing.php",value, function (data) {
console.log(data);
});
});
</script>
</body>
</html>
Could I get some suggestions or assistance in the right direction to resolving this issue?
The $_POST variable is evaluated at the serer side when you request the page. When you do the AJAX request, the $_POST variable is evaluated in a separate page, which returned values will be evaluated on the browser side in the success method. The $_POST variable will therefor not be updated, but you should use javascript or jQuery to process the returned value and place them in your page at the positions of where the values of the $_POST variable are.
This is my sample code for the template.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>WebLAB</title>
<link rel="stylesheet" href="<?php echo base_url()?>assets/css/bootstrap.css" />
</head>
<body class="container">
<header class="panel-heading" role="navigation">
<a class="navbar-brand" href="<?php echo base_url(); ?>">WebLAB</a>
<nav>
<ul class="nav nav-tabs" role="tablist">
<li>Register</li>
<li>About this site</li>
</ul>
</nav>
</header>
<section class="container">
<!--- Dynamic content is loaded here!-->
<?php if(isset($content)) echo $content; ?>
</section>
<footer class="panel-footer text-center">
<span><small>All Rights Reserved | © <?php echo date('Y'); ?> Christ the King College-ICT Team</small></span>
</footer>
<script type="text/javascript" src="<?php echo base_url()?>assets/js/jQuery-1.10.2.js"></script>
<script type="text/javascript" src="<?php echo base_url()?>assets/js/bootstrap.js"></script>
</body>
</html>
This code below is the content I am LOADING to the code above (It's embedding the content dynamically). My problem is that the Javascript code I am trying to apply to an element doesn't respond. I have tried also adding the script on the main page above.
<script type="text/javascript">
$(document).ready(function(){
$('#jq').click(function(){
alert("Hi");
});
});
</script>
<section class="col-md-8">
<p>
<h2 id="jq">Register Your Account here to Login!</h2>
<p>
<article>
<p>
You can only access your account when the admin
approves your request for registration.
</p>
</article>
</section>
<section class="col-md-4">
<form method="post" class="regform" action="<?php echo base_url();?>portal/register" role="form">
<div class="form-group">
<label for="Username" id="sample">Username:</label>
<input type="Username" class="form-control" id="Username" name="username" placeholder="example#mail.com" required>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" name="password" required>
</div>
<div class="form-group">
<label for="pwd">Retype-Password:</label>
<input type="password" class="form-control" id="pwd" name="repassword" required>
</div>
<button type="submit" class="btn btn-default">Register</button>
</form>
</section>
I am using this technique in CodeIgniter 3 controller.
public function registration() {
$data = null;
$data['content'] = $this->load->view('pages/registration', $data, true);
$this->load->view('template/temp_portal.php', $data);
}
Sorry for the messy code. Your help is much appreciated. This is just a sample code BTW.
Your problem is you are using jquery before loading the library. load your JS file including jquery library in your head tag. It will work i.e
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>WebLAB</title>
<link rel="stylesheet" href="<?php echo base_url()?>assets/css/bootstrap.css" />
<script type="text/javascript" src="<?php echo base_url()?>assets/js/jQuery-1.10.2.js"></script>
<script type="text/javascript" src="<?php echo base_url()?>assets/js/bootstrap.js"></script>
</head>
<body class="container">
<header class="panel-heading" role="navigation">
<a class="navbar-brand" href="<?php echo base_url(); ?>">WebLAB</a>
<nav>
<ul class="nav nav-tabs" role="tablist">
<li>Register</li>
<li>About this site</li>
</ul>
</nav>
</header>
<section class="container">
<!--- Dynamic content is loaded here!-->
<?php if(isset($content)) echo $content; ?>
</section>
<footer class="panel-footer text-center">
<span><small>All Rights Reserved | © <?php echo date('Y'); ?> Christ the King College-ICT Team</small></span>
</footer>
</body>
</html>
Try this and check your console what error showing now
Double check your jQuery library link is ok or not