AJAX How to make a call to load more commets

0

I want you to upload the comments two by two with an ajax call using a button

-- phpMyAdmin SQL Dump
-- version 4.8.1
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Aug 03, 2018 at 05:05 AM
-- Server version: 10.1.33-MariaDB
-- PHP Version: 7.2.6

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: 'blog'
--

-- --------------------------------------------------------

--
-- Table structure for table 'comments'
--

CREATE TABLE 'comments' (
  'IDComment' int(11) NOT NULL,
  'Comment' varchar(200) NOT NULL,
  'IDUser' int(11) NOT NULL,
  'IDPost' int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- --------------------------------------------------------

--
-- Table structure for table 'posts'
--

CREATE TABLE 'posts' (
  'IDPost' int(11) NOT NULL,
  'IDUser' int(11) NOT NULL,
  'Title' varchar(200) NOT NULL,
  'Content' varchar(200) NOT NULL,
  'Date' timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table 'posts'
--

INSERT INTO 'posts' ('IDPost', 'IDUser', 'Title', 'Content', 'Date') VALUES
(14, 1, 'first', '1', '2018-08-03 01:42:12'),
(15, 1, 'second2', '2', '2018-08-03 01:42:16'),
(16, 1, '3333', '33333', '2018-08-03 01:42:19'),
(17, 1, '4444', '4444', '2018-08-03 01:42:22');

-- --------------------------------------------------------

--
-- Table structure for table 'user'
--

CREATE TABLE 'user' (
  'IDUser' int(11) NOT NULL,
  'username' varchar(20) NOT NULL,
  'password' varchar(20) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table 'user'
--

INSERT INTO 'user' ('IDUser', 'username', 'password') VALUES
(1, 'admin', '123'),
(2, 'abner', '123');

--
-- Indexes for dumped tables
--

--
-- Indexes for table 'comments'
--
ALTER TABLE 'comments'
  ADD PRIMARY KEY ('IDComment'),
  ADD KEY 'IDPost' ('IDPost'),
  ADD KEY 'IDUser' ('IDUser');

--
-- Indexes for table 'posts'
--
ALTER TABLE 'posts'
  ADD PRIMARY KEY ('IDPost'),
  ADD KEY 'IDUser' ('IDUser');

--
-- Indexes for table 'user'
--
ALTER TABLE 'user'
  ADD PRIMARY KEY ('IDUser');

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table 'comments'
--
ALTER TABLE 'comments'
  MODIFY 'IDComment' int(11) NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table 'posts'
--
ALTER TABLE 'posts'
  MODIFY 'IDPost' int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=18;

--
-- AUTO_INCREMENT for table 'user'
--
ALTER TABLE 'user'
  MODIFY 'IDUser' int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;

--
-- Constraints for dumped tables
--

--
-- Constraints for table 'comments'
--
ALTER TABLE 'comments'
  ADD CONSTRAINT 'comments_ibfk_1' FOREIGN KEY ('IDPost') REFERENCES 'posts' ('IDPost') ON DELETE CASCADE ON UPDATE CASCADE,
  ADD CONSTRAINT 'comments_ibfk_2' FOREIGN KEY ('IDUser') REFERENCES 'user' ('IDUser') ON DELETE CASCADE ON UPDATE CASCADE;

--
-- Constraints for table 'posts'
--
ALTER TABLE 'posts'
  ADD CONSTRAINT 'posts_ibfk_1' FOREIGN KEY ('IDUser') REFERENCES 'user' ('IDUser') ON DELETE CASCADE ON UPDATE CASCADE;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

/* HOME PAGE STYLE SHEET */ 
@import url('https://fonts.googleapis.com/css?family=Raleway:400,700');

#main-wrapper{
	color: #2d3436;
	margin: 0;
	padding: 0;
	font-family: 'Raleway', sans-serif;
}
#main-wrapper h2{
	font-size: 75px;
	bottom: 0;
	padding: 0;
	height: 50px;
}
#main-wrapper div.posts{
	color: blue;
}
.complete_post{
	width: 700px;
	border-radius: 10px;
	border: 2px solid gray;
	padding-left: 10px;
	padding-top: 15px;
	padding-bottom: 0px;
	margin-top: 0px;
	margin-bottom: 40px;
	word-wrap: break-word;
	color: white;
	background-color: #273c75;
}
h3{
	height: 25px;
	width: 700px;
	padding-top: 4px;
	padding-left: 10px;
	border: 3px solid black;
	border-radius: 10px;
	margin-bottom: 0px;
	color: white;
	background-color: #192a56;
	text-align: center;
}
.post_title{
	font-weight: bold;
	color: white;
}
.post_content{
	color: white;
}

