Develop Reference

Reload div in jss, jquery

I have a problem that when I use the loop to loop the elements in the session array it still runs normally, I try to use the code to reload only the shopping cart item, it reloads the cart, but it doesn't run. The PHP loop and my shopping cart are empty, what should I do?
<span id="soluonghang" class="badge badge-primary" style="background: #da251c;">
<?php echo $soluongsanpham; ?>
</span>
<div class="popup" id="giocart">
<div class="row header">
<span>Items</span>
<span>Amount</span>
</div>
<?php
if (isset($_SESSION['cart'])) {
foreach ($_SESSION['cart'] as $key => $value) {
?>
<div class="row items" id="itcart">
<span><?php echo $value['name']; ?></span>
<span><?php echo $a = ($value['dongia'] * $value['num']) - ($value['giam'] / 100 * ($value['dongia'] * $value['num'])) ?>đ</span>
</div>
<?php
}
} else {
}
?>
<div class="row checkout">
<span>Đi đến giỏ hàng ></span>
<span class="checkout-button" onclick="refesf()">Refesh giỏ hàng</span>
</div>
</div>
</span>

Javascript problem in catching data on looping

I try to loop multiple values from a database and every time I click a specific item on the menu, Javascript only catches the first value that comes up in the database even if the function is inside the loop, Even I click the last item, the first item still displays... How to fix? Here is my code. (The display of the result is on top, I didn't include it)
<?php
$res = mysqli_query($db,"select * from menu where Restaurant_id='$id' order by Food_name asc") or die("Error: " . mysqli_error($db));
while($rows = mysqli_fetch_array($res)){
$f_id = $rows['Menu_id'];
$fname = $rows['Food_name'];
$fprice = $rows['Price'];
?>
<div class="col-12 helv menu rounded">
<ul class="nav navbar-nav navbar-expand-md">
<li class="nav-item"><img class="rounded" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="180" height="180"></li>
<li class="nav-item marginleft">
<br>
<input id="foodname" value="<?php echo $fname;?>" style="display: none;"><h5><b><?php echo $fname;?></b></h1></input><br>
<input id="foodprice" value="<?php echo $fprice;?>" style="display: none;"><h5>Php <?php echo $fprice;?>.00</h1></input>
</li>
<li class="nav-item" style="position: absolute; margin-left: 90%">
<button class="fa fa-plus btn btn-danger" onclick="add()"> Add</button>
</li>
</ul>
<br>
</div>
<script>
function add() {
var fdname = document.getElementById("foodname").value;
var fdprice = document.getElementById("foodprice").value;
document.getElementById("display").innerHTML = fdname;
document.getElementById("display1").innerHTML = fdprice;
}
</script>
<?php } ?>

<?php
// As Jeto said, you should use prepared statement
$res = mysqli_query($db,"select * from menu where Restaurant_id='$id' order by Food_name asc") or die("Error: " . mysqli_error($db));
while($rows = mysqli_fetch_array($res)){
$f_id = $rows['Menu_id'];
$fname = $rows['Food_name'];
$fprice = $rows['Price'];
?>
<div class="col-12 helv menu rounded">
<ul class="nav navbar-nav navbar-expand-md">
<li class="nav-item"><img class="rounded" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="180" height="180"></li>
<li class="nav-item marginleft">
<br>
<input class="foodname" value="<?php echo $fname;?>" style="display: none;"><h5><b><?php echo $fname;?></b></h1></input><br>
<input class="foodprice" value="<?php echo $fprice;?>" style="display: none;"><h5>Php <?php echo $fprice;?>.00</h1></input>
</li>
<li class="nav-item" style="position: absolute; margin-left: 90%">
<button class="fa fa-plus btn btn-danger" onclick="add('<?php echo $fname;?>', <?php echo $fprice;?>)"> Add</button>
</li>
</ul>
<br>
</div>
<?php } ?>
<script>
function add(fdname, fdprice) {
document.getElementById("display").innerHTML = fdname;
document.getElementById("display1").innerHTML = fdprice;
}
</script>

First get count of how many items are in there before the while query
$res = mysqli_query($db,"select * from menu where Restaurant_id='$id' order by Food_name asc") or die("Error: " . mysqli_error($db));
$count_of_items = mysqli_num_rows($res);
Then run the while query, then Run a for loop inside the form as per the number of Items
for($x=0;$x<count($count_of_items); $x++){
<input id="foodname" value="<?php echo $fname[$x];?>" style="display: none;"><h5><b><?php echo $fname[$x];?></b></h1></input><br>
<input id="foodprice" value="<?php echo $fprice[$x];?>" style="display: none;"><h5>Php <?php echo $fprice[$x];?>.00</h1></input>
}

There are some more mistakes.
1) IDs are unique
Please check this https://stackoverflow.com/a/12889416/3742228
2) Duplicate JS function
Every loop you make, you create another JS function named "add". If you create 3 functions named "add", which function do you want to call when you code add()? :)
For your code there are more solutions, but it depends on what exactly you want to do. Take a look at this:
<?php
$res = mysqli_query($db,"select * from menu where Restaurant_id='$id' order by Food_name asc") or die("Error: " . mysqli_error($db));
while($rows = mysqli_fetch_array($res)){
$f_id = $rows['Menu_id'];
$fname = $rows['Food_name'];
$fprice = $rows['Price'];
?>
<div class="col-12 helv menu rounded">
<ul class="nav navbar-nav navbar-expand-md">
<li class="nav-item"><img class="rounded" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="180" height="180"></li>
<li class="nav-item marginleft">
something here
</li>
<li class="nav-item" style="position: absolute; margin-left: 90%">
<button class="fa fa-plus btn btn-danger" foodName="<?php echo $fname;?>" foodPrice="<?php echo $fprice;?>" onclick="add(this)"> Add</button>
</li>
</ul>
<br>
</div>
<?php } ?>
<script>
function add(e) {
var fdname = e.getAttribute("foodName");
var fdprice = e.getAttribute("foodPrice");
document.getElementById("display").innerHTML = fdname;
document.getElementById("display1").innerHTML = fdprice;
}
</script>

