Develop Reference

Can't add checkout and clear cart buttons in popover in bootstrap 5

I am using BootStrap version 5.0.0 beta-2, I'm trying to add button dynamically in my popover which I can't. I've included scripts in the following order:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
My code to update popover is like this:
// Updating Popover
function updatePopover(cart) {
popStr = "";
i = 1;
popStr = popStr + "<div class='my-2 mx-1'>";
for (item in cart) {
popStr = popStr + "<b>" + i + ". </b>";
popStr = popStr + document.getElementById('name' + item).innerHTML + " | <b>Qty:</b> " + cart[item] + "<br>";
i += 1;
}
// Adding Clear Cart and Checkout buttons
popStr = popStr + "</div> <a href='/shop/checkout'><button class='btn btn-primary' id='checkout'>Checkout</button></a> <button class='btn btn-primary' id='clearCart' onclick='clearCart();'>Clear Cart</button>";
console.log(popStr);
// Getting popcart by ID
var popcart = document.getElementById('popcart')
// Enabling popover
var popover = new bootstrap.Popover(popcart, 'data-bs-content')
// Setting new value of popcart
popcart.setAttribute('data-bs-content', popStr);
// Showing the popover
popover.show();
}
My HTML division is like this:
{% for i in product %}
<div class="col-xs-3 col-sm-3 col-md-3">
<div class="card align-items-center" style="width: 18rem; border: 0px;">
<img src="/media/{{i.product_img}}" class="card-img-top" alt="{{i.product_name}}">
<div class="card-body text-center">
<h6 class="card-title" id="namepid{{i.id}}">{{i.product_name}}</h6>
<p class="card-text">{{i.product_desc|slice:":25"}}{% if i.product_desc|length > 25 %}...{% endif %}</p>
<span id="divpid{{i.id}}" class="divpid">
<button id="pid{{i.id}}" class="btn btn-warning cart">Add to Cart</button>
</span>
<button id="vid{{i.id}}" class="btn btn-primary cart">View Product</button>
</div>
<!-- card body text end-->
</div>
<!-- card body items end-->
</div>
<!-- col-xs-3 col-sm-3 col-md-3 end-->
{% if forloop.counter|divisibleby:4 and forloop.counter > 0 and not forloop.last %}
</div>
<div class="carousel-item">
{% endif %} {% endfor %}
</div>

Do this
$("#popcart").popover({
html: true,
sanitize: false
});

Okay so I went to BootStrap v5.0 's beta version's documentation and I got to know that by default it sanitized many HTML elements, thus even though I was writing code to add buttons they were being sanitized at the time of showing popover. To prevent the buttons from being sanitized, I added the following lines in my JS:
var myDefaultAllowList = bootstrap.Tooltip.Default.allowList;
myDefaultAllowList.button = ['type', 'onclick'];
Here providing the list of attributes that I don't want to be automatically sanitized.

How to load Header HTML file in each page

