We Keep Coding

Laravel Sessions: Why does my function load the old session?

I'm working on a shopping cart function using session. I am trying to make function that update the quantity of an item in shopping cart and reload the subtotal and the cart's items list on header of the page.The function update the session and reload the subtotal but the problem is that it reload the cart's items list with the old session's information (before i updated). I want it to get the new session's information. Could you give me any ideas how to fix this? Many thanks!
I tried js setTimeout($('#cart-button').load(),2000) to delay the function to see if it can get the new session but it's still not working.
P/s: I 've just tried to put $this->ajaxReloadCart($cart->totalQty, $this->money($cart->totalPrice), $cart->items); in subOneItem() function, it works fine but the cart list is now at the subtotal div
Here is my js function:
$('#sub-1-{{$item['item']['id']}}').click(function(){
var qty = $('#qty-{{$item['item']['id']}}').val();
var int_qty = parseInt(qty);
if(int_qty > 1){
int_qty--;
$('input#qty-{{$item['item']['id']}}').val(int_qty);
$('#sub-total').load('sub-one/{{$item['item']['id']}}');
$('#cart-button').load('reload-mini');
}
if(int_qty <= 1){
int_qty = 1;
}
});
My routes
Route::get('sub-one/{id}','PageController#subOneItem');
Route::get('reload-mini','PageController#reloadMiniCart');
and my controller functions:
-ajaxReloadCart:
public function ajaxReloadCart($totalQty, $totalPrice, $items){
echo ' <button type="button" class="btn btn-default">
<a href="view-cart">
<i class="fa fa-shopping-cart fa-lg"></i>
<div class="item-number">'
.$totalQty.
'</div>
</a>
</button>';
echo '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>';
echo ' <ul class="dropdown-menu cart-items-list" id="cart-items-list">';
foreach($items as $item){
$price = $this->money($item['item']['price']);
echo ' <li>
<div class="row" style="margin-left:0; margin-top:10px;">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<img src="upload/product/'.$item['item']->productimg->first()->name.'" width="100" />
</div>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<div class="row">
<strong>'.$item['item']['name'].'</strong>
</div>
<div class="row">'
.$price.' X '.$item['qty'].
'</div>
</div>
</div>
</li>';
}
echo ' <li><a><strong>Subtotal:</strong> <div class="pull-right">'.$totalPrice.'</div></a></li>
<li role="separator" class="divider"></li><li>To Checkout</li></ul>';
}
-subOneItem:
public function subOneItem($id){
$product = Product::find($id);
$oldCart = Session::has('cart') ? Session::get('cart') : null;
$cart = new Cart($oldCart);
$cart->subOne($product, $id);
Session::put('cart',$cart);
$totalPrice = $this->money($cart->totalPrice);
// display mini cart and total price
echo $totalPrice;
}
-reloadMiniCart:
public function reloadMiniCart(){
$oldCart = Session::has('cart') ? Session::get('cart') : null;
$cart = new Cart($oldCart);
$this->ajaxReloadCart($cart->totalQty, $this->money($cart->totalPrice), $cart->items);
}

Try to clear the session first before you assign the new cart values to the session
with Session::forget('cart'); or clear all session with Session::flush()
then assign the new cart info to session
in your subonitem() function after
Session::put('cart',$cart);
add Session::save();

I found other way to get the cart list reloaded but i think it's not the best way.
if you guys find any other ways, please comment below. I want to find a better way.
my solution:
reload cart list every 1s
setInterval(function(){
$('#cart-button').load('reload-mini');
},1000);

Dynamically sort posts by tags into a Wordpress loop

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

event.target in AJAX

Hopefully, my question is not too complicated.
function showSkills(event,str) {
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
event.target.parentElement.parentElement.parentElement.nextElementSibling.innerHTML = this.responseText;
}
};
xmlhttp.open("POST","skills.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("q=" + str);
event.target.parentElement.parentElement.parentElement.nextElementSibling.style.display = "block";
}
The block is diplayed, so the last row of code is fine, but I cannot post $q. I know where the problem is, but I don't know how to fix it:
If I put document.getElementById("skills").innerHTML = this.responseText; instead of event.target.parentElement.parentElement.parentElement.nextElementSibling.innerHTML = this.responseText; everything works fine, but only for <div id="skills'>, not for skills2 of course. I have to use this script for more div IDs (skills, skills2, skills3) separately.
My HTML:
<div class="bgimg" style="background-image:url('pic/a3.jpeg');">
<h3 onclick="displayGrow(event)">bla bla</h3>
<div id="sport" class="hide resetInput"><?php include 'sport.php'; ?></div>
<div id="skills" class="hide resetInput"><?php include 'skills.php'; ?></div>
</div><!-- end of the 1st Parallax -->
<div class="bgimg" style="background-image: url('pic/a5.jpg');">
<h3 onclick="displayGrow(event)">bla bla</h3>
<div id="sport2" class="hide resetInput"><?php include 'sport.php'; ?></div>
<div id="skills2" class="hide resetInput"><?php include 'skills.php'; ?></div>
</div><!-- end of the 2nd Parallax -->
and sport.php code:
<?php
include 'cookies.php';
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (isset($_POST['q'])) {
$q = $_POST['q'];
}}
?>
<div class="dropdown marginTop">
<button><!-- select sport -->
<?php // "select your sport"
if (isset($q)) {
$result = mysqli_query($con, 'SELECT ' .$language. ' FROM sports WHERE name1="' .$q. '" LIMIT 1');
} else {
$result = mysqli_query($con, 'SELECT ' .$language. ' FROM page WHERE title="selSport1" LIMIT 1');
}
$row = mysqli_fetch_row($result);
print_r($row[0]);
?>
</button>
<div class="dropdown-content">
<?php // sports list
$sportlist = mysqli_query($con, 'SELECT * FROM sports WHERE title = "sports" ORDER BY ' .$language. ' ASC');
while ($row = mysqli_fetch_array($sportlist)) {
echo '
<button class = "buttonList" value="' . $row[1] . '"';?>
onclick="showSport(event, this.value); showSkills(event, this.value);"
<?php echo ' style="border:0;">' . $row[$language] . '</button>
';
}
?>
</div>
</div>
So after showSport() was invoked, the button with $q value is diplayed in sport.php. This works fine for both div IDs: sport and sport2 aswell. Another function showSkills() should open skill.php in <div id="skills"> or in <div id="skills2"> and post $q there. The section was opened, but without $q inside.
Any ideas? Would help me a lot.

event.target.parentElement.parentElement.parentElement.nextElementSibling is far too much climbing up the DOM for my taste. When I understand you right, you use the same function as a event handler for multiple elements. Why don't you just pass the ID of the particular, associated div as a parameter? I add an example below.
// Note, I do not know what your 'str' is, so here it is just 'foo'
document.getElementById('event-div-1').addEventListener('click', showSkills.bind(null, 'skills1', 'foo'));
document.getElementById('event-div-2').addEventListener('click', showSkills.bind(null, 'skills2', 'foo'));
document.getElementById('event-div-3').addEventListener('click', showSkills.bind(null, 'skills3', 'foo'));
function showSkills(skills, event, str) {
// Ajax stuff
document.getElementById(skills).style.display = 'block';
}
.skills {
display: none;
}
<div class="skills"
id="skills1">1</div>
<div class="skills"
id="skills2">2</div>
<div class="skills"
id="skills3">3</div>
<div id="event-div-1">Click me for skills 1</div>
<div id="event-div-2">Click me for skills 2</div>
<div id="event-div-3">Click me for skills 3</div>

How can i disable the div to stop closing

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;
}

Unable to add to cart on other .php pages

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.