how to get specific data when i press a button

i have created a search page that gives results based on the entered values.What i want is to get specific details of the ad when the user presses the enroll button. But i am getting the details of all the ads instead of the one the user wants to enroll into.
here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/basic.css">
<script src="js/jQuery/jquery.min.js"></script>
<script src="css/bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>
<script src="Forms/form-validation.js"></script>
</head>
<body>
<?php
session_start();
require 'connection.php';
//include_once 'utlities.php';
$userEmail=$_SESSION['user'];
$form_string = 'd';
$sqlQuery ='SELECT * FROM `course` WHERE `course_title` LIKE "%'.$form_string.'%" OR `user_teacher` in (SELECT user_teacher FROM teacher where email in (SELECT email from person where fname like "%'.$form_string.'%" OR lname like "%'.$form_string.'%"));';
$queryExe=mysqli_query($connection,$sqlQuery);
$row = mysqli_fetch_assoc($queryExe)
?>
<div class="panel-body">
<?php while($row = mysqli_fetch_assoc($queryExe)) { ?>
<article class="row panel panel-default">
<div class="col-xs-6 col-xs-offset-3 col-sm-3 col-sm-offset-0">
<img src="images/profile-default.jpg" alt="Lorem ipsum" />
</div>
<div class="col-xs-12 col-sm-3">
<ul class="list-group">
<li class="list-group-item">
<i class="glyphicon glyphicon-book"></i>
<span>
<?php
echo " ".$row["description"];
?>
</span>
</li>
<li class="list-group-item">
<i class="glyphicon glyphicon-tags"></i>
<span id="courseid" >
<?php
echo " Course ID ".$row["courseid"];
?>
</span>
</li>
<li class="list-group-item">
<i class="glyphicon glyphicon-tags"></i>
<span>
<?php echo" Rs. ".$row["fees"];
?>
</span>
</li>
</ul>
</div>
<div class="col-xs-12 col-sm-6">
<h3>
<a href="#" title="">
<?php
$sql_profile =
"SELECT `fname`,`lname`,`email`
FROM `person`
WHERE `email`=(
SELECT `email`
FROM `teacher`
WHERE `user_teacher`=".$row["user_teacher"]."
);
";
$result_sql=mysqli_query($connection,$sql_profile);
$tName = mysqli_fetch_assoc($result_sql);
echo $tName["fname"]." ".$tName["lname"];
$_SESSION['temail']= $tName["email"];
?>
</a>
</h3>
<h6><?php echo $tName['email']; ?></h6>
<p class="hidden-xs"><?php echo $row["course_title"]; ?></p>
<span class="plus">
<a href="#" title="Enroll" class="btn btn-success"
<?php
/*if(loggedIn()){
echo 'data-toggle="modal" data-target="#enroll "';
}else{
echo 'data-toggle="modal" data-target="#LOGIN "';
}
/**/
?>>
<i class="glyphicon glyphicon-plus" id="enroll" ></i><span>Enroll</span>
</a>
</span>
</div>
</article>
<?php
}
?>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#enroll').click(function() {
alert($("article").find("#courseid,h6").text());
});
});
</script>
</body>
</html>

