my jquery script is not working - javascript

I have a form that filters data by year and month which worked fine before I left to work but the next day it was not working anymore. I'm using jQuery and PHP and MySQLi. Can someone help me with this? I can't seem to find the problem in my code:
reports.php
<?php
session_start();
if (!isset($_SESSION['username'])) {
header('Location: filter.php');
}
else{
$uname=$_SESSION['username'];
}
?>
<html>
<head>
<title>LADD DMS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="icon" type="image/png/gif" href="pcflogo.png">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
body {
background-image:url('bg.png');
}
.box {
width:100%;
padding:20px;
background-color:#fff;
border-radius:5px;
margin-top:25px;
}
.navbar-default {
background-color:teal;
}
.navbar-default .navbar-brand {
color: white;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
border-bottom:2px solid whitesmoke;
color:white;
}
li:hover {
border-bottom:2px solid whitesmoke;
}
.button{
display:inline
}
.modal-header {
color:white;
border-bottom:1px solid #eee;
background-color: teal;
-webkit-border-top-left-radius: -5px;
-webkit-border-top-right-radius: -5px;
-moz-border-radius-topleft: -5px;
-moz-border-radius-topright: -5px;
border-top-left-radius: -5px;
border-top-right-radius: -5px;
}
.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
background-color: #f2f2f2;
}
.bootgrid-table th > .column-header-anchor {
color:white;
font-weight:bold;
}
.bootgrid-table th > .column-header-anchor:hover {
color:black;
font-weight:bold;
}
.footer {
position: fixed;
height:40px;
left: 0;
bottom: 0;
width: 100%;
background-color: teal;
color: white;
text-align: center;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">LADD DMS</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="../blgd1/index2.php" >Home </a></li>
<li>Documents</li>
<li>Files</li>
<li>Reports</li>
<li>View Documents monthly</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> Welcome, <?=$_SESSION['username'];?> <span class="glyphicon glyphicon-off" aria-hidden="true" ></span> </li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container box" style="background-image:url('bg.png'); ">
<br />
<div align="right">
</div>
<h1>Monthly Year</h1>
<div id="ab">Monthly Filter:</div><select id="year" name="fetchby" class="form-control">
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
</select>
<h1>Monthly Report</h1>
<div id="ab">Monthly Filter:</div>
<select id="month" name="fetchby" class="form-control" >
<option value="01">January</option>
<option value="02">Febuary</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
</select>
<br>
<br>
<div class="table-responsive">
<table class="table table-striped" style="font-size:15px;">
<?php
$conn = mysqli_connect('localhost','root','','dms');
$query="select * from document";
$output=mysqli_query($conn,$query);
?>
<div class="table-responsive" >
<table id="data-table" class="table table-striped">
<thead style="background-color:teal;">
<tr>
<th >subject</th>
<th>type</th>
<th>date</th>
<th>Transaction</th>
<th>Signatories</th>
</tr>
</thead>
<tbody>
<?php
while($fetch = mysqli_fetch_assoc($output)) {
echo '<tr>';
echo '<td>'.$fetch['document_name'].'</td>';
echo '<td>'.$fetch['document_type'].'</td>';
echo '<td>'.$fetch['document_status'].'</td>';
echo '<td>'.$fetch['document_date'].'</td>';
echo '<td>'.$fetch['document_signatories'].'</td>';
echo '</tr>';
};
echo '</table>';
?>
</div>
</div>
<div class="footer">
<h4>Copyright LADD KIDS 2018<h4>
</div>
<script>
$(document).ready(function() {
$("#month").on('change',function()
var month = $("#month").val();
var year = $("#year").val();
var keyword = year+"-"+month;
$.ajax({
url:'fetchreport.php',
type:'POST',
data:'keyword='+keyword,
beforeSend:function() {
$("#table-container").html('Working...');
},
success:function(data) {
$("#table-container").html(data);
},
});
});
});
</script>
</body>
</html>
fetchreport.php
<?php
$conn = mysqli_connect('localhost','root','','dms');
$keyword=$_POST['keyword'];
$query="SELECT * FROM document WHERE document_date LIKE '%".$keyword."%'";
$output=mysqli_query($conn,$query);
echo '<table border="1"';
echo '<tr>
<th>Subject:</th>
<th>Type:</th>
<th>Transaction</th>
<th>Date Recieved/Released:</th>
<th>Signatories:</th>
</tr>';
while($fetch = mysqli_fetch_assoc($output)) {
echo '<tr>';
echo '<td>'.$fetch['document_name'].'</td>';
echo '<td>'.$fetch['document_type'].'</td>';
echo '<td>'.$fetch['document_status'].'</td>';
echo '<td>'.$fetch['document_date'].'</td>';
echo '<td>'.$fetch['document_signatories'].'</td>';
echo '</tr>';
};
echo '</table>';
?>