I have an HTML Header page which is consist of nav bar which is loaded dynamically and i have several other pages also.
i want to include the Navbar (Header.html) in each of my page to reduce the code i am doing the right thing like this using J Query .load function and it is working fine also
the issue i a facing is my i have Bootstrap 4 navbar and in other pages i have an form by clicking on the submit of the form i am rendering an HTML table which has an export button also,and i am using table2export cdn to export table into the excel
so when i load my header with the table it shows an error Uncaught TypeError: $(...).table2excel is not a function when i remove and writing the navbar code in each page rather than loading it into each page then it is working fine
HTML
<div id="header"></div>
<h4 class="text-center">Date wise Outlet wise Sales Summary :</h4>
<form id="formId" method="get">
<div class="container">
<h4>Start Date:</h4>
<input type="text" id="startdate" name="fromdate" width="276"
placeholder="dd/mm/yyyy" required onchange="checkDate()" />
<h4>End Date:</h4>
<input type="text" id="enddate" name="todate" width="276"
placeholder="dd/mm/yyyy" required onchange="checkDate()"/>
<h4>Outlets:</h4>
<select name="outlet" id="myselect">
<option>ALL</option>
</select>
<div><br>
</div>
<div>
<br>
<button id="button" class="btn btn-default" type="submit">Search</button>
</div>
</div>
</form>
<div class="loader"></div>
<div class="overlay"></div>
<div id="tbl"></div>
<button id="export-btn">
<i class="fa fa-file-excel-o" aria-hidden="true"></i> Export
</button>
<div style="padding-bottom: 100px">
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gijgo#1.9.6/js/gijgo.min.js"
type="text/javascript"></script>
<script src="https://rawgit.com/unconditional/jquery able2excel/master/src/jquery.table2excel.js"></script> //using this one to export
<script type="text/javascript" src="JS/Datewiseolwise.js"></script> // this is for table rendering js code
<script type="text/javascript" src="JS/headerfooter.js"></script> //this is my header javascript file
<script type="text/javascript" src="JS/Date.js"></script>
<script type="text/javascript" src="JS/Outletlist.js"></script>
**javascript for loading the header in each page**
$(document).ready(function() {
$("#header").load("Header.html");
});
and here is my navbar code
<nav
class="navbar navbar-expand-sm bg-dark navbar-dark navbar fixed-top">
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul id="navbarId" class="navbar-nav mr-auto">
</ul>
</div>
<a class="navbar-brand" href="Header.html">HOME</a>
</nav>
<div style="padding: 30px"></div>
<div class="col-sm-12">
<div class="name"></div>
<hr style="border: solid 1px black">
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="JS/Header.js">
</script>
i thing there is problem in placing thecdn of table2excel at right place but i have tried hard its not working and throwing same error
anyone out there please check what i am missing
header5.js script
$(document).ready(function() {
$.ajax({
url : "HeaderServlet",
method : "GET",
success : function(data) {
for (var item in data) {
var _menu = "";
var _submenuData = data[item];
if(_submenuData.length > 0) {
var _submenu = "";
for(var i = 0; i < _submenuData.length; i++) {
_submenu += "<a class='dropdown-item' href='" + _submenuData[i]["link"] + "'>" + _submenuData[i]["type"] + "</a>";
}
_menu = "<li class='nav-item dropdown'>"
+ "<a class='nav-link dropdown-toggle' href='' id='navbardrop' data-toggle='dropdown'> " + item + " </a>"
+ "<div id='drop' class='dropdown-menu'>"
+ _submenu
+ "</div>"
+ "</li>";
}
$("#navbarId").append(_menu);
}
var _logout = "<li class='nav-item'>" +
"<a class='nav-link' href='Logout'> Logout </a>" +
"</li>";
$("#navbarId").append(_logout);
}
});
$.ajax({
url : "LoginServlet",
method : "GET",
success : function(data) {
$(".name").text("Welcome '" +data[0].Name + "'-" +data[0].Companyname)
}
});
});

Hello first of open console and write simple "table2excel" check library load or not ?
If library is loaded then use like
$("#yourHtmTable").table2excel({
exclude: ".excludeThisClass",
name: "Worksheet Name",
filename: "SomeFile" //do not include extension
});
CDN

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

Getting "Parameter undefined" in jQuery with AJAX, MySQL and PHP

I'm building a shopping site in PHP with mysqli database and I have a "category" and a "brands" sections in that.
What I want is that the user can filter the products in the store by clicking on category & brands section without page refreshing with help of ajax jQuery.
For example on Category>Electronics and it will show him the Electronics products on site main page.
Maybe with the code, it will be clearer.
This is the part of the HTML:
<div class="panel panel-info">
<div class="panel-heading">Products</div>
<div class="panel-body">
<div id="getProduct"></div>
</div>
This is the PHP code in the "action.php" file:
<?php
if(isset($_POST["getSelectedCategory"])){
$cid=$_POST["categoryID"];
$sql="SELECT * FROM products WHERE productCat = '$cid' ";
$run_query=mysqli_query($con, $sql);
while($row=mysqli_fetch_arry($run_query)){
$productID = $row["productID"];
$productCat = $row["productCat"];
$productBrand = $row["productBrand"];
$productTitle = $row["productTitle"];
$productPrice = $row["productPrice"];
$productIMG = $row["productIMG"];
echo " <div class='col-md-4'>
<div class='panel panel-info'>
<div class='panel-heading'>$productTitle</div>
<div class='panel-body'>
<img src='assets/$productIMG' style='width: 160px; height: 250px;'/>
</div>
<div class='panel-heading'>$productPrice.00$
<button pid='$productID' style='float: right;' class='btn btn-danger btn-xs'>Add To Cart</button>
</div>
</div>
</div> ";
}
}
?>
This is the jQuery code:
$("body").delegate(".category","click",function (event) {
event.preventDefault();
var cid = $(this).attr("categoryID");
/*Used this alert to see if the
right category number is shown, Here it says undefined*/
alert(cid);
$.ajax({
url: "action.php",
method: "POST",
data: {getSelectedCategory: 1, categoryID: cid},
success: function (data){
$("#getProduct").html(data);
}
})
});
I can't seem to find the problem in my code.