Identifiers in HTML must be unique You are generating the element in a loop, which will create duplicate ID hence the generated HTML will be invalid.
Use CSS class with elements then attach event handlers using it. You can associate the arbitrary data using data-* custom attribute which can be fetched using .data().
HTML
<i class="glyphicon glyphicon-plus enroll" data-email="<?php echo $tName['email']; ?>" data-courseid="<?php echo $row['courseid']; ?>"></i><span>Enroll</span>
SCRIPT
$('.enroll').click(function() {
var email = $(this).data('email');
var courseid = $(this).data('courseid');
});

set unique identifier to what you want to show
<?php
echo "<span id=\"courseid-".$row['courseid']." \" >";
echo " Course ID ".$row["courseid"];
?>
and to the enroll button
<?php
echo "<i class=\"glyphicon glyphicon-plus\" id=\"enroll\" data-id=\"courseid-".$row["courseid"]." \">";
?>
and in your script you show the specific text
$('#enroll').click(function() {
courseid = $(this).attr('data-id');
alert($("#"+courseid+",h6").text());
});

Jquery infinity scroll loops over and over using Mysql/PHP

I'm trying to implement Jquery infinity scroll found at (http://infiniteajaxscroll.com/) together with my MYSQL and PHP. And it works, sort of.
I found similar example here but my was quite different anyway (http://www.w3bees.com/2013/09/jquery-infinite-scroll-with-php-mysql.html)
The loading more works fine however my results are being looped over and over again.
I mean i display all the results in the first page and when i scroll down at the bottom and infinity scroll fires up then same results are being showed instead of splitting those first results in different pages.
Here is my code, quite long :)
<?php
$page = (int) (!isset($_GET['s'])) ? 1 : $_GET['s'];
// GET ALL THE SHOUTBOX
$sql = "SELECT * FROM shoutbox
ORDER BY id DESC
LIMIT 20";
//prepare the statement
$statement = $dbConn->prepare($sql);
//execute the statement
$statement->execute();
//Count the shouboxes
$number_of_shoutbox = $statement->rowCount();
$number_of_posts_per_page = '10';
$total_pages = $number_of_shoutbox / $number_of_posts_per_page;
?>
<div class="background_spacing"></div> <!-- end of background spacing -->
<div id="header_background">
<div class="shoutbox-background text-center">
<div id="shoutbox">
<!-- SHOUTBOX COMPLETE STARTS -->
<div class="shoutbox_complete">
<div class="shoutbox_left">
<img src="images/girl-shoutbox.jpg">
</div>
<div class="shoutbox_right background-white">
<div class="no-padding padding10">
<span class="font24 font-color-000000">NAPISI SVOJ</span>
<span class="font24 username_male">SHOUTBOX</span>
<textarea class="shoutbox-form no-padding" placeholder="Ostavite i vi jedan shoutbox..."></textarea>
<input type="submit" class="button_standard_pink float-right">
</div>
</div>
</div>
<!-- SHOUTBOX COMPLETE STARTS -->
</div> <!-- end of id="shoutbox -->
</div>
</div> <!-- END OF HEADER_BACKGROUND -->
<div class="margin30"></div><!-- Spacing -->
<div class="shoutbox-total">
<div id="shoutbox">
<div class="shoutbox-counter no-padding padding-10 background-shoutbox-counter">
<div class="font48 text-center"><?php count_shoutbox();?></div>
<div class="text-center">shoutbox has been shouted!</div>
<div class="text-center padding-10"><img src="images/default/default-shoutbox-shout.png"></div>
<div class="text-center font10">INVITE YOUR FRIENDS TO SHOUT!</div>
</div>
</div>
<?
//LOOP THROUGH THE SHOUBOXES
while($show_shoutbox = $statement->fetch(PDO::FETCH_BOTH)) {
?>
<div id="shoutbox">
<!-- SHOUTBOX COMPLETE STARTS -->
<div class="shoutbox_complete_display">
<div class="shoutbox_left">
<img src="images/man-shoutbox.jpg">
</div>
<div class="shoutbox_right-display background-box-light-gray">
<div class="no-padding padding-10">
<div class="font24 username_male" style="line-height:1;"><?php echo strtoupper($show_shoutbox['user_name']);?> <?php echo $show_shoutbox['user_age'];?> GODINE</div>
<span class="font-color-898a8b">IZ <?php echo strtoupper($show_shoutbox['country']);?> - TRAŽI <?php echo strtoupper($show_shoutbox['gender_search']);?> IZMEĐU <?php echo strtoupper($show_shoutbox['age_from']);?> I <?php echo strtoupper($show_shoutbox['age_to']);?> GODINA</span>
<div class="margin15"></div>
<div class="font20"><?php echo $show_shoutbox['text'];?></div>
<div style="margin-top:52px;">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><div class="font18 font-bold">32,222</div>
<span class="font-color-898a8b">ACHIVEMENTS</span>
</td>
<td><div class="font18 font-bold">32,222</div>
<span class="font-color-898a8b">ACHIVEMENTS</span>
</td><td><div class="font18 font-bold">32,222</div>
<span class="font-color-898a8b">ACHIVEMENTS</span>
</td><td><div class="font18 font-bold">32,222</div>
<span class="font-color-898a8b">ACHIVEMENTS</span>
</td>
</tr>
</table>
</div> <!-- end of margin-top:60 -->
</div> <!-- end of no-padding padding-10 -->
<!-- COMMENT START HERE -->
<?php
// d($detail);
$type='question';
// include('like.php');
include('includes/comment.php');
?>
<!-- COMMENT END HERE -->
</div> <!-- end of shoutbox_right-display -->
</div> <!-- end of shoutbox_complete -->
</div> <!-- end of id="shoutbox -->
<?php } // end of the shoubox loop
?>
</div>
<!--page navigation-->
<div id="nav">
<?php
for ($x = 2; $x <= $total_pages; $x++) {
?>
<a href='welcome.php?p=shoutbox&s=<?php echo $x;?>' <?php if($x=='2') { echo 'class="next"';}?>></a>
<?php } ?>
</div>
<script type="text/javascript" src="js/jquery.infinity.scroll.js"></script>
<script type="text/javascript">
var ias = $.ias({
container: ".shoutbox-total .shoutbox_complete_display",
item: "#shoutbox",
pagination: "#nav",
next: ".next"
});
ias.extension(new IASSpinnerExtension());
ias.extension(new IASTriggerExtension({offset: 3}));
ias.extension(new IASNoneLeftExtension({text: 'There are no more pages left to load.'}));
========================================================================
UPDATE CODE BY STILL GIVING ERRORS NOW IN MYSQL:
Tried #Rob Schmuecker solution but now getting errors in mysql.
Here is my modified code with PDO and with Rob Schmuecker suggestion
// GET ALL THE SHOUTBOX
$sql = "SELECT
shoutbox.shoutbox_id,
shoutbox.text,
shoutbox.date,
shoutbox.time,
shoutbox.approved,
shoutbox.`new`,
shoutbox.user_id,
users.profile_image,
users.user_name,
users.user_age,
users.country,
users.gender_search,
users.age_from,
users.age_to
FROM shoutbox INNER JOIN users ON shoutbox.user_ID = users.id
WHERE users.profile_image = '2'
AND shoutbox.approved = '1'
AND shoutbox.new = '0'
AND shoutbox.user_id != :admin_id
AND (shoutbox.user_id NOT IN (SELECT user_id FROM users_blocked WHERE blocked_id = :user_id))
ORDER BY shoutbox.shoutbox_id DESC
LIMIT :limit_start :limit_row_amount";
//prepare the statement
$statement = $dbConn->prepare($sql);
//execute the statement
$statement->execute(array(
'admin_id' => $admin_id,
'user_id' => $user_id,
'limit_start' => $limit_start,
'limit_row_amount' =>$limit_row_amount
));