From what i see you do not have a div or table with table-container as id
You should add <div id="table-container"></div> somewhere in your html. Seems the result from php never gets displayed
Second typo
As pointed out by Rasclatt, you have a typo in the table definition by the php side.
Change
echo '<table border="1"';
To
echo '<table border="1">'; #close
Side-note: please use prepared statements to prevent SQL injection attacks

Related

HTML not transferring to PDF using JSPDF

I am trying to use jspdf to print div element into pdf. However its giving me margin error.I am not sure where I am going wrong. I have added margins but its coming in line bey line and is missing CSS which I have written. As requested I have added the HTML code as well.
Below is the js I have written
margins = {
top: 70,
bottom: 40,
left: 30,
width: 550
};
function genIdCards(){
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.setFontSize(18);
pdf.fromHTML(document.getElementById('id-card'),
margins.left, // x coord
margins.top,
{
// y coord
width: margins.width// max width of content on PDF
},function(dispose) {
pdf.save('Test.pdf');
},
margins);
};
<script src="https://unpkg.com/jspdf#latest/dist/jspdf.min.js"></script>
<button onclick="genIdCards()">Generate PDF</button>
CSS
.id-card {
height: auto;
float: left;
background: #fff;
width: 500px;
margin: 40px;
border: 1px solid #7c0000;
}
.apeejay-school {
height: 97px;
width: 100%;
background: #7c0000;
}
.logo {
width: 20%;
height: auto;
float: left;
text-align: center;
}
.logo img {
margin-top: 8px;
}
.apeejay-school-content {
width: 75%;
height: auto;
float: left;
padding-left: 10px;
text-align: center;
}
below is the html
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<head>
<?php include_once("../header.php"); ?>
</head>
<!-- END HEAD -->
<body class="page-header-fixed page-sidebar-closed-hide-logo page-container-bg-solid page-content-white">
<div class="page-wrapper">
<?php include_once("../navbar.php"); ?>
<!-- BEGIN HEADER & CONTENT DIVIDER -->
<div class="clearfix">
</div>
<!-- END HEADER & CONTENT DIVIDER -->
<!-- BEGIN CONTAINER -->
<div class="page-container">
<?php include_once("../side_bar.php"); ?>
<!-- BEGIN CONTENT -->
<div class="page-content-wrapper">
<!-- BEGIN CONTENT BODY -->
<div class="page-content">
<div class="page-bar">
<ul class="page-breadcrumb">
<li>
Student Management
<i class="fa fa-circle"></i>
</li>
<li>
<span>ID Cards</span>
</li>
</ul>
</div>
<?php include_once("../lcode.php");?>
<br><br>
<div class="row">
<div class="col-sm-3">
<label> Academic Year*</label>
<select id="acadyear" name="acadyr" class="form-control">
<option value="" selected="selected">--Please select--</option>
<?php fetch_acad_yr($conn);
?>
</select>
</div>
<div class="col-sm-3">
<label> Class</label>
<select id="acadclass" name="cclass" class="form-control">
<option value="" selected="selected">--Please select--</option>
<?php fetch_class($conn);
?>
</select>
</div>
<div class="col-sm-3">
<label>Section</label>
<select id="section" name="csec" class="form-control">
<option value="" selected="selected">--Please select--</option>
<?php fetch_section($conn);
?>
</select>
</div>
<div class="col-sm-3">
<button id="liststudents" type="submit" class="btn btn-primary" name="process" style="margin-top: 6%;"><span class="glyphicon glyphicon-ok"></span> Display List</button>
</div>
</div>
<br>
<button id="genId" type="submit" class="btn btn-success" onclick="genIdCards()"><span class="glyphicon glyphicon-ok"></span> Generate Id Cards</button>
<br><br><br>
<div class="row">
<div class="col-lg-6 col-xs-12 col-sm-12">
<div class="portlet light">
<div class="table-responsive">
<table id="liststu" class="table table-condensed table-hover">
<thead>
<tr>
<th><input type="checkbox"></th>
<th>Student ID</th>
<th>Name</th>
<th>Class and Section</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-6 col-xs-12 col-sm-12">
<div id="id-card" class="id-card">
<div class="apeejay-school">
<div class="logo"><img src="logo.png" alt="apeejay School"></div>
<div class="apeejay-school-content">
<div class="apeejay-school-txt">
Apeejay School
</div>
<div class="school-location text-center">
college Road , Charkhi Dadri-127306
</div>
<div class="ph-fax text-center">Ph.:01250-222172, Fax : 01250-225172</div>
<div class="email-apeejay-school text-center">Email : skool.ms.chkd#ap.edu</div>
</div>
</div>
<div class="clearfix"></div>
<div class="student-information">
<div class="student-details">
<div name="idName" class="name">Atul Kumar</div>
<div class="student-details-txt">
<div class="category">F / Name :</div>
<div name="idFname" class="category-detail">O P Sharma</div>
</div>
<div class="student-details-txt">
<div class="category">Admin . No.:</div>
<div name="idAno" class="category-detail">001</div>
</div>
<div class="student-details-txt">
<div class="category">Class :</div>
<div name="idCls" class="category-detail"> VI</div>
</div>
<div class="student-details-txt">
<div class="category">House :</div>
<div name="idHouse" class="category-detail">Nayak</div>
</div>
<div class="student-details-txt">
<div class="category">Address :</div>
<div name="idAdd" class="category-detail">25/2 , Krishana Colony, <br>Bhiwani</div>
</div>
<div class="student-details-txt">
<div class="category">Phone No :</div>
<div name="idPhnum" class="category-detail">XXXXXXXXXXXXXXX </div>
</div>
</div>
<div class="student-bio">
<div name="idSession" class="session">2009-2010</div>
<div class="student-pic"><img id="<?php echo ASSETIMG_PATH ?>" class="student-pic" name="stuimg" alt="Student"></div>
<div class="sinature"></div>
<div class="principal">Principal Sign</div>
</div>
</div>
</div>
<!--
<div class="portlet light">
<div class="radio">
<label><input type="radio" name="optradio">Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Option 1</label>
</div>
</div>
-->
</div>
</div>
</div>
</div>
<!-- END QUICK SIDEBAR -->
</div>
</div>
<!-- END CONTAINER -->
<?php include_once("../footer_text.php"); ?>
</div>
<div id="idhtml">
</div>
<div class="quick-nav-overlay"></div>
<?php include_once("../footer.php"); ?>
<script type="text/javascript" src="<?=ASSET_PATH?>assets/staff_js/validation.js"></script>
<script type="text/javascript" src="<?=ASSET_PATH?>assets/staff_js/stumgmt/jspdf.min.js"></script>
<script type="text/javascript" src="<?=ASSET_PATH?>assets/staff_js/stumgmt/icard.js"></script>
</body>
</html>

