Develop Reference

Magnific Popup showing same item

Refering to this question , it has a helpful answer but it's partial answer because it only shows three unique popup dialogs - static.
I'm new to jQuery and working in this project. I want this to be dynamic with MySql database. Let's say I have a collection of 20 products stored in a tbl_products and each product has a uniqe id, name and price. When user clicks for more product details, I want to display the Magnific popup dialog that shows the product details, showing the product image(small thumbnail), product name and product price.
This link is inside loop:
<a class="popup-with-zoom-anim" href="#small-dialog" data-item="<?php echo $row["product_id"]; ?>">Open with fade-zoom animation</a><br>
Here is the Code:
<div class="page-content">
<?php
$query = "SELECT * FROM tbl_product ORDER BY product_id ASC LIMIT 20";
$result = mysqli_query($connect, $query);
$ctr = 0;
if(mysqli_num_rows($result) > 0)
{
$i = 0;
$param = 'right';
while($row = mysqli_fetch_array($result))
{
//echo "<h2>" . $row[0] . "</h2>";
$data = $row["product_image"];
$images = explode(";", $data);
if($param=='left'){
$param = "right";
}
else{
$param = "left";
?><div class="clear"></div><?php
}
?>
<a class="popup-with-zoom-anim" href="#small-dialog" data-item="<?php echo $row["product_id"]; ?>">Open with fade-zoom animation</a><br>
<div id="small-dialog" class="zoom-anim-dialog mfp-hide">
<span class="fa fa-check fa-3x" style="color: black; margin-left:45%;"></span>
<h3 style="text-align:center; margin-top:0px;margin-bottom:20px;">Artikulli u shtua në shportë</h3>
<div class="table-responsive" style="border: none !important;">
<table style="border: none !important;">
<tr>
<th width="80%"></th>
<th width="20%"></th>
</tr>
<tr>
<td style="font-size:12px;">
<div class="news-thumbs" style="margin-left:0px; margin-right:20px;">
<a href="#" class="news-item">
<div style="line-height: 0.5cm;border: 1px solid #ccc; margin-bottom:5px; width:100%; height:110px; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 5px 1px rgba(0,0,0,0.1);">
<amp-img class="responsive-img" src="../../../../../images/images/gallery/preview/<?php echo $images[0]; ?>" width="100" height="100" layout="responsive"></amp-img>
<h5><?php echo $row[1];?></h5>
<p style "font-size:11px;">
<?php
foreach(range(1, $row[10]) as $i)
{
?>
<span class="fa fa-star checked" style="color: #ffa500;"></span>
<?php
}
?>
</p>
</div>
</a>
</div>
</td>
<td style="margin-left:-50px; font-size:28px; font-style:bold; line-height:20px;">€<?php echo $row[2];?> <br>
<p style="font-size:11px; font-style:bold;">TVSH - 8% </p>
<p style="font-size:10px; line-height:20px;">Dërgesa Falas</p>
Shiko detalet
</td>
<td style="font-size:12px;"> </td>
</tr>
</table>
</div>
<hr style="border-top: 0.5px solid #E8E8FF;">
<button type="button" class="btn btn-default popup-modal-dismiss">Vazhdo me blerje</button>
<button type="button" style="float:right;" class="btn btn-primary">Kryje porosinë</button>
<!-- </div>
<div class="news-thumbs" style="margin-left:-50px;">
<a href="#" class="news-item">
<div style="line-height: 0.5cm;border: 1px solid #ccc; margin-bottom:5px; width:100%; height:110px; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 5px 1px rgba(0,0,0,0.1);">
<amp-img class="responsive-img" src="../../../../../images/images/gallery/preview/<?php echo $images[0]; ?>" width="100" height="100" layout="responsive"></amp-img>
<h5><?php echo $row[1];?></h5>
<p><?php echo $row[2];?></p>
</div>
</a>
<hr style="border-top: 0.5px solid #E8E8FF;">
</div> -->
</div>
<a href="m-detail-<?php echo $row[0]; ?>.html">
<div class="half-material-box-<?php echo $param; ?>">
<span class="fa fa-heart-o fa-2x"style="color: red; aria-hidden="false";></span>
<!--<i class="center-text full-bottom huge-icon color-yellow-dark fa fa-bolt"></i>-->
<amp-img src="../../../../../images/images/gallery/preview/<?php echo $images[0]; ?>" layout="responsive" width="127" height="130"></amp-img>
<p class="center-text small-text half-bottom">
<!--<i class="fa fa-angle-right"></i><?php echo substr_replace($row[1], "...", 60);?>-->
</p>
<h3 class="small-text lef-text bold" name="hidden_name" style="color:#969696;"><?php echo $row[1]; ?></h3>
<h4 class="left-text thick" name="hidden_price" style="color:#f94b2b;">€ <?php echo $row[2]; ?></h4>
<?php
foreach(range(1, $row[10]) as $i)
{
//echo $i;
?>
<span class="fa fa-star checked" style="color: #ffa500;"></span>
<?php
}
?>
</div>
</a>
<!-- </form> -->
<?php
}
}
?>
<div class="clear"></div>
</div>
jQuery:
(function ($) {
$(document).ready(function() {
$(".popup-with-zoom-anim").each(function() {
$(this).magnificPopup({
type: 'inline',
fixedBgPos: true,
fixedContentPos: true,
overflowY: 'hidden',
closeBtnInside: false,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
});
$(document).on('click', '.popup-modal-dismiss', function (e) {
e.preventDefault();
$.magnificPopup.close();
});
});
})(jQuery);
It shows the Popup dialog the way I want but the problem is that it shows the same data no matter what product I click!
I can't figure it out weather it has problem with Id or .each instance in jQuery. Any help would be appreciated!
Thank you!

php navtab (bootstrap) link to a specific tab from include page

I've searched and searched and found many similar questions but i haven't found anything that has worked.
i am trying to write a simple php crud page where
i have an index.php page using nav-tabs (drop down menus as i will add more pages after getting these to work)
i have a drop down menu that links to a vendorlanding.php page
which displays a grid and simple add/update/delete links.
i can successfully navigate to this page from index.php but when i click on any of the links from vendorlanding.php (ie add a new vendor: addvendor.php) nothing happens.
i would like it to open the addvendor.php page in the current tab.
any help is greatly appreciated
below is contents of index.php and vendorlanding.php
index.php:
<?php
// Initialize the session
session_start();
// If session variable is not set it will redirect to login page
if(!isset($_SESSION['username']) || empty($_SESSION['username'])){
header("location: login.php");
exit;
}
?>
<!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">
<title>Test Ledger</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myTab a").click(function(e){
e.preventDefault();
$(this).tab('show');
});
});
</script>
<style type="text/css">
.bs-example
{
width: 55%;
padding-left: 15%;
}
.header
{
width: 55%;
padding-left: 15%;
}
.footer
{
width: 55%;
padding-left: 15%;
}
.padding2
{
margin: 100px;
padding-left: 50%;
margin: 100px;
}
body{ font: 14px sans-serif; }
</style>
</head>
<body>
<div class = "header">
<h2>welcome <b><?php echo htmlspecialchars($_SESSION['username']); ?></b>. Sign Out
</br>
</br>
</div>
</br>
</br>
<div class="bs-example">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#Home">Home</a></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Ledger Content<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a data-toggle="tab" href="#viewvendors">View Vendors</a></li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Manage Users<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a data-toggle="tab" href="#adduser">Add User</a></li>
</ul>
</li>
</ul>
<div class="tab-content">
<div id="Home" class="tab-pane fade in active">
<?php
include("main.inc.php");
?>
</div>
<div id="viewvendorslanding" class="tab-pane fade">
<?php
include("vendorLanding.php");
?>
</div>
<div id="adduser" class="tab-pane fade">
<?php
include("register.php");
?>
</div>
<div id="addvendor" class="tab-pane fade">
<?php
include("addVendor.php");
?>
</div>
</div>
</div>
</br>
</br>
</br>
<div class="footer">
<?php
include("footer.inc.php");
?>
</div>
</body>
</html>
vendorlanding.php --> this has a button to add a new vendor (which doesn't work)
<body>
<div class="wrapper1">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="page-header clearfix">
<h2 class="pull-left">Vendor Details</h2>
Add New Vendor
</div>
<?php
// Include config file
require_once '../dbConfig.php';
// Attempt select query execution
$sql = "SELECT * FROM vendors";
if($result = mysqli_query($link, $sql)){
if(mysqli_num_rows($result) > 0){
echo "<table class='table table-bordered table-striped'>";
echo "<thead>";
echo "<tr>";
echo "<th>#</th>";
echo "<th>Name</th>";
echo "<th>Description</th>";
echo "</tr>";
echo "</thead>";
echo "<tbody>";
while($row = mysqli_fetch_array($result)){
echo "<tr>";
echo "<td>" . $row['vendor_id'] . "</td>";
echo "<td>" . $row['vendor_name'] . "</td>";
echo "<td>" . $row['vendor_description'] . "</td>";
echo "<td>";
echo "<a href='vendorRead.php?id=". $row['id'] ."' title='View Record' data-toggle='tooltip'><span class='glyphicon glyphicon-eye-open'></span></a>";
echo "<a href='vendorUpdate.php?id=". $row['id'] ."' title='Update Record' data-toggle='tooltip'><span class='glyphicon glyphicon-pencil'></span></a>";
echo "<a href='vendorDelete.php?id=". $row['id'] ."' title='Delete Record' data-toggle='tooltip'><span class='glyphicon glyphicon-trash'></span></a>";
echo "</td>";
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
// Free result set
mysqli_free_result($result);
} else{
echo "<p class='lead'><em>No records were found.</em></p>";
}
} else{
echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}
// Close connection
//mysqli_close($link);
?>
</div>
</div>
</div>
</div>
</body>
</html>

my jquery script is not working

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

make notification on php and jquery

<!DOCTYPE html>
<html>
<head>
<title><?php echo $title ?></title>
<!--Logo di title bar -->
<link rel="shortcut icon" href="<?php echo base_url();?>asset/img/logokominfo.png"/>
<!--CSS-->
<link rel="stylesheet" href="<?php echo base_url();?>asset/CSS/style-boots.css?<?php echo time(); ?>">
<link rel="stylesheet" href="<?php echo base_url();?>asset/CSS/style-pengumuman.css?<?php echo time(); ?>">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
body {
background: #f7f7f7;
font-family: 'Montserrat', sans-serif;
}
.dropzone {
background: #fff;
border: 2px dashed #ddd;
border-radius: 5px;
}
.dz-message {
color: #999;
}
.dz-message:hover {
color: #464646;
}
.dz-message h3 {
font-size: 200%;
margin-bottom: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="../asset/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../asset/css/style-profile.css?<?php echo time(); ?>">
<script>
$('#tab4primary').click(function(){
<?php $notif= ''?>
});
</script>
</head>
<body>
<nav id="sticker" class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="menu"><i class="fa fa-bars" id="menu_icon"></i></a>
<a class="navbar-brand" href="#">
<img src="<?php echo base_url();?>asset/img/logo_emagang.png" class="img-responsive" />
</a>
</div><!--navbar-header close-->
<div class="collapse navbar-collapse drop_menu" id="content_details">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span><?php echo $userData['nama_lengkap'] ?><span class="caret"></span>
<ul class="dropdown-menu">
<li><i class="fa fa-user" aria-hidden="true"></i> Profile
<li><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Ubah Profile</li>
<li><i class="fa fa-key" aria-hidden="true"></i> Ubah Password</li>
<li><i class="fa fa-sign-out" aria-hidden="true"></i> Logout
</li>
</ul>
</li>
</ul><!--navbar-right close-->
</div><!--collapse navbar-collapse drop_menu close-->
</div><!--container-fluid close-->
</nav><!--navbar navbar-inverse close-->
<br>
<br>
<section>
<div class="container" style="margin-top: 10px;">
<div class="profile-head">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12"><br><br><br><br><br><br>
<h6>
<img src="<?php echo base_url();?>uploads/images/<?php echo $userData['nama_foto']."?".time(); ?>">
<br><br><?php echo $userData['nama_lengkap'] ?><br><br>
</h6>
</div><!--col-md-4 col-sm-4 col-xs-12 close-->
<div class="col-md-8 col-sm-5 col-xs-12"><br><br><br><br><br>
<h5><?php echo $userData['nama_lengkap'] ?></h5>
<p>Siswa / Mahasiswa </p>
<ul>
<li><span class="glyphicon glyphicon-info-sign"></span> <?php echo $userData['tanggal_lahir'] ?></li>
<li><span class="glyphicon glyphicon-book"></span> <?php echo $userData['nama_institusi'] ?></li>
<li><span class="glyphicon glyphicon-home"></span> <?php echo $userData['alamat'] ?></li>
<li><span class="glyphicon glyphicon-phone"></span> <?php echo $userData['no_telpon'] ?></li>
<li><span class="glyphicon glyphicon-envelope"></span><?php echo $userData['email'] ?></li>
</ul>
</div><!--col-md-8 col-sm-8 col-xs-12 close-->
</div>
</div><!--profile-head close-->
</div><!--container close-->
<dir class="container">
<?php
// $id = $this->session->flashdata('id');
$salah = $this->session->flashdata('salah');
$berhasil = $this->session->flashdata('berhasil');
?>
<!--error message-->
<?php echo $salah['error'];?>
<?php echo $berhasil;?>
<?php
$status = $userData['status'];
if($status == 'diterima'){
$notif = 'baru';
}
?>
<div class="panel with-nav-tabs panel-primary">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1primary" data-toggle="tab">
<span class="glyphicon glyphicon-user"></span> Personal Data
</a></li>
<li><a href="#tab2primary" data-toggle="tab">
<i class="fa fa-university" aria-hidden="true"></i> Pendidikan
</a></li>
<li><a href="#tab3primary" data-toggle="tab">
<i class="fa fa-file" aria-hidden="true"></i> Daftar Riwayat Hidup
</a></li>
<li>
<a href="#tab4primary" data-toggle="tab">
<span class="badge quote-badge" id="pemberitahuan"><?php echo $notif ?></span>
<i class="fa fa-bullhorn" aria-hidden="true"></i> Pengumuman
</a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1primary">
<div class="row">
<div class="col-md-8">
<table class="table table-striped">
<thead>
<tr>
<th>Data Akun</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Email</td>
<td>:</td>
<td>
<?php echo $userData['email'] ?>
</td>
</tr>
<tr>
<td>tanggal daftar</td>
<td>:</td>
<td>
<?php echo $userData['tanggal_daftar'] ?>
</td>
</tr>
</tbody>
<thead>
<tr>
<th>Tujuan Magang</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Satuan kerja</td>
<td>:</td>
<td>
<?php echo $userData['nama_satuan_kerja'] ?>
</td>
</tr>
<tr>
<td>Unit kerja</td>
<td>:</td>
<td>
<?php echo $userData['nama_unit_kerja'] ?>
</td>
</tr>
<tr>
<td>Tanggal Mulai</td>
<td>:</td>
<td>
<?php
$tanggal_mulai = $userData['tanggal_mulai'];
echo date('d F Y', strtotime($tanggal_mulai));
// $input = $userData['tanggal_mulai'];
// $date = strtotime($input);
// $day = date('d',$date);
// $month = date('m',$date);
// $year = date('Y',$date);
// echo $month;
?>
</td>
</tr>
<tr>
<td>Tanggal Selesai</td>
<td>:</td>
<td>
<?php
$tanggal_lahir = $userData['tanggal_selesai'];
echo date('d F Y', strtotime($tanggal_lahir));
?>
</td>
</tr>
</tbody>
<thead>
<tr>
<th>Data Pribadi</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Nama Lengkap</td>
<td>:</td>
<td>
<?php echo $userData['nama_lengkap'] ?>
</td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td>
<?php echo $userData['jenis_kelamin'] ?>
</td>
</tr>
<tr>
<td>Tanggal Lahir</td>
<td>:</td>
<td>
<?php
$tanggal_lahir = $userData['tanggal_lahir'];
echo date('d F Y', strtotime($tanggal_lahir));
?>
</td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td>
<?php echo $userData['alamat'] ?>
</td>
</tr>
<tr>
<td>No telpon</td>
<td>:</td>
<td>
<?php echo $userData['no_telpon'] ?>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab2primary">
<table class="table table-striped">
<thead>
<tr>
<th>Pendidikan</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Tingkat Pendidikan</td>
<td>:</td>
<td>
<?php echo $userData['tingkat_pendidikan'] ?>
</td>
</tr>
<tr>
<td>Nama Institusi</td>
<td>:</td>
<td>
<?php echo $userData['nama_institusi'] ?>
</td>
</tr>
<tr>
<td>Jurusan</td>
<td>:</td>
<td>
<?php echo $userData['jurusan'] ?>
</td>
</tr>
<tr>
<td>Nilai Raport Rata-Rata/ IPK</td>
<td>:</td>
<td>
<?php echo $userData['nilai'] ?>
</td>
</tr>
<tr>
<td>Alamat Institusi</td>
<td>:</td>
<td>
<?php echo $userData['alamat_institusi'] ?>
</td>
</tr>
<tr>
<td>No telpon Institusi</td>
<td>:</td>
<td>
<?php echo $userData['no_telpon_institusi'] ?>
</td>
</tr>
</tbody>
</table>
</div>
<div class="tab-pane fade" id="tab3primary">
<div class="row">
<div class="col-md-4">
<div class="alert alert-warning alert-dismissable fade in">
×
<strong>catatan :</strong> Untuk melihat CV langsung diprofile disarankan untuk menonaktifkan software bantuan download, seperti: IDM Dll.
</div>
<div class="bs-calltoaction bs-calltoaction-primary">
<div class="row">
<div class="col-md-12">
<p>Daftar Riwayat Hidup</p>
<div class="cta-button">
<span class="glyphicon glyphicon-download-alt"></span> Donwload daftar riwayat hidup
</div>
<p style="font-size: 12px">Terakhir Di Update : <?php
$tanggal_update_cv = $userData['tanggal_update_cv'];
echo date('d F Y', strtotime($tanggal_update_cv)); ?></p>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<center>
<h4 class="name">Ubah CV / Daftar Riwayat Hidup</h4>
<hr class="whitehr">
</center>
<div id="content">
<div class="row">
<div class="col-md-7"><br>
<div class="dropzone">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<center><br><br><br><br>
<h3>Upload file disini</h3> ukuran <strong>maksimal</strong> 2MB
<?php echo form_open_multipart('users/updatecv');?>
<input type="hidden" id="id" name="id" value="<?php echo $userData['id'] ?>">
<input type="hidden" id="nama_cv" name="nama_cv" value="<?php echo $userData['nama_cv'] ?>">
<input type="file" style="margin-left : 50px" name="document" id="files" accept=".doc, .docx, application/msword, application/pdf" required>
<button style="margin-top : 20px" type="submit" value="Upload" name="submit" class="btn btn-primary btn-lg">
<i class="fa fa-upload" aria-hidden="true"></i>
upload
</button>
<?php echo form_close();?>
</center><br><br><br><br>
</div>
</div>
</div>
</div>
<div class="col-md-5">
Contoh CV(Daftar Riwayat Hidup)
<a href="<?php echo base_url();?>asset/doc/contoh_cv.doc">
<img src="<?php echo base_url();?>asset/doc/contoh_cv.png" style="width: 80%">
</a>
<div class="col-md-10">
<div class="cta-button">
Download Template CV
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab4primary">
<center>
<h1 class="name">Pengumuman</h1>
<hr class="whitehr">
</center>
<div class="col-sm-12 col-md-12 col-xm-12">
<div class="bs-calltoaction bs-calltoaction-warning">
<div class="row">
<div class="col-sm-2 col-md-3 col-xs-8">
<img src="<?php echo base_url();?>asset/img/alur-pendaftaran/6.png" class="img-responsive">
</div>
<div class="col-md-6 cta-contents">
<h3 class="cta-title">Waktu Magang Anda Telah Selesai</h3>
<hr>
<div class="cta-desc">
</div>
</div>
<div class="col-md-3 cta-button">
Download Sertifikat
</div>
</div>
</div>
<?php
$status = $userData['status'];
if($status == 'diterima'){
$this->load->view('dashboard/diterima');
}?>
<blockquote class="quote-box"><br>
<div class="col-sm-2 col-md-3 col-xs-8">
<img src="<?php echo base_url();?>asset/img/alur-pendaftaran/3.png" class="img-responsive">
</div>
<p class="quotation-mark">“</p>
<hr>
<div class="blog-post-actions">
<p class="blog-post-bottom pull-left">
Pengumuman
</p>
<p class="blog-post-bottom pull-right">
<span class="badge quote-badge">Biro Kepegawaian Dan Organisasi</span>
</p>
</div>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</dir>
<?php $this->load->view('footer');?>
</section><!--section close-->
<script type="text/javascript" src="../asset/js/jquery.min.js"></script>
<script type="text/javascript" src="../asset/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../asset/js/profile.js"></script>
<script type="text/javascript" src="../asset/js/pemberitahuan.js"></script>
</body>
</html>
i try to make notification with php when button notification i click or was clicked, the notification will be remove by jquery or js i made, but i get stack on there, how i can remove the notification when it was clicked.
here is the code i make for remove the notification
<script>
$('#tab4primary').click(function(){
<?php $notif= ''?>
});
</script>
and here code i made for show notification
<?php
$status = $userData['status'];//this i get from database
if($status == 'diterima'){
$notif = 'new';
}
?>
notification just text, so when $status == diterima it will be show new and when i click the button of notification and text new must be remove or gone but i got stock on there

As Berend de Groot suggested, you need to stay in JavaScript context once the page is loaded (and php stopped doing anything).
Try altering the HTML where the message is displayed directly :
<script>
$('#tab4primary').click(function(){
$('selectorWhereTheNotifTextIsWrittenInDOm').empty();
});
</script>
You may want to try to hide() instead of emptying depending on your DOM and the expected behavior.
EDIT : with the HTML you posted answer is now :
<script>
$('#tab4primary').click(function(){
$('#pemberitahuan').empty();
});
</script>
Same thing applies with hide() instead of empty()
EDIT 2 : Try :
<script>
$(document).ready(function() {
$('#tab4primary').click(function(){
$('#pemberitahuan').hide();
});
});
</script>
And make sure you remove :
<script>
$('#tab4primary').click(function(){
<?php $notif= ''?>
});
</script>
EDIT 3: #tab4primary does not seems to be the proper trigger element after all, if you try :
<script>
$('#pemberitahuan').click(function(){
$('#pemberitahuan').hide();
});
</script>
You should see something happening. It's now all a matter of selecting the proper trigger and target which should in most cases be different.

You can remove any element by jQuery remove function.
Please try the following code:
$('#tab4primary').click(function()
{
$('#tab4primary').remove();
});
or you can simply hide it using following code:
$('#tab4primary').click(function()
{
$('#tab4primary').hide();
});

Mobile Hamburger Menu Wont Close

I am trying to create a dropdown (hamburger) menu for my mobile website using the div tag "mobile-links".
I have it all written out (HTML, CSS, and JavaScript) and it is working fine, except I can not get the menu to close by clicking the hamburger again when the menu is open.
Visitors MUST click a link to exit the dropdown menu, which I do not want them to have to do.
I would like to have the menu close by clicking the hamburger once again.
I can see in my JavaScript code that it is removing "show", which I thought would close the menu.
Here is my HTML/PHP and JavaScript code:
This code lives in my "header.phtml" file
<div class="spanbar">
<div class="header-bar container">
<div class="mobile-links">
<div class="dropdown">
<onclick="myFunction()" class="dropbtn">
<span>
<img src="http://www.smockedoverstocks.net/skin/frontend/lee/default/images/hamburger-menu.png"/>
</span>
</button>
<div class="dropdown-content">
<div class="quick-access five columns omega">
<?php echo $this->getChildHtml('topLinks') ?>
</div>
</div>
</div>
</div>
<span>FREE SHIPPING ON ALL ORDERS<span>
<div class="desktop-links">
<div class="quick-access five columns omega">
<?php echo $this->getChildHtml('topLinks') ?>
</div>
</div>
</div>
</div>
<div class="header-container">
<header class="container main-header">
<?php if ($this->getIsHomePage()):?>
<h3 class="logo seven columns alpha">
<a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>" class="logo">
<img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" />
</a>
</h3>
<?php else:?>
<h3 class="logo seven columns alpha">
<a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>" class="logo">
<img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" />
</a>
</h3>
<?php endif?>
<div class="desktop-links">
<div class="quick-access five columns omega">
<?php echo $this->getChildHtml('store_language') ?>
<?php echo $this->getChildHtml('topSearch') ?>
</div>
</div>
<!-- <div class="mobile-links">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">
<span>Menu</span>
</button>
<div class="dropdown-content">
<div class="quick-access five columns omega">
<?php echo $this->getChildHtml('topLinks') ?>
<?php echo $this->getChildHtml('store_language') ?>
<?php echo $this->getChildHtml('topSearch') ?>
</div>
</div>
</div>
</div> -->
<!-- <h3 class="welcome-msg">
<?php echo $this->getChildHtml('welcome') ?>
<?php echo $this->getAdditionalHtml() ?>
</h3> -->
<?php echo $this->getChildHtml('topContainer'); ?>
</header>
<div class="nav-bar-boarder"></div>
</div>
<?php echo $this->getChildHtml('topMenu') ?>
<?php echo $this->getChildHtml('topScripts') ?>
<script language="javascript">
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
My CSS:
.mobile-links .dropdown {
position:relative;
display:inline-block;
padding:2px 13px 0px;
}
.mobile-links .dropdown-content{
display:none;
position:absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 5px 12px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display:block;
}
.show { display:block; }
Any help would be appreciated. Thanks!