Every 5 seconds I'm fetching data from database for my notification. However, every 5 seconds the notification div is closing, and I want the div to stay open. How can I achieve this?
NOTE The ajax calling,fetching is working. I just want my notification div to stop closing when the setinterval triggered.
Here's the div
home.php
<div id="notificationsss">
</div>
$(document).ready(function()
{
loadnotif();
setInterval( loadnotif, 5000 );
$("#notificationsss").on("click",$("#notificationLink"), function() {
$("#notificationContainer").fadeToggle(300);
$("#notification_count").fadeOut("slow");
});
});
function loadnotif(){
$.ajax({
url:'getrecords.php',
method:'POST',
data:{
"loadnotif": 1
},
success:function(data){
$('#notificationsss').html(data);
}
});
}
getrecords.php
if(isset($_POST['loadnotif'])){
$sql = "SELECT * FROM notification";
$result = mysqli_query($con,$sql);
$count = mysqli_num_rows($result);
$output = ' <ul id="main-menu" class="nav navbar-nav navbar-right">
<li class="dropdown hidden-xs">
<li id="notification_li">
<a href="#" id="notificationLink"><i class="fa fa-globe"></i>
<span class="notification-counter" style="background-color:red;border-radius:3px;padding: 1px 3px;position:relative;top:-9px;right:9px;font: 8px Verdana;;">'.$count.'</span></a>
<div id="notificationContainer">
<div id="notificationTitle" style="text-align:center;background-color:#ba4f46;color:#fff;">Notifications</div>
<div id="notificationsBody" class="notifications">';
while($row = mysqli_fetch_array($result)){
$output .=' <a href="viewlecture.php?subjdescr='.$row['subj_descr'].'" style="display:block;color:black;margin-top:10px;background-color:#f6e9e8;" id="notifa">
<div>
<img src="img/izuku.jpg" style="max-width:50px;max-height:70px;float:left;margin:0px 10px;">
<p style="display:inline;margin-top:20px;"><strong>'.$row['fac_code'] .'</strong> '.$row['notif_description'].'<strong><br> '.ucwords(strtolower($row['subj_descr'])).'</strong></p>
<p style="font-size:12px;">'.$row['date'].'</p>
<hr>
</div>
</a>';
}
$output .=' </div>
<div id="notificationFooter" style="background-color:#ba4f46;">See All</div>
</div>
</li>
</li>
</ul>';
echo $output;
}
I have tested it & found ok. Have you put your ajax called div inside getrecords.php file ? The process is - it will call that file & collect info from it & replace data inside your preferred div.
page1.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function()
{
loadnotif();
setInterval( loadnotif, 5000 );
$("#notificationsss").on("click",$("#notificationLink"), function() {
$("#notificationContainer").fadeToggle(300);
$("#notification_count").fadeOut("slow");
});
});
function loadnotif(){
$.ajax({
url:'getrecords.php',
type:'POST',
data:{
"loadnotif1": 1
},
success:function(data){
$('#notificationsss').html(data);
}
});
}
<div id="notificationsss">
</div>
getrecords.php should be like this
if(isset($_POST['loadnotif'])){
$sql = "SELECT * FROM notification";
$result = mysqli_query($con,$sql);
$count = mysqli_num_rows($result);
$output = ' <ul id="main-menu" class="nav navbar-nav navbar-right">
<li class="dropdown hidden-xs">
<li id="notification_li">
<a href="#" id="notificationLink"><i class="fa fa-globe"></i>
<span class="notification-counter" style="background-color:red;border-radius:3px;padding: 1px 3px;position:relative;top:-9px;right:9px;font: 8px Verdana;;">'.$count.'</span></a>
<div id="notificationContainer">
<div id="notificationTitle" style="text-align:center;background-color:#ba4f46;color:#fff;">Notifications</div>
<div id="notificationsBody" class="notifications">';
while($row = mysqli_fetch_array($result)){
$output .=' <a href="viewlecture.php?subjdescr='.$row['subj_descr'].'" style="display:block;color:black;margin-top:10px;background-color:#f6e9e8;" id="notifa">
<div>
<img src="img/izuku.jpg" style="max-width:50px;max-height:70px;float:left;margin:0px 10px;">
<p style="display:inline;margin-top:20px;"><strong>'.$row['fac_code'] .'</strong> '.$row['notif_description'].'<strong><br> '.ucwords(strtolower($row['subj_descr'])).'</strong></p>
<p style="font-size:12px;">'.$row['date'].'</p>
<hr>
</div>
</a>';
}
$output .=' </div>
<div id="notificationFooter" style="background-color:#ba4f46;">See All</div>
</div>
</li>
</li>
</ul>';
echo $output;
}
Related
I have list of items in ,UL, LI items, each li have a particular data attribute value. What I want is on clicking of each li item, another div which have same data-attribue need to show, ever other div should hide.
Example if I click on li with data-value= "devops", div which contain data-attribute="devops", should be visible and others should hide.
Following is my API code, you can just run that directly
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
</head>
<body>
<?php
$curl = curl_init();
curl_setopt_array($curl, array(
CURLOPT_URL => "https://api.recruitee.com/c/1832/offers?scope=active",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 0,
CURLOPT_FOLLOWLOCATION => true,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "GET",
CURLOPT_HTTPHEADER => array(
"Content-Type: application/json",
"Authorization: Bearer R0tYYXBTWG1Ddm5wbUgzT3pwa214Zz09"
),
));
$response = json_decode(curl_exec($curl));
curl_close($curl);
?>
<?php
$grouped_jobs = array();
$grouped_locations = array();
foreach($response->offers as $key=>$value){
$grouped_jobs[$value->department][] = array('title'=> $value->title, 'location'=> $value->location, 'url'=> $value->url);
}
foreach ($grouped_jobs as $key=>$value) {
foreach ($value as $job) {
array_push($grouped_locations, $job['location']);
}
}
?>
<div class="job_filter">
<ul class="dept_filter">
<?php foreach($grouped_jobs as $key=>$value){ ?>
<li class="departments" data-value="<?php echo $key; ?>"><?php echo $key; ?></li>
<?php } ?>
</ul>
<ul class="loct_filter">
<?php foreach(array_unique(array_map("ucfirst", $grouped_locations) ) as $loc){ ?>
<li class="locations"> <?php echo $loc; ?> </li>
<?php }?>
</ul>
</div>
<?php
foreach($grouped_jobs as $key=>$value){
echo '<div class="job_detailed" data-department='.$key.'>
<h1><u>'.$key.'</u></h1> <br>';
foreach($value as $job) {
echo '<p>'.$job['title'].'</p><br>
<p>'.$job['location'].'</p>
<a target="_blank" href='.$job['url'].'>Read More </a>';
}
echo '</div>';
}
?>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$( '.departments' ).click(function(index) {
var data_value = $(this).data('value');
console.log(data_value);
if($(this).data('department') == data_value) {
$(this).hide();
}
});
// For the mammal value
});
</script>
</html>
Where is the error in my jquery?
You can first hide all job_detailed divs then simply use $(".job_detailed[data-department=" + data_value + "]").show() to show only div which has same value as li which is clicked.
Demo Code :
$(document).ready(function() {
$('.departments').click(function(index) {
$('.dept_filter > li').not(this).removeClass("active")
$(this).addClass("active")
show_hide(); //call fn
});
$('.locations').click(function(index) {
$('.loct_filter > li').not(this).removeClass("active")
$(this).addClass("active")
show_hide(); //call fn
});
});
function show_hide() {
//check if location li is has active class
var locs = $(".locations.active").length > 0 ? $(".locations.active").text() : " ";
//check if dept li has active class or not
var data_value = $(".departments.active").length > 0 ? $(".departments.active").attr("data-value") : " ";
$(".job_detailed").hide(); //hide all divs
if ((data_value != " ") && (locs != " ")) {
//check if p tag has location and then get closest div show it
$(".loc:contains(" + locs + ")").closest(".job_detailed[data-department=" + data_value + "]").show()
} else if (locs != " ") {
//if only loc is slected get closest div show it
$(".loc:contains(" + locs + ")").closest(".job_detailed").show()
} else if (data_value != " ") {
//if only dept is selected show that
$(".job_detailed[data-department=" + data_value + "]").show()
}
}
.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="job_filter">
<h5>Department : </h5>
<ul class="dept_filter">
<li class="departments" data-value="A">
A
</li>
<li class="departments" data-value="B">
B
</li>
<li class="departments" data-value="C">
C
</li>
<li class="departments" data-value="D">
D
</li>
</ul>
<h5> Location :</h5>
<ul class="loct_filter">
<li class="locations">aa</li>
<li class="locations">sss</li>
<li class="locations">mno</li>
<li class="locations">xyz</li>
</ul>
</div>
<div class="job_detailed" data-department='A'>
<h1><u>A</u></h1> <br>
<p>something</p><br>
<p>ABC</p>
<a target="_blank" href=''>Read More </a>
</div>
<div class="job_detailed" data-department='A'>
<h1><u>A</u></h1> <br>
<p>something</p><br>
<!--added loc class to location-->
<p class="loc">abc</p>
<a target="_blank" href=''>Read More </a>
<p class="loc">xyz</p>
<a target="_blank" href=''>Read More </a>
<p class="loc">mno</p>
<a target="_blank" href=''>Read More </a>
</div>
<div class="job_detailed" data-department='A'>
<h1><u>A</u></h1> <br>
<p>something</p><br>
<p class="loc">xyz</p>
<a target="_blank" href=''>Read More </a>
</div>
<div class="job_detailed" data-department='D'>
<h1><u>D</u></h1> <br>
<p>something</p><br>
<p class="loc">mno</p>
<a target="_blank" href=''>Read More </a>
</div>
<div class="job_detailed" data-department='C'>
<h1><u>C</u></h1> <br>
<p>something</p><br>
<p class="loc">sss</p>
<a target="_blank" href=''>Read More </a>
</div>
<div class="job_detailed" data-department='D'>
<h1><u>D</u></h1> <br>
<p>something</p><br>
<p class="loc">aa</p>
<a target="_blank" href=''>Read More </a>
</div>
<div class="job_detailed" data-department='B'>
<h1><u>B</u></h1> <br>
<p>something</p><br>
<p class="loc">aa</p>
<a target="_blank" href=''>Read More </a>
</div>
hello im newbie and need some help in here, im using sublime text 3 and im using codeigniter version 3.1.8 im having problem and the problem is i dont know how to upload multiple image in dropzone ? and im using a template for dropzone.js
here is my view code
<div class="x_content">
<div class="">
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Dropzone multiple file uploader</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<i class="fa fa-wrench"></i>
<ul class="dropdown-menu" role="menu">
<li>Settings 1
</li>
<li>Settings 2
</li>
</ul>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div id="my-dropzone" class="dropzone">
<div class="dz-message">
<h3>Drop files here</h3> or <strong>click</strong> to upload
</div>
<input type="hidden" name="facility" id="facilityid" value="<?php echo $row->facilityid;?>">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="left_col" role="main" >
<a class="btn btn-sm btn-info pull-right buttonnext"
href="">Next <i class="fa fa-upload"></i>
</a>
</div>
<?php } ?>
and here is my script
<script>
Dropzone.autoDiscover = false;
Dropzone.prototype.defaultOptions.dictMaxFilesExceeded = "Can't upload more images.";
var myDropzone = new Dropzone("#my-dropzone", {
url: "<?php echo site_url("facilitycontrol/insertuploaddetail") ?>",
acceptedFiles: "image/*",
addRemoveLinks: true,
removedfile: function(file) {
var name = file.name;
$.ajax({
type: "post",
url: "<?php echo site_url("faciltycontrol/remove") ?>",
data: { file: name },
dataType: 'html'
});
// remove the thumbnail
var previewElement;
return (previewElement = file.previewElement) != null ? (previewElement.parentNode.removeChild(file.previewElement)) : (void 0);
},maxFiles: 10,
init: function() {
this.on("maxfilesexceeded", function(file){
alert("you can't upload more images.");
}),
this.on("success", function(file, xhr){
var texting = $('#facilityid').val();
// alert(texting);
$(".buttonnext").show();
var data = file.xhr.response;
$(".buttonnext").click(function() {
/* Act on the event */
// alert(data);
window.location = "<?php echo base_url(); ?>facilitycontrol/descriptionview/"+data+"/"+texting;
});
})
},
});
And this is my Controller
public function insertuploaddetail(){
if ( ! empty($_FILES))
{
$config["upload_path"] = './assets/images/facility/';
$config["allowed_types"] = "gif|jpg|png";
$this->load->library('upload', $config);
$this->upload->initialize($config);
$this->upload->do_upload('file');
$fileData = $this->upload->data();
print_r($fileData['file_name']);
}
}
im just newbie,I really need your help
Please try using your normal form tag to wrap your form.
<form action="" method="post" enctype="multipart/form-data">
<!-- form content starts -->
<!-- form content end -->
</form>
The enctype will allow form upload by php.
I got a a custom loop into my Wordpress custom blog page, and Im displaying all my posts into it, like that :
<section class="container blog-article-actu">
<div class="row">
<?php
$the_query = new WP_Query('showposts=-1');
while ($the_query->have_posts()) :
$the_query->the_post();
$catObj = get_the_category();
?>
<article class="blog-article-actu-article" style="background:url('<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' ); ?><?php echo $url ?>');">
<div class="blog-article-actu-article-top">
<h2><?php the_title(); ?></h2>
<div class="details-blog-article-actu">
<div class="blog-article-actu-date">
<span class="day"><?php the_time( 'd' ) ?></span><br>
<span class="month"><?php the_time( 'F' ) ?></span>
</div>
<a href="#" target="_blank"><p>
<?php
if (($catObj[0]->name == 'Actualités et évènements') OR ($catObj[1]->name == 'Actualités et évènements')) {
echo "<img src=\"XXX/actu-icon.png\" alt=\"Actualités et évènements\">";
} elseif (($catObj[0]->name == 'Témoignages') OR ($catObj[1]->name == 'Témoignages')) {
echo "<img src=\"XXX/chat-icon.png\" alt=\"Témoignages\">";
} elseif (($catObj[0]->name == 'Vidéos') OR ($catObj[1]->name == 'Vidéos')) {
echo "<img src=\"XXX/video-icon.png\" alt=\"Vidéos\">";
} else {
echo "";
}
?>
</p></a>
</div>
</div>
<div class="blog-article-actu-article-bottom-wrap">
<span class="blog-article-actu-article-excerpt"><?php the_excerpt();?></span>
<span class="blog-article-actu-article-bottom">En savoir <span>+</span></span>
<div class="social-blog-article-actu">
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-facebook" aria-hidden="true"></i>
</div>
</div>
</article>
<?php // End of the loop.
endwhile;
?>
</div>
</section>
Then I was asked to build something to sort them, by tags, dynamically, with a tag system like this one : https://codepen.io/Chaaampy/pen/gWOrvp
But Im a bit lost about that ... I thought about get the tags for each posts in my loop, and then add them as a CSS class, like that maybe I could show or hide some articles in JS ... Meh, I don't know, has someone got any ideas for me ?
Thanks ! :)
If anyone is interested, found a solution by building something like that : https://codepen.io/Chaaampy/pen/gWOrvp
$(function filter() {
var selectedClass = "";
$(".link").click(function(){
selectedClass = $(this).attr("data-rel");
$(".wrap").fadeTo(100, 0.1);
$(".wrap section").not("."+selectedClass).fadeOut().removeClass('scale_anm');
setTimeout(function() {
$("."+selectedClass).fadeIn().addClass('scale_anm');
$(".wrap").fadeTo(300, 1);
}, 300);
});
});
Note that I get the tags into Wordpress with get_the_tags, and then I add them as a class to the elements I want to show / hide
I'm trying to create a simple ecommerce website. Everything is going well but I can only add products on my cart when I'm in index.php. When I try to click the add_cart button on all_products.php page, it redirects me to the index.php page and doesn't add the product to the cart.
I wanted to be able to add products as well on all_products.php page. What is wrong with my code:
function.php( functions where the "add to cart" button is created and the function on what will happen when the add to cart button is clicked:
function getProd(){
if(!isset($_GET['cat'])){
global $con;
$get_prod = "select * from item order by RAND() LIMIT 0, 6";
$run_prod = mysqli_query($con, $get_prod);
while($row_prod = mysqli_fetch_array($run_prod)){
$prod_id = $row_prod['ItemId'];
$prod_name = $row_prod['ItemName'];
$prod_desc = $row_prod['ItemDesc'];
$prod_price = $row_prod['ItemPrice'];
$prod_qty = $row_prod['ItemQty'];
$prod_cat = $row_prod['ItemCat'];
$prod_img = $row_prod['ItemImg'];
echo "
<div id='single_product'>
<img src='../admin_int/product_images/$prod_img' width='180' height=180'/>
<h4>Name:</h4><h4> $prod_name</h4>
<p><b>Price: $ $prod_price</b></p>
<a href='details.php?prod_id=$prod_id' style='float:left; font-size:19px;padding-top:10px;text-decoration:none'>Details</a>
<a href='index.php?add_cart=$prod_id'><button style = 'float:right; border:1; border-radius:12px; color:blue;
height:50px; width:50px;
background-color: #80ff80'>
Add to Cart</button></a> //THIS IS THE CREATION OF ADD TO CART BUTTON
</div>
";
}
}// if(!isset($_GET['cat'])){
}//END OF getProd()
cart() // This is what will the add to cart button is going to perform.
function cart(){
if(isset($_GET['add_cart']))
{
global $con;
$ip = getIp();
$pro_id = $_GET['add_cart'];
$check_pro = "select * from cart where ip_add = '$ip' AND p_id = '$prod_id" ;
$run_check = mysqli_query($con, $check_pro);
if(mysqli_num_rows($run_check)>0){
echo "";
}
else {
$insert_pro = "insert into cart (orderId,ip_add) values ('$pro_id','$ip')";
$run_pro = mysqli_query($con, $insert_pro);
echo "<script> window.open('all_products.php','_self')</script>";
}
}
}//cart()
all_products.php
<!DOCTYPE html>
<?php
include("../functions/function.php");
?>
<html>
<head>
<title>Online Shop</title>
<link rel='stylesheet' href='../CSS/style.css' media="all"/>
</head>
<body>
<!--Main Wrapper starts here!-->
<div class="main_wrapper">
<!--Header Wrapper starts here!-->
<div class="header_wrapper" >
<a href='index.php'><img id="logo" src="../Pictures/logo.png"/></a>
</div>
<!--Header ends here!-->
<!--Menu Bar starts here!-->
<div class="menubar">
<ul id="menu">
<li> Home </li>
<li> All Products </li>
<li> My Account </li>
<li> Sign Up </li>
<li> Shopping Cart </li>
<li> Contact Us </li>
</ul>
<div id="form">
<form method="get" action="results.php" enctype="multipart/form-data">
<input type="text" name="user_query" placeholder="Search Product"/>
<input type="submit" name="search" value="search" style='background-color:#80dfff; border:none;'/>
</form>
</div>
</div><!--Menubar ends here!-->
<!--Content Wrapper here!-->
<div class="content_wrapper">
<div id="sidebar">
<div id="sidebar_title"> Categories</div>
<ul id="cats">
<?php getCats(); ?>
</ul>
</div>
<!--CONTENT AREA starts here-->
<div id="content_area">
<?php cart(); ?>
<div id='shopping_cart'>
<span style='float:right; font-size:18px; padding-right:5px; padding:5px; line-height:40px;'>
Welcome Guest!
<b style='color:#336600'>SHOPPING CART</b>
Total Items:<?php total_items(); ?>
Total Price: <?php total_price(); ?>
<a href="cart.php" style='color:#336600'>Go to Cart</a>
</span>
</div>
<div id="product_box">
<!--CODE IN SHOWING ALL PRODUCTS-->
<?php
$get_prod = "select * from item order by ItemName";
$run_prod = mysqli_query($con, $get_prod);
while($row_prod = mysqli_fetch_array($run_prod)){
$prod_id = $row_prod['ItemId'];
$prod_name = $row_prod['ItemName'];
$prod_desc = $row_prod['ItemDesc'];
$prod_price = $row_prod['ItemPrice'];
$prod_qty = $row_prod['ItemQty'];
$prod_cat = $row_prod['ItemCat'];
$prod_img = $row_prod['ItemImg'];
echo "
<div id='single_product'>
<img src='../admin_int/product_images/$prod_img' width='180' height=180'/>
<h4>Name:</h4><h4> $prod_name</h4>
<p><b>Price: $ $prod_price</b></p>
<a href='details.php?prod_id=$prod_id' style='float:left; font-size:19px;padding-top:10px;text-decoration:none'>Details</a>
<a href='index.php?prod_id=$prod_id'><button style = 'float:right; border:1; border-radius:12px; color:blue;
height:50px; width:50px;
background-color: #80ff80'>
Add to Cart</button></a>
</div>
";
}
?> <!--END OF ALL PRODUCTS-->
</div>
</div><!--END OF CONTENT AREA-->
</div><!--Content Wrapper ends here!-->
<div id="footer"><h2 style='text-align:center; padding-top:25px;'>© Jerlon Buenconsejo 2015</h2> </div>
</div><!--Wrapper-->
</body>
</html>
You are redirected to index.php because this is the page specified in your link :
<a href='index.php?prod_id=$prod_id'>
Change it for the name of your page. Also, you will need the cart() function to be called on top of your page.
You should consider to call a unique page which is addCaddy.php for an example, that redirect to the page where you were after inserting the product, or that you could call with ajax.
I have 3 progress bar on webpage from database data . When user click on load more 3 more progress bar get added from database data.
<div id="progressBar<?php echo $rec['cid'];?>" class="tiny-green"><div></div></div>
<!-- Some codes are here --->
...
....
.....
<?php
$prj= mysql_query("select * from campaign where uid=$uid");
$record = array();
while($row = mysql_fetch_assoc($prj)){
$record[] = $row;
}
?>
<script type="text/javascript">
<?php foreach($record as $rec){?>
progressBar(<?php $perc= $rec['value']*100/$rec['value1']; echo $perc;?>, $('#progressBar<?php echo $rec['cid'];?>'));
<?php } ?>
</script>
Below is javascript plugin
<script type="text/javascript" src="js/jquery.countdown.min.js"></script>
Now problem is when i add progress bar from load_more button(Which get data by load_more.php file and it insert it on index.php file). i can see the value but progress bar is not creating because code given above not loading after clicking on load_more.
So, i want to know is there any way i can reload that code only. So, wherever there is a progress bar control placed it get the display the bar.
update with some modifications, hope it will help you
$prj= mysql_query("select * from campaign where uid=$uid order by Closing_Date DESC Limit 0,1");
$result = array('data' => '', 'progress_bar' => array());
while($row = mysql_fetch_assoc($prj)) {
$result['data'] .= '<div class="col-sm-1 col-md-4 unique" id="'.$rec['cid'].'">
<div class="well">
<div class="media services-wrap55 wow fadeInDown">
<img class="img-responsive" src="'.$rec['poster'].'"><br>
<h4 class="media-heading">'.$rec['project_Name'].'</h4>
<p> by <i>'.$rec['user_name'].'</i></p>
<p> '.$rec['short_dis'].'</p>
<a class="" href="view_project/'.$rec['cid'].'/'.$rec['slug'].'">More ... </a>
<p>
<div id="progressBar'.$rec['cid'].'" class="tiny-green"><div></div></div>
<h6>'.($rec['view']*100/$rec['view2']).'% ( <i class="fa fa-user"></i>'.$rec['view']. ') '.$rec['view2'].' views.</h6>
</p>
<div class="counter-inner"> <div id="example1" data-countdown="'.date("m/d/Y h:i:s", strtotime($rec['Closing_Date'])).'"></div></div><p> <!-- Work on this -->
<div class="col-sm-11">
<div class="entry-meta">
<span><font color="#339933"><i class="fa fa-comment"></i> </font> '.$rec['comment'].' Comments </a></span><!-- Work on this -->
<span><font color="#339933"><i class="fa fa-thumbs-up"></i></font> '.$rec['up_count'].' </a></span>
<span><font color="#339933"><i class="fa fa-thumbs-down"></i></font> '.$rec['down_count'].' </a></span>
<span><font color="#339933"><i class="fa fa-star"></i> </font> '.$rec['fav_count'].' Fav </a></span>
</div>
</div>
</div>
</div>
</div>';
$result['progress_bar'][] = array('cid' => $rec['cid'], 'perc' => $rec['value'] * 100 / $rec['value1']);
}
$(document).ready(function() {
$('#more').click(function() {
var get_last_post_display = $('.unique-class:last').attr('id'); //get ip last <li>
$('#more').html('<img src="ajax-loader.gif"');
$.post('more_prj.php', 'last_id_post='+get_last_post_display, function(html) {
if(html.data) {
$('div').append(html.data);//$('.main-div') ?
$('#more').text('Load More Project'); //add text "Load More Post" to button again
for(i = 0; i < html.progress_bar.length; i++) {
progressBar(html.progress_bar[i]['perc'], $('#progressBar' + html.progress_bar[i]['cid']));
}
} else {
$('#more').text('No more Project to load'); // when last record add text "No more posts to load" to button.
}
}, 'json');
});
});