You js code is listening to .category class. And there is no such class in your php code template. That's how your echo should look like to work:
echo " <div class='col-md-4'>
<div class='panel panel-info'>
<div class='panel-heading'>$productTitle</div>
<div class='panel-body'>
<img src='assets/$productIMG' style='width: 160px; height: 250px;'/>
</div>
<div class='panel-heading'>
<a class='category' categoryID = '$productCat'>$productBrand</a>
$productPrice.00$
<button pid='$productID' style='float: right;' class='btn btn-danger btn-xs'>Add To Cart</button>
</div>
</div>
</div> ";
Look - I've added <a class="category" categoryID = '$productCat'>$productBrand </a> to you panel-header.

Issues with infinity scroll feature - JQuery working, but new data is not loading

I am trying to implement infinity scroll but I am having issues. profile_page.php by default, should display 10 posts, then when the user reaches the bottom of the page, it should display another 10 rows from the database.
The problem is that I know my JQuery is working because the alert() is occuring when I reach the bottom of the page, but new data from the data is not being printed.
Here is my script (which can be found in **profile_page.php**):
<script>
$(document).ready(function(){
var load = 0;
$(window).scroll(function(){
if($(window).scrollTop() == $(document).height() - $(window).height()){
load++;
// start AJAX
$.post("inc/ajax.php", {load:load},function (data){
$(".userposts_panel").append(data); // images class
alert ("bottom");
});
}
});
});
</script>
And here is **ajax.php**
$load = htmlentities(strip_tags($_POST['load']))*10;
$query = mysqli_query ($connect, "SELECT * FROM user_thoughts WHERE added_by='$user' ORDER BY id DESC LIMIT ".$load.",10");
while ($row = mysqli_fetch_assoc($query)) {
$thought_id = $row['id'];
$message_content = $row['message'];
$date_of_msg = $row['post_details'];
$thoughts_by = $row['added_by'];
$attachent = $row['attachment'];
echo "<div class='message_wrapper'>
<div class='where_msg_displayed'>
<div class='more_options' style='float: right;'>
<li class='dropdown'>
<a 'href='#' class='dropdown-toggle' data-toggle='dropdown' role='button' aria-haspopup='true' aria-expanded='false'> More <span
class='caret'></span></a>
<ul class='dropdown-menu'>
<li><a href>Flag Post
<span id='options' class='glyphicon glyphicon glyphicon-flag' aria-hidden='true'></span> </a></li>";
if ($user == $username){
echo "<li>"; ?> <a href="del_post.php?id=<?php echo $thought_id;?>">Delete <?php
echo "<span id='remove' class='glyphicon glyphicon-remove' aria-hidden='true'></span> </a></li>";
} echo"
</ul>
</li>
</div>
<img src='$profile_pic' height= '68px' style='border: 1px solid #F0F0F0;'/>
<span style='margin-left: 10px;'>$message_content </span> <br/> <br/>";
if ($attachent !=""){
echo "<img src='user_data/attached_images/$attachent' style='width: 230px; height=230px;'/>";
} echo "
</div>
<div class='where_details_displayed'>
<a href='profile_page/$thoughts_by'> <b> $name_of_user </b> </a> - $date_of_msg
<div class='mini_nav' style='float: right;'>
<span class='glyphicon glyphicon-heart-empty' aria-hidden='true' style='padding-right: 5px;' onclick='changeIcon()' ></span> |
<a onclick='return toggle($thought_id);' style='padding-left: 5px;'> View comments ($num_of_comments) </a>
</div>
<div id='toggleComment$thought_id' class='new_comment' style='display:none;'>
<br/> $comment_posted_by said: $comment_body
</div>
</div>
</div>";
}
The echo consists of the divs in which each post is displayed. But when I reach the end of the page, no new content loads. For example, if there are 12 posts by user Alice, 10 will be displayed by default, then when I scroll down, the other two should load, but they dont.