You need to implement the page into your SQL query.
Below we define two new variables, one which is the total amount you want to retrieve each time and the next is the amount of rows to skip in each limit query, starting from 0 if $page = 1
$page = (int) (!isset($_GET['s'])) ? 1 : $_GET['s'];
$limit_row_amount = 20;
if($page > 1){
$limit_start = $page * $limit_row_amount;
} else {
$limit_start = 0;
}
// GET ALL THE SHOUTBOX
$sql = "SELECT * FROM shoutbox
ORDER BY id DESC
LIMIT $limit_start, $limit_row_amount";

Jquery Children

I am trying to create a nice gallery for an e-commerce. - all the current code is here
The front-end layout I got from here followed the tutorial and it worked like a charm.
Then to add the payment module I decided to add a floating div:
<?php foreach ($tes as $te): ?>
<div id="<?php echo $te['Product']['id'] ?>">
<div class="shop-actions">
<div class="list-group">
<span href="#" class="list-group-item active comprar-menu-button">
<?php echo __('<i class="fa fa-shopping-cart"></i> Carrito de Compras'); ?>
</span>
<span href="#" class="list-group-item comprar-menu">
<h3>Agregar al carrito</h3>
<?php echo $this->Form->create('Product', array('default' => false, 'inputDefaults' => array(
'div' => 'form-group',
'label' => false,
'wrapInput' => false,
'class' => 'form-control'))); ?>
<div class="row">
<div class="col-md-12">
<?php
echo $this->Form->input('cantidad', array(
'options' => array(
50 => "50gr",
100 => "100gr",
150 => "150gr",
200 => "200gr",
250 => "250gr",
500 => "500gr",
1000 => "1kg",
'mayoreo' => "mayoreo",
),
'empty' => '(Seleccionar)',
));
?>
</div>
<div class="col-md-12 mayoreo">
<div class="input-group">
<?php echo $this->Form->input('mayoreo', array('label' => '', 'type'=>'number')); ?>
<span class="input-group-addon">KG</span>
</div>
</div>
<div class="col-md-12 subtotal">
<div id="<?php echo $te['Product']['price']; ?>"><span>$0.00 MXN</span> </div>
</div>
<div class="col-md-12">
</br>
<?php echo $this->Form->submit('Agregar', array('div' => 'form-group','class' => 'btn btn-info col-md-12')); ?>
</div>
</div>
<?php echo $this->Form->end(); ?>
<hr />
<h4>Ademas en tu carrito</h4>
<ul>
<li>Lung Jing <span class="pull-right">200gr</span></li>
<li>Pu Erh <span class="pull-right">1kg</span></li>
<li>Lapsang Su shang <span class="pull-right">10kg</span></li>
</ul>
<span class="pull-right">Subtotal: $2,500.00 MXN</span>
</span>
</div>
</div>
[…]
</div>
<?php endforeach; ?>
<span class="loading"></span>
<span class="icon close-content"><i class="fa fa-times"></i></span>
Then I tried to add some jQuery to make the UX nice and smooth…
function formatCurrency(total) {
var neg = false;
if(total < 0) {
neg = true;
total = Math.abs(total);
}
return (neg ? "-$" : '$') + parseFloat(total, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString();
}
$('.comprar-menu-button').click(function(){
$(this).next().slideToggle(function(){
if ($(this).is(':visible')){
$(this).css('display','inline-block');
}
});
});
$('.cantidad-te').change(function(){
var value, product, precio, cantidadEspecial;
value = $(this).val();
product = $(this).parent().parent();
precio = $(this).parent().parent().next().next().children();
cantidadEspecial =product.next();
if (value === 'mayoreo') {
cantidadEspecial.show();
precio.children().html('especifique cantidad');
}else{
cantidadEspecial.hide();
subtotal = precio.attr('id') * value;
precio.children().html(formatCurrency(subtotal) + ' MXN');
}
});
In theory it works, however it only works for the last element on my teas product.
Expected outcome
When clicking on any element it should:
show the div with the shopping cart
slideToggle should show the form to add product to shopping cart
When selecting an element from dropdown it should:
update with correct price
Current outcome
Only slideToggle() works for last element on my grid.
when changing values on dropdown list it does not make the changes specified.
Additional info
To see a live version of how the 3D grid works visit here (this is not the version am currently working with as I havent pushed the changes)
The code for live version is here
Page Source (HTML Outcome) - here as pointed out by #AlexAtNet
Thank you