Move out the pdf.save() from function(dispose){}, below is the working one
margins = {
top: 70,
bottom: 40,
left: 30,
width: 550
};
function genIdCards() {
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.setFontSize(18);
pdf.fromHTML(document.getElementById('id-card'),
margins.left, // x coord
margins.top, {
// y coord
width: margins.width // max width of content on PDF
},
function(dispose) {
pdf.save('Test.pdf');
},
margins);
};
#id-card {
height: auto;
float: left;
background: #fff;
width: 500px;
margin: 40px;
border: 1px solid #7c0000;
}
.apeejay-school {
height: 97px;
width: 100%;
background: #7c0000;
}
.logo {
width: 20%;
height: auto;
float: left;
text-align: center;
}
.logo img {
margin-top: 8px;
}
.apeejay-school-content {
width: 75%;
height: auto;
float: left;
padding-left: 10px;
text-align: center;
}
<script src="https://unpkg.com/jspdf#latest/dist/jspdf.min.js"></script>
<div id='id-card'>
<div class="logo">
<img src="test.jpg">
</div>
<div class=".apeejay-school">
<div class="apeejay-school-content">
Some content for testSome content for testSome content for testSome content for testSome content for testSome content for testSome content for test
</div>
</div>
</div>
<button onclick="genIdCards()">Generate PDF</button>

