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.
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>
I need to adjust my code so that the video is played in the modal that is opened when the user clicks on it.
This code was implemented in a modal that was to display images.
I use JS: https://dimsemenov.com/plugins/magnific-popup/documentation.html
PHP:
<?php
$url = 'https://www.youtube.com/feeds/videos.xml?channel_id=ID';
$xml = simplexml_load_file($url);
$ns = $xml->getDocNamespaces(true);
$xml->registerXPathNamespace('a', 'http://www.w3.org/2005/Atom');
$elementos = $xml->xpath('//a:entry');
$conteudo = $elementos[0];
$videos_pagina = "12";
$page = isset($_GET['pagina'])?intval($_GET['pagina']-1):0;
$total_paginas = ceil(count($elementos)/$videos_pagina);
if (isset($_GET['pagina']) && is_numeric($_GET['pagina'])) {
$pagina = (int) $_GET['pagina'];
} else {
$pagina = 1;
}
if ($pagina > $total_paginas) {
$pagina = $total_paginas;
}
if ($pagina < 1) {
$pagina = 1;
}
$offset = ($pagina - 1) * $videos_pagina;
$range = 3;
$prevpage = $pagina - 1;
$nextpage = $pagina + 1;
$anterior = $baseurl."/videos/pagina/".$prevpage;
$proxima = $baseurl."/videos/pagina/".$nextpage;
?>
HTML:
<section class="about-section pb30">
<div class="container">
<div class="row">
<?php
foreach (array_slice($elementos, $page*$videos_pagina, $videos_pagina) as $item) {
$media = $item->children('http://search.yahoo.com/mrss/');
$yt = $item->children('http://www.youtube.com/xml/schemas/2015');
$miniatura = $media->group->thumbnail->attributes()->url->__toString();
$titulo = $item->title;
$url_embed = "https://www.youtube.com/embed/".$yt->videoId;
?>
<div class="col-sm-6 col-md-6 col-lg-4">
<div class="gallery_item">
<img class="img-fluid img-circle-rounded w100" src="<?php echo $miniatura; ?>" alt="<?php echo $titulo; ?>">
<div class="gallery_overlay"></span></div>
</div>
</div>
<?php } ?>
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="gallery_item" align="center"><br>
<button type="button" <?php if ($pagina > 1) { }else{ echo "disabled"; } ?> onclick="location.href='<?php echo $anterior; ?>';" class="btn btn-lg btn-thm">Página anterior</button>
<button type="button" <?php if ($pagina != $total_paginas) { }else{ echo "disabled"; } ?> onclick="location.href='<?php echo $proxima; ?>';" class="btn btn-lg btn-thm">Próxima página</button>
</div>
</div>
</div>
</div>
</section>
Currently when the user clicks on the video he opens the modal, however I need the video to be loaded.
How should I do?
You can easily embed or place the YouTube video inside a Bootstrap modal like you do on the normal web pages. Just get the code to embed the video from YouTube site and place it inside the .modal-body element. But there is small problem; the YouTube video doesn't stop automatically when you close the modal window. It will still play in the background.
To solve this problem you can simply toggle the url value of the YouTube's video iframe src attribute dynamically using the jQuery. Let's try out the following example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Embedding YouTube Video inside Bootstrap Modal</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
.modal-content iframe{
margin: 0 auto;
display: block;
}
</style>
<script>
$(document).ready(function(){
/* Get iframe src attribute value i.e. YouTube video url
and store it in a variable */
var url = $("#cartoonVideo").attr('src');
/* Assign empty url value to the iframe src attribute when
modal hide, which stop the video playing */
$("#myModal").on('hide.bs.modal', function(){
$("#cartoonVideo").attr('src', '');
});
/* Assign the initially stored url back to the iframe src
attribute when modal is displayed again */
$("#myModal").on('show.bs.modal', function(){
$("#cartoonVideo").attr('src', url);
});
});
</script>
</head>
<body>
<div class="bs-example">
<!-- Button HTML (to Trigger Modal) -->
Launch Demo Modal
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">YouTube Video</h4>
</div>
<div class="modal-body">
<iframe id="cartoonVideo" width="560" height="315" src="//www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I'm fetching data using for loop and echo results on a page. How do I output the results in a slider effect?
I have tried a simple CSS slider but can't get the intended result. What I end up getting is everything output in page and no sliding effect.
Part of my PHP code that echo the output...
for ($i=0, $n=count($rows); $i < $n; $i++) {
//echo "<tr><td>".
($row = $rows[$i]);
//."</td></tr>";
$link_detail = JRoute::_('index.php?option=com_jblance&view=user&layout=viewprofile&id='.$row->user_id.$Itemid);
$link_invite = JRoute::_('index.php?option=com_jblance&view=project&layout=invitetoproject&id='.$row->user_id.'&tmpl=component');
?>
<div class="slider">
<div class="media style_prevu_kit">
<div class="center">
<?php
if($show_logo){
$link = LinkHelper::GetProfileLink($row->user_id, $row->$nameOrUsername);
$attrib = 'style="width: 162px; height: 162px; float:center; margin: 0 auto; border-radius: 100px"';
//echo JblanceHelper::getLogo($row->user_id, $attrib);
echo "<a href='".$link_detail."' class='link'>".JblanceHelper::getLogo($row->user_id, $attrib)."</a>";
//echo $link_detail;
} ?>
</div>
<div class="media-body">
<h5><?php //$username = LinkHelper::GetProfileLink($row->user_id, $row->$nameOrUsername);
$getUsername = $row->$nameOrUsername;
$nameorUsername = truncate($getUsername, 5);
echo LinkHelper::GetProfileLink($row->user_id, $nameorUsername);
//echo truncate($username, 15);
?></h5>
<?php //<?php echo JblanceHelper::getCategoryNames($row->id_category, 'tags-link', 'user'); ?>
</span>
<br /><br />
</div>
<div class="center">
<input type="button" value="Hire Me" class="button_add button_curved_blue color-a">
</div>
<div class="lineseparator"></div>
<div class="container">
<div class="content">
<div class="grid-2">
<button class="color-b circule"> <i class="fab fa-dribbble fa-2x"></i></button>
<h6 class="title-2">12.3k</h6>
<p class="followers">Followers</p>
</div>
<div class="grid-2">
<button class="color-c circule"><i class="fab fa-behance fa-2x"></i></button>
<h6 class="title-2">16k</h6>
<p class="followers">Followers</p>
</div>
<div class="grid-2">
<button class="color-d circule"><i class="fab fa-github-alt fa-2x"></i></button>
<h6 class="title-2">17.8k</h6>
<p class="followers">Followers</p>
</div>
</div>
</div>
</div>
</div>
<?php
}
A very simple slider CSS...
.slider {
white-space: nowrap;
oveflow:hidden;
}
.slider>div {
white-space: normal; /* reset "nowrap" above */
display: inline-block;
transition: margin-left 0.8s cubic-bezier(0.5, 0.1, 0.5, 1.25);
/* the above transition gives a neat little "bounce-back" effect */
}
And 1 line of JavaScript...
<script>
theSlider.children[0].style.marginLeft = (-100*pageID)+"%";
</script>
What I get now is this...
While I need all 8 cards to automatically be sliding in 1 row or to have previous and next buttons to transition between the cards
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;
}
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');
});
});