Cairo-Coders is the one place for high quality web development, Web Design and software development tutorials and Resources programming. Learn cutting edge techniques in web development, design and software development, download source components and participate in the community.
Showing posts with label Jquery-Ajax-PHP. Show all posts
Showing posts with label Jquery-Ajax-PHP. Show all posts
CREATE TABLE IF NOT EXISTS `paginate` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(60) NOT NULL, `message` text NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=51 ;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jquery ajax pagenation</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#results").load("fetch_pages.php", {'page':1} ); //initial page number to load
$(".paginate_click").click(function (e) {
$("#results").prepend('<div class="loading-indication"><img src="img/ajax-loader.gif" /> Loading...</div>');
var page_num = $(this).text(); //get page number from the clicked element
$('.paginate_click').removeClass('active'); //remove any active class
//post page number and load returned data into result element
$("#results").load("fetch_pages.php", {'page': page_num}, function(){
});
$(this).addClass('active'); //add active class to currently clicked element
return false; //prevent going to herf link
});
});
</script>
</head>
<body>
<?php
include("config.inc.php");
$results = mysqli_query($connecDB,"SELECT COUNT(*) FROM paginate");
$get_total_rows = mysqli_fetch_array($results); //total records
//break total records into pages
$pages = ceil($get_total_rows[0]/$item_per_page);
//create pagination
if($pages > 1)
{
$pagination = '';
$pagination .= '<ul class="paginate">';
for($i = 1; $i<$pages; $i++)
{
$pagination .= '<li><a href="#" class="paginate_click">'.$i.'</a></li>';
}
$pagination .= '</ul>';
}
?>
<p><h1 align="center">How to create a Jquery Ajax Pagenation</h1></p>
<div id="results"></div>
<?php echo $pagination; ?>
<style>
.paginate {
padding: 0px;
margin: 0px;
height: 30px;
display: block;
text-align: center;
}
.paginate li {
display: inline-block;
list-style: none;
padding: 0px;
margin-right: 1px;
width: 30px;
text-align: center;
background: #4CC2AF;
line-height: 25px;
}
.paginate .active {
display: inline-block;
list-style: none;
padding: 0px;
margin-right: 1px;
width: 30px;
text-align: center;
line-height: 25px;
background-color: #666666;
}
.paginate li a{
color:#FFFFFF;
text-decoration:none;
}
#results{
font: 12px Arial, Helvetica, sans-serif;
width: 400px;
margin-left: auto;
margin-right: auto;
}
.page_result{
padding: 0px;
}
.page_result li{
background: #E4E4E4;
margin-bottom: 5px;
padding: 10px;
font-size: 12px;
list-style: none;
}
.page_result .page_name {
font-size: 14px;
font-weight: bold;
margin-right: 5px;
}
#results .loading-indication{
background:#FFFFFF;
padding:10px;
position: absolute;
}
</style>
</body>
</html>
//fetch_pages.php
<?php
include("config.inc.php");
//sanitize post value
$page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
//validate page number is really numaric
if(!is_numeric($page_number)){die('Invalid page number!');}
//get current starting point of records
$position = ($page_number * $item_per_page);
//Limit our results within a specified range.
$results = mysqli_query($connecDB,"SELECT id,name,message FROM paginate ORDER BY id DESC LIMIT $position, $item_per_page");
//output results from database
echo '<ul class="page_result">';
while($row = mysqli_fetch_array($results))
{
echo '<li id="item_'.$row["id"].'"><span class="page_name">'.$row["name"].'</span><span class="page_message">'.$row["message"].'</span></li>';
}
echo '</ul>';
?>
Create a Jquery/Ajax, php, mysql - Style suggestion search
Database table
CREATE TABLE IF NOT EXISTS `search` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) NOT NULL,
`img` varchar(255) NOT NULL,
`desc` text NOT NULL,
`url` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create a Jquery/Ajax, php, mysqli - Style suggestion search</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
function find(textboxString) {
if(textboxString.length == 0) {
$('#resultbox').fadeOut(); // Hide the resultbox box
} else {
$.post("ajaxsuggestdata.php", {queryString: ""+textboxString+""}, function(data) { // Do an AJAX call
$('#resultbox').fadeIn(); // Show the resultbox box
$('#resultbox').html(data); // Fill the resultbox box
});
}
// Fade out the resultbox box when not active
$("input").blur(function(){
$('#resultbox').fadeOut();
});
// Safely inject CSS3 and give the search results a shadow
var cssObj = { 'box-shadow' : '#888 5px 10px 10px', // Added when CSS3 is standard
'-webkit-box-shadow' : '#888 5px 10px 10px', // Safari
'-moz-box-shadow' : '#888 5px 10px 10px'}; // Firefox 3.5+
$("#resultbox").css(cssObj);
}
</script>
</head>
<body>
<div style="margin-left:50px">
<div><h2>What are you looking for?</h2></div>
<form id="searchwrapper">
<div>
<input type="text" size="30" class="searchbox" value="" id="textboxString" onkeyup="find(this.value);" />
</div>
<div id="resultbox"></div>
</form>
</div>
<style>
body, div, img, p { padding:0; margin:0; }
a img { border:0 }
body { font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; }
#searchwrapper {
width:310px;
height:40px;
background-image:url(img/searchbox.jpg);
background-repeat:no-repeat;
padding:0px;
margin:0px;
position:relative;
}
#searchwrapper form { display:inline ; }
.searchbox {
border:0px;
background-color:transparent;
position:absolute;
top:5px;
left:9px;
width:256px;
height:28px;
color:#FFFFFF;
}
#dbresults { border-width:1px; border-color:#919191; border-style:solid; width:310px;
font-size:10px; margin-top:20px; -moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
padding-top:42px;
}
#dbresults a { display:block; background-color:#D8D6D6; clear:left; height:56px; text-decoration:none; }
#dbresults a:hover { background-color:#b7b7b7; color:#ffffff; }
#dbresults a img { float:left; padding:5px 10px; }
#dbresults a span { color:#555555; }
#dbresults a:hover span { color:#f1f1f1; }
</style>
</body>
</html>
//ajaxsuggestdata.php
<p id="dbresults">
<?php
$db = new mysqli('localhost', 'root', '', 'testingdb');
if(!$db) {
echo 'ERROR: Could not connect to the database.';
} else {
// Is there a posted query string?
if(isset($_POST['queryString'])) {
$queryString = $db->real_escape_string($_POST['queryString']);
// Is the string length greater than 0?
if(strlen($queryString) >0) {
$query = $db->query("SELECT * FROM searchs WHERE name LIKE '%" . $queryString . "%' ORDER BY name LIMIT 5");
if($query) {
while ($result = $query ->fetch_object()) {
echo '<a href="'.$result->url.'">';
echo '<img src="img/'.$result->img.'" alt="" />';
$description = $result->desc;
if(strlen($description) > 80) {
$description = substr($description, 0, 80) . "...";
}
echo '<span>'.$description.'</span></a>';
}
} else {
echo 'ERROR: There was a problem with the query.';
}
}else {
// Dont do anything.
} // There is a queryString.
}else {
echo 'There should be no direct access to this script!';
}
}
?>
</p>
Crop image before upload and insert to database using PHP Mysqli and CropperJS
Cropper.js is a JavaScript library for cropping image.
With the Cropper.js, you can select an specific area of an image, and then upload the coordinates data to server-side to crop the image, or crop the image on browser-side directly.
//data.php
<?php
$link = mysql_connect('localhost', 'root', '');
if (!$link) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("test");
if(isset($_POST['queryString'])) {
$queryString = $_POST['queryString'];
if(strlen($queryString) >0) {
$query = mysql_query("SELECT country FROM countries WHERE country LIKE '$queryString%' LIMIT 10");
if($query) {
echo '<ul>';
while ($result = mysql_fetch_array($query)) {
echo '<li onClick="fill(\''.addslashes($result["country"]).'\');">'.$result["country"].'</li>';
}
echo '</ul>';
} else {
echo 'OOPS we had a problem :(';
}
} else {
}
} else {
echo 'There should be no direct access to this script!';
}
?>