I wrote for you the working solution. You do not have to change the position of pdf.save('Test.pdf');
var margins =
{
top: 70,
left: 30,
right: 30,
bottom: 40,
width: 550
};
function genIdCards()
{
var pdf = new jsPDF('p', 'pt', 'a4');
//pdf.setFontSize(18);
pdf.fromHTML(document.getElementById('idhtml'),
margins.left, // x coord
margins.top,
{
// y coord
width: margins.width // max width of content on PDF
},
function(dispose)
{
//headerFooterFormatting(pdf, pdf.internal.getNumberOfPages());
pdf.save('Test.pdf');
},
margins
);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js" crossorigin="anonymous"></script>
<ul id="idhtml">
<li>Some text 1</li>
<li>Some text 2</li>
<li>Some text 3</li>
</ul>
<button onclick="genIdCards()">Generate PDF</button>
Edit:
After your question changing I have tried to find new solution for you. Unfortunatelly jsPDF does not support the CSS. Only simple HTML will be supported. But I wrote the new solution for you without CSS:
Please execute this snippet on codepen.io and see the PDF.

Tooltip position apperance issue

I have Used Bootstrap here....My popover tootip position is not correct. As I want it to appear in the extreme right corner with the Glyphicon but it still appears at the left Position.
So, what I Tried earlier :
1) I just changed the CSS and tried to align the popover on the right but it did not work.
$("[data-toggle=popover]").popover({
html: "true",
container: 'body',
title : 'Contact Us ×',
content: function() {
return $('#popover-content').html();
}
});
$(document).on("click", ".popover .close" , function(){
$(this).parents(".popover").popover('hide');
});
.form-control {width:120px;}
.popover {
max-width:300px; }
#contact_query.btn.btn-primary
{
background-color:#74a5d0;
}
#call_icon.glyphicon.glyphicon-earphone {
position: fixed;
top: 8px;
right: 16px;
font-size: 30px;
}
#media (max-width: 767px) {
#contact_query.btn.btn-primary
{
font-size:13px;
}
#query-pos
{
font-size:13px;
}
#email-pos
{
font-size:13px;
}
#ph_1,#ph_2
{
font-size:13px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="container">
<ul class="list-unstyled">
<li><a data-placement="right" data-toggle="popover" data-title="" data-container="body" type="button" data-html="true" href="#contact" id="login_try"><span id="call_icon" class="glyphicon glyphicon-earphone"></span></a></li>
<div id="popover-content" class="hide">
<form class="form-inline" role="form">
<div class="form-group">
<div class="row">
<div class="col-xs-12" ><div>123123121231 <a id="ph_1" href="tel:+9112313313123" type="submit" class="btn btn-primary" ><span class="glyphicon glyphicon-earphone"></span></a></div><br/></div>
<div class="col-xs-12" ><div>1231231223 <a id="ph_2" href="tel:+91121312312" type="submit" class="btn btn-primary" ><span class="glyphicon glyphicon-earphone"></span></a></div></div>
</div><hr>
<div class="row">
<div class="col-xs-12"><p><b>Unable to Contact us? </b><br/>
<p id="query-pos"><a id="contact_query" href="#" class="btn btn-primary">Send your Query</a> and our team will get back to you at the earliest.</p></p></div></div>
<div ><hr><p><b>Or you can</b><br/><p id="email-pos">E-mail us # example#example.com</p></p></div>
</div>
</form>
</div>
</ul>
</div>
</body>
</html>

Add position: fixed on the anchor that opens the popup instead of the icon. Because popover is trying the align the popover relative to the anchor that opens it. And the position of the anchor is still at left as its not position: fixed to the right.
.phone_icon {
position: fixed;
top: 8px;
right: 16px;
}
#call_icon.glyphicon.glyphicon-earphone {
font-size: 30px;
}
Also changed the data-placement to left, as there is no space on right.
$("[data-toggle=popover]").popover({
html: "true",
container: 'body',
title: 'Contact Us ×',
content: function() {
return $('#popover-content').html();
}
});
$(document).on("click", ".popover .close", function() {
$(this).parents(".popover").popover('hide');
});
.form-control {
width: 120px;
}
.popover {
max-width: 300px;
}
#contact_query.btn.btn-primary {
background-color: #74a5d0;
}
.phone_icon {
position: fixed;
top: 8px;
right: 16px;
}
#call_icon.glyphicon.glyphicon-earphone {
font-size: 30px;
}
#media (max-width: 767px) {
#contact_query.btn.btn-primary {
font-size: 13px;
}
#query-pos {
font-size: 13px;
}
#email-pos {
font-size: 13px;
}
#ph_1,
#ph_2 {
font-size: 13px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="container">
<ul class="list-unstyled">
<li><a class="phone_icon" data-placement="left" data-toggle="popover" data-title="" data-container="body" type="button" data-html="true" href="#contact" id="login_try"><span id="call_icon" class="glyphicon glyphicon-earphone"></span></a></li>
<div id="popover-content" class="hide">
<form class="form-inline" role="form">
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<div>123123121231 <a id="ph_1" href="tel:+9112313313123" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-earphone"></span></a></div><br/></div>
<div class="col-xs-12">
<div>1231231223 <a id="ph_2" href="tel:+91121312312" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-earphone"></span></a></div>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<p><b>Unable to Contact us? </b><br/>
<p id="query-pos"><a id="contact_query" href="#" class="btn btn-primary">Send your Query</a> and our team will get back to you at the earliest.</p>
</p>
</div>
</div>
<div>
<hr>
<p><b>Or you can</b><br/>
<p id="email-pos">E-mail us # example#example.com</p>
</p>
</div>
</div>
</form>
</div>
</ul>
</div>
</body>
</html>

How to register JS file inside foreach loop in Yii2?