nav{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 55px;
	padding: 20px 100px;
	box-sizing: border-box;
	transition: .5s;
	background-color: #2c3e50;
}
nav a.u{
	text-transform: uppercase;
	color: white;
	font-weight: bolder;
}
nav ul{
	float: right;
	margin: 0;
	padding: 0;
	display: flex;
}
nav ul li{
	list-style: none;
}
nav ul li a{
	list-style: 80px;
	color: #ecf0f1;
	padding: 5px 20px;
	font-family: 'Raleway', sans-serif;
	text-decoration: none;
	text-transform: uppercase;
	transition: .2s;
}
nav ul li a.active{
	color: #FFF;
	background-color: #16a085;
	font-weight: bolder;
}
nav ul li a.logout:hover{
	color: #FFF;
	background-color: #c23616;
}
nav ul li a:hover{
	color: #FFF;
	background-color: #1abc9c;
}
#logout_btn{
	margin-top: 10px;
	background-color: #c0392b;
	padding: 10px;
	border-radius: 5px;
	border-color: #e74c3c;
	color: white;
	width: 20%;
	text-align: center;
	margin-bottom: 10px;
	font-size: 30px;
	font-weight: bold;
	font-family: 'Raleway', sans-serif;
}
#logout_btn:hover{
	color:black;
	background-color:white;
	border-color: black;
}
.morebox{
	font-weight:bold;
	color:#333333;
	text-align:center;
	border:solid 1px #333333;
	padding:8px;
	margin-top:8px;
	margin-bottom:8px;
	-moz-border-radius: 6px;-webkit-border-radius: 6px;
}
.morebox a{ 
	color:#333333; text-decoration:none
}
.morebox a:hover{ 
	color:#333333; text-decoration:none
}
<?php 
	session_start();
	require 'dbconfig/config.php';
	if ($_SESSION == null) {
		header("location:index.php");
	}
 ?>

<!DOCTYPE html>
<html>

<head>
  <title>My Posts</title>
  <link rel="stylesheet" href="css/myposts.css">
  <script src="js/sweetalert2.all.min.js"></script>
  <script src="js/jquery-3.3.1.min.js"></script>
  <script>
    AQUI AJAX
  </script>
</head>

<body style="background-color: #FFFF" style="color: #2d3436">
  <div id="main-wrapper">
    <h2>MY POSTS</h2>
    <nav>
      <a class="u">
        <?php 
	echo $_SESSION['username'];
?>
      </a>
      <ul>
        <li><a href="homepage.php" class="active">Make a Post!</a></li>
        <li><a href="#">My Posts</a></li>
        <li><a href="#">Posts</a></li>
        <li><a href="#">Account</a></li>
        <li><a href="#">Info</a></li>
        <li><a href="destroy.php" class="logout">LogOut</a></li>
      </ul>
    </nav>

    <?php 
	$username = $_SESSION['username'];

	$sql = "SELECT posts.Title, posts.Content, posts.Date FROM posts INNER JOIN user ON user.IDUser = posts.IDUser WHERE user.username = '$username' LIMIT 2";

	$result = mysqli_query($con, $sql);
	$resultCheck = mysqli_num_rows($result);

	if ($resultCheck > 0) {
		while ($row = mysqli_fetch_assoc($result)) {
			echo "<h3>	POST </h3>" . $row['Date'];
			echo "<div class ='complete_post' >" . "<a class = 'post_title'>" . $row['Title'] . "</a>" . 
				"<br>" . "<a class = 'post_content'>" . $row['Content'] . "</a>" . "<br><br>" . "</div>";
		}
	}
 ?>

    <button class="more" id="more">Show more</button>
  </div>
  </div>
</body>

</html>
    
asked by Abneer 03.08.2018 в 05:09
source

0 answers