article

Sunday, May 27, 2018

Ajax Jquery and php Page Loading

Ajax Jquery and php Page Loading

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!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>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//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);
?>
?
1
2
3
4
5
6
7
//dbcon.php
<?php
$conn = new mysqli('localhost','root','','testingdb');
if ($conn->connect_error) {
    die('Error : ('. $conn->connect_errno .') '. $conn->connect_error);
}
?>

Posted by ednalan at 5:45 AM . Under , .

Related Post