I am trying to display QR code inside the ID card. Now I am trying to print 10 ID cards at single time, so I had put the ID card design inside a for-each loop but I cannot register the JavaScript code inside the for-each loop. Only one QR code is display. I mean JavaScript is registered just once inside a loop.
I have registered JavaScript inside for-each loop and name of .js file is qr.js. My Code for ID card design is:
<div id="printableContainer">
<div class="aaa" style="width: 100%;font-size: 12px;padding: 5px 0px;">
<?php
foreach ($students as $stuKey => $student) {
$patron = \app\models\Patrons::findOne(['patron_id' => $student->patron_id]);
if ($patron) {
if ($patron->type == 1) {
$model = \app\models\std\Student::find()
->joinWith([
"fkStudent",
])
->where(["student.id" => $patron->patron_id])
->one();
if ($model !== null) {
$patrons_details = $model;
}
// $patrons_details = null;
}
} else {
return "No Patron found by this name";
}
?>
<?php if ($i % 6 != 0) {
?>
<div id='data' sid="<?= $patrons_details['student']->id; ?>" >
</div>
<?php
$this->registerJs($this->render("qr.js"), 5);
?>
<div class=" w3-margin-top" style="float: left;margin-left:5px;margin-right:5px;margin-top:5px;margin-bottom:25px;">
<div class="id-card-holder" style="border: 1px solid;">
<div class="id-card">
<div class="row row1">
<div class="header">
<div class="col-md-3 " style="float:left;padding: 0px;">
<img src="<?= Yii::getAlias('#web') . "/images/" . $college->logo ?>" style="width:50px; height: 42px;"/>
</div>
<div class="col-md-9" style="text-align: center;padding: 0px;line-height: 1">
<!--<span style="font-size: 10px; color: red !important;font-weight: bold !important"><?= $college->affiliated_to ?></span><br>-->
<span style='font-size: 10px;color:black !important; font-weight: bold !important'><?= $college->college_name ?></span><br>
<span style="font-size: 9px; color: blue !important;font-weight: bold !important"><?= $college->address ?></span><br>
</div>
</div>
</div>
<div class="row row1" style="background-color:#e48b8b;margin-right: -4px !important;margin-left: -4px !important;margin-top:5px ">
<h6 style="margin-top: 3px;margin-bottom: 3px;">Student ID Card</h6>
</div>
<div class="row row1">
<div class="col-md-6 " style="float:left" >
<div class="photo" >
<img style="width:77px;height:77px;padding-top: 3px;border: 1px solid;" class="" src="<?= \yii\helpers\Url::to(["/image/index", 'name' => $patrons_details['fkStudent']->img, 'fc' => 'student', 'student' => $patrons_details['fkStudent']->id]) ?>" >
</div>
</div>
<div class="col-md-6" >
<div class="qrphoto" >
<div id="qrcode"></div>
</div>
</div>
</div>
<h5 style="margin-top:4px !important;
margin-bottom:0px !important;"><b><?= $patrons_details['fkStudent']->first_name . ' ' . $patrons_details['fkStudent']->middle_name . ' ' . $patrons_details['fkStudent']->last_name ?></b></h5>
<div class="row row1">
<div class="col-md-12" style="text-align: justify;padding: 0px;line-height: 0.74">
<div class="" style="line-height: 1 !important;padding: 1px 0px 0px 3px !important;margin-top: 6px;">
<?php if ($patron->renual_status == 0) { ?>
<span style="font-size: 10px; color: #6d6969; font-weight: bold;">Card No. :-</span> <span style="font-size: 10px; color :#3e3b3b !important;font-weight: bold;"><?= $patron->patron_id ?></span><br>
<?php } else { ?>
<span style="font-size: 10px; color: #6d6969; font-weight: bold;">Card No. :-</span> <span style="font-size: 10px;color :#3e3b3b !important; font-weight: bold;"><?= $patron->patron_id ?>-<?= $patron->renual_status ?></span><br>
<?php
}
?>
<span style="font-size: 10px; color: #6d6969; font-weight: bold;"> Address :-</span><span style="font-size: 10px; color: #3e3b3b; font-weight: bold;"> <?= $patrons_details['fkStudent']->address1 ?></span><br/>
<span style="font-size: 10px; color: #6d6969; font-weight: bold;"> Program :-</span><span style="font-size: 10px; color: #3e3b3b !important; font-weight: bold;"> <?= $patrons_details["fkProgram"]->code . ',' . $patrons_details["fkPeriod"]->code ?></span><br>
<span style="font-size: 10px; color: #6d6969; font-weight: bold;"> Roll No :-</span><span style=" font-size: 10px; color:#3e3b3b !important; font-weight: bold;"> <?= $patrons_details->roll_no; ?> </span><br/>
<span style="font-size: 10px; color: #6d6969; font-weight: bold;"> Phone no.:-</span><span style=" font-size: 10px; color:#3e3b3b !important; font-weight: bold;"><?= $patrons_details['fkStudent']->phone; ?></span><br>
<span style="font-size: 10px; color: #6d6969; font-weight: bold;"> Validity:-</span> <span style="font-size: 10px; color: #3e3b3b !important; font-weight: bold;"> <?= date('Y/m/d', $patron->valid_till); ?></span>
</div>
</div>
</div>
<hr style="margin-bottom:5px">
<div class="row row1">
<div class="col-md-12">
<p>If found please return to office | Tel: <?= $college->phone1 ?> <?php
if (!empty($college->phone)) {
echo ', ' . $college->phone2;
}
?></p>
</div>
</div>
</div>
</div>
</div>
<?php
} else {
echo '</div><div class="w3-padding-16" style="width: 100%;font-size: 12px;padding: 5px 0px;">';
}
}
?>
</div>
</div>
<?php
$this->registerJs($this->render("print.js"), 5);
?>
Now in qr.js file my js file is:
$(document).ready(function () {
var qrcode = new QRCode("qrcode");
var f = $('#data').attr('sid');
qrcode.makeCode(f);
});
How can i solve this problem?

