Ajax Jquery and php Page Loading
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax Jquery and php Page Loading</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.super').click(function(){
$('#container').fadeOut();
var a = $(this).attr('id');
$.post("ajax_page.php?id="+a, {
}, function(response){
setTimeout("finishAjax('container', '"+escape(response)+"')", 400);
});
});
});
function finishAjax(id, response){
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
</script>
</head>
<body>
<div style="float:left">
<ul class="menus">
<li><input type="button" name="test" class="super red button" id="1" value="Home" /></li>
<li><input type="button" name="test" class="super buy button" id="2" value="About" /></li>
<li><input type="button" name="test" class="super green button" id="3" value="Services" /></li>
</ul>
</div>
<div id="container">
<?php
include('dbcon.php');
$query = $conn->query("SELECT * FROM descriptions where page_type = 1 order by id desc");
while ($row = $query ->fetch_object()) {
$heading=$row->heading;
$text=$row->text;
?>
<label><?php echo $heading;?></label>
<br />
<p><?php echo $text;?></p>
<?php } ?>
</div>
<style>
ul.menus{
list-style:none;
margin:10px 0 0 0;
}
ul.menus li input {
display:block;
padding:8px 8px 8px 8px;
text-decoration:none;
color:#ddd;
font-size:22px;
text-shadow:1px 1px 1px #000;
margin:5px 10px;
background-color:#1f1f1f;
border:1px solid #222;
-moz-box-shadow:0px 0px 10px #000;
-webkit-box-shadow:0px 0px 10px #000;
box-shadow:0px 0px 10px #000;
background-repeat:no-repeat;
background-position:5px 50%;
opacity:0.9;
outline:none;
width:120px;
}
ul.menus li input:hover{
color:#fff;
border:1px solid #303030;
background-color:#212121;
opacity:1.0;
text-shadow:0px 0px 1px #fff;
}
#container{
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
padding:10px 20px 20px 20px;
text-align:justify;
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
height:300px; float:left;
width:400px;
}
#container label{
font-size:24px;
color:#336699;
font-weight:bolder;
}
</style>
</body>
</html>
//ajax_page.php
<?php
include("dbcon.php");
$getid = $_REQUEST['id'];
$sql = 'SELECT * FROM descriptions where page_type = "'.$getid.'" order by id desc';
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
while($row = mysqli_fetch_assoc($result)) {
$heading = $row["heading"];
$text = $row["text"];
echo "<label>$heading</label><br />";
echo "<p>$text</label></p>";
}
} else {
echo "0 results";
}
mysqli_close($conn);
?>
//dbcon.php
<?php
$conn = new mysqli('localhost','root','','testingdb');
if ($conn->connect_error) {
die('Error : ('. $conn->connect_errno .') '. $conn->connect_error);
}
?>
VIDEO