Change id="data" to class="data" and add qr.js only once
$(document).ready(function () {
$(".data").each(function(i,e){
var qrcode = new QRCode("qrcode");
var f = $(e).attr('sid');
qrcode.makeCode(f);
})
});

Fetch And Pass Value of Each Row In My Sidebar Using Javascript

How do I pass a value to my sidebar using Javascript when I fetch data from my database? Currently, I could pass data, but only the first row in my database table.
I just want to view details into my sidebar when I click the button to go somewhere before it does some action. But unfortunately, the first card only works then the second one does not.
The following code is available at: https://github.com/Ailyn09/AJAX-Fetch/blob/master/sidebar_details.php
And the database is located here: https://github.com/Ailyn09/AJAX-Fetch/blob/master/sidebar_query.sql
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title></title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!--Font-awesome 4.7.0-->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Flickity-->
<link rel="stylesheet" href="https://unpkg.com/flickity#2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity#2/dist/flickity.pkgd.min.js"></script>
<!--Fontello-->
<link href="web/css/fontello.css" rel="stylesheet">
</head>
<body id="body">
<nav class="navbar navbar-toggleable-md navbar-light fixed-top bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Test</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="javascript:void(0);" onclick="window.location.href = 'index.html'">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);" onclick="window.location.href = 'category.php'">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);" onclick="window.location.href = 'businesstype.html'">Business Types</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);" onclick="window.location.href = 'instructions.html'">How To Order</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);" onclick="window.location.href = 'contacts.html'">Contact Us</a>
</li>
</ul>
</div>
<ul class="navbar-side" id="navbarSide" style="padding: 20px;">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12" align="right">
<a class="hamburger is-closed" data-toggle="offcanvas"><i class="icon_set_1_icon-77"></i></a>
</div>
<div class="col-lg-12 col-md-12 col-sm-12" id="item_desc">
<form>
<img id="images1" src="" class="thumbnail" width="100%" height="100%">
<h3>This is item 1</h3>
<input type='text' id='field1'/>
<input type='text' id='field2'/>
<div id="field3"></div>
<p>
<i class="fa fa-heart-o"></i>
</i>
Book Now
</p>
</form>
</div>
<div class="col-lg-12 col-md-12 col-sm-12" id="item_review">
<form>
<img src="images/web/empty_img.gif" class="thumbnail" width="100%" height="100%">
<h3>This is item 1</h3>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleTextarea">Review</label>
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>
<p>
<i class="fa fa-heart-o"></i>
</i>
Submit
</p>
</form>
<hr>
</div>
</div>
</ul>
<div class="overlay"></div>
</nav>
<div class="container marketing">
<h1>The Main page</h1>
<div class="row">
<?php
$conn = new mysqli('localhost', 'root', '1234', 'test');
if ($conn->connect_error) {
die("Connection error: " . $conn->connect_error);
}
$result = $conn->query("SELECT * FROM items");
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {?>
<div class="col-lg-3 col-sm-6 division-card">
<div class="card" style="position: relative;">
<img class="card-img-top" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22318%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20318%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15c3874090b%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15c3874090b%22%3E%3Crect%20width%3D%22318%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22118.01666641235352%22%20y%3D%2297.5%22%3E318x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image cap">
<h4 class="card-title no-margin" style="position: absolute; right: 0; bottom:0; top:150px;">TEST</h4>
<div class="card-block" align="left">
<h4 class="card-title no-margin">Card title</h4>
<p class="no-margin">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</p>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<input class="form-control" type='text' id='fielda' value="<?php echo $row['name'] ; ?>"/> <br/>
<input class="form-control" type='text' id='fieldb' value="<?php echo $row['price'] ; ?>"/> <br/>
<input class="form-control" type='text' id='fieldc' value="<?php echo $row['temdesc'] ; ?>"/> <br/>
<input class="form-control" type='text' id='fieldd' value="<?php echo $row['imagename'] ; ?>"/> <br/>
<i class="fa fa-heart-o"></i>
<i class="icon_set_1_icon-93"></i>
<a href="#" class="btn btn-outline-primary" id="navbarSideButton" >Go Somewhere</a>
</div>
</div>
</div>
<?php } } else { } ?>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#footer").load("footer.html");
$('[data-toggle="offcanvas"]').click(function() {
$('#wrapper').toggleClass('toggled');
});
});
$(document).ready(function() {
$('#navbarSideButton').on('click', function() {
$('#navbarSide').addClass('reveal');
$('.overlay').show();
document.body.style.overflow = 'hidden';
$('#field1').val($('#fielda').val());
$('#field2').val($('#fieldb').val());
$("#field3").html($("#fieldc").val());
var path = "images/web/";
var data = $("#fieldd").val();
var imgEl = document.getElementById("images1");
imgEl.src= path.concat(data);
});
$('.is-closed').on('click', function() {
$('#navbarSide').removeClass('reveal');
$('.overlay').hide();
document.body.style.overflow = 'scroll';
});
});
function switchVisible() {
if (document.getElementById('item_desc')) {
if (document.getElementById('item_desc').style.display == 'none') {
document.getElementById('item_desc').style.display = 'block';
document.getElementById('item_review').style.display = 'none';
} else {
document.getElementById('item_desc').style.display = 'none';
document.getElementById('item_review').style.display = 'block';
}
}
}
</script>
</body>
</html>
<style type="text/css">
.navbar-side {
height: 100%;
position: fixed;
top: 0;
right: 0;
padding: 0;
list-style: none;
border-left: 2px solid #ccc;
background-color: #f7f7f9;
overflow-y: scroll;
z-index: 1000;
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: 300ms ease;
transition: 300ms ease;
}
.navbar-side-item {
padding: 1.5rem 0;
margin: 0;
border-bottom: 2px solid #ccc;
height: 5rem;
}
.side-link {
padding-left: 2rem;
}
.reveal {
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
-webkit-transition: 300ms ease;
transition: 300ms ease;
}
.overlay {
position: fixed;
display: none;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: pointer;
background-color: #ccc;
opacity: 0.6;
z-index: 990;
}
.is-closed{
cursor: pointer;
}
#item_review{
display: none;
}
/*-------------------------------*/
/* Media Breakpoints Area */
/*-------------------------------*/
#media (min-width: 544px) {
.navbar-side {
width: 100%;
}
.container.marketing {
margin-top: 90px;
}
}
#media (min-width: 768px) {
.navbar-side {
width: 50%;
}
.container.marketing {
margin-top: 80px;
}
}
#media (min-width: 992px) {
.navbar-side {
width: 40%;
}
.container.marketing {
margin-top: 70px;
}
}
#media (min-width: 1200px) {
.navbar-side {
width: 25%;
}
.container.marketing {
margin-top: 60px;
}
}
</style>

Check this line:
$('#navbarSideButton')
here you are using # i.e. ID's selector which works for unique selection. So it works for the first selector only, this is the default behavior of # selector. Instead of that use . i.e. class selectors that works for multiple selection.

Jscript mouse hover over menu always displaying behind other content

I need some help with my navigation bar item, i have a shopping cart that is supposed to expand on mouse over. Which works, but the expansion is appearing behind other menu items and i cant figure out why. I have tried putting the z-index to ridiculous values and made the position absolute. Still no success.
Here is the Nav html:
<nav class="navbar navbar-inverse">
<div class="container">
<div class="container" style="background-color: #2a3968; margin-bottom:10px;">
<ul class="collapse navbar-collapse nav navbar-nav navbar-right" style="margin-top:-10px;">
<li style = "color:white;">
<?php
if($this->request->session()->read('Auth')) {
// user is logged in, show "account" link
echo $this->Html->link(__('Account'), ['controller' => 'Users', 'action' => 'Index']);
}
?>
</li>
<span style="color:white; margin-top:-15px;">
<li style = "color:white; margin-right:15px;">
<?php
if($this->request->session()->read('Auth')) {
// user is logged in, show logout..user menu etc
echo $this->Html->link(__('Logout'), ['controller' => 'Users', 'action' => 'logout']);
} else {
// the user is not logged in
echo '<span style="color:white">'.$this->Html->link(__('Login/Register'), ['controller' => 'Users', 'action' => 'login']).'</span>';
}
?>
</li>
</span>
</ul>
</div>
<div class="navbar-header" style="margin-top:-25px; margin-bottom:-15px;">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="container">
<div class="col-sm-6">
<a href="http://localhost/team12/pages/home">
<img src="http://ie.infotech.monash.edu/Team12/Build4/GIT/webroot/img/silverdeals.png" class= "logo" style=" padding-bottom:10px; height:70px; float:left;">
</a>
</div>
<div class="col-sm-6" style="vertical-align:center; color:white; padding-top:10px; padding-right:-15px;">
<ul>
<li style="display: inline-block; float:right;">
<?php
echo $this->element('quick_cart');
?>
</li>
<li style="display: inline-block; float:right;"> | </li>
<li style="display: inline-block; float:right; "> Secure Shipping anytime </li>
<li style="display: inline-block; float:right; "> | </li>
<li style="display: inline-block; float:right; "> <?php echo $this->element('search');?> </li>
</ul>
</div>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><?= $this->Html->link(__('Home'), ['controller' => 'Pages', 'action' => 'home']) ?></li>
<li><?= $this->Html->link(__('Products'), ['controller' => 'Products', 'action' => 'Index']) ?></li>
<li><?= $this->Html->link(__('New Arrivals'), ['controller' => 'Products', 'action' => 'newarrivals']) ?></li>
<li><?= $this->Html->link(__('Rings'), ['controller' => 'Products', 'action' => 'rings']) ?></li>
<li><?= $this->Html->link(__('Bracelets'), ['controller' => 'Products', 'action' => 'bracelets']) ?></li>
<li><?= $this->Html->link(__('Earrings'), ['controller' => 'Products', 'action' => 'earrings']) ?></li>
<li><?= $this->Html->link(__('Necklaces'), ['controller' => 'Products', 'action' => 'necklaces']) ?></li>
<li><?= $this->Html->link(__('Sales'), ['controller' => 'Products', 'action' => 'sales']) ?></li>
<li><?= $this->Html->link(__('Contact Us'), ['controller' => 'Pages', 'action' => 'About']) ?></li>
</ul>
</div>
</nav>
Here is the shopping cart code:
<style>
.hide{display:none}
.quickcart {
position: absolute;
z-index: 99999;
width: 300px;
border: 10px solid #bebebe;
background-color: white;
padding: 8px 10px 10px;
color: #000000;
right:1%;
}
#show-quick-cart {
cursor:auto;
float:none;
color: #000000;
z-index:2000;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:120%;
text-decoration: none;
line-height: 5px;
text-align: center;
display: inline-block;
vertical-align: middle;
box-sizing:inherit;
}
.nav{
z-index: 100;
}
</style>
<div id="pardiv" style=" color:white;">
<?php
$counter = $this->request->session()->read('Cart.count');
echo $this->Html->link('<span style="color:white;" class="glyphicon glyphicon-shopping-cart"></span><span style="color:white; "></span><span class="badge" id="cart-counter"><?php echo $counter ;?></span>', array('controller'=>'Pages','action'=>'display','shoppingCart'), array('escape'=>false, 'id'=>'show-quick-cart'));
?>
<div id="show-quick-cart-zone">
<div id="quickcart" class="quickcart hide">
<div class="quickcarttitle"><span><b>Your cart</b></span></div>
<div class="quickcart-products">
<?php if ($this->request->session()->check('Cart.items')){
?>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
<th> </th>
</tr>
</thead>
<?php
$products = $this->request->session()->read('Cart.items');
$cartTotal = 0;
foreach ($products as $product):
?>
<tbody>
<tr>
<td><img src="<?= h($product['PicURL']) ?>" alt="BlueMountain"></td>
<td><?php echo $product['Quantity'];?></td>
<?php if(isset($product['SalePrice'])){
$cartTotal += $product['SalePrice']*$product['Quantity'];
?>
<td><?php echo $product['SalePrice']*$product['Quantity'];?></td>
<?php
}
else {
$cartTotal += $product['UnitPrice']*$product['Quantity'];
?>
<td><?php echo $product['UnitPrice']*$product['Quantity']; ?></td>
<?php
}
?>
<td><?= $this->Form->postLink(__('x'), ['controller'=>'products', 'action' => 'removeFromCart', $product['ProductID']], ['confirm' => __('Are you sure you want to remove {0} from the cart?', $product['ProductName'])]) ?></td>
</tr>
<?php endforeach; ?>
<tr>
<td></td>
<td><b>Total:</b></td>
<td><?php echo $cartTotal; ?> </td>
<td></td>
</tr>
</tbody>
</table>
</div>
<?php
} else {
?>
<p><b> is empty!</b></p>
<?php
}
?>
</div>
</div>
</div>
</div>
<script>
var flag=0;
$('#show-quick-cart').mouseenter(function () {
$('#quickcart').slideDown(500);
return false;
});
$('#pardiv').mouseleave(function () {
$('#quickcart').slideUp(500);
return false;
});
</script>
Any help is appreciated, thank you all very much.

Categories

Resources