Firm
Reputation: 61
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">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-user"></span><?php echo $userData['nama_lengkap'] ?><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="dashboard"><i class="fa fa-user" aria-hidden="true"></i> Profile</a>
<li><a href="view_ubah_data-profile"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Ubah Profile</a></li>
<li><a href="view_ubah_password"><i class="fa fa-key" aria-hidden="true"></i> Ubah Password</a></li>
<li><a href="users/logout"><i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a>
</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">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<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">
<a href="<?php echo base_url();?>uploads/cv/<?php echo $userData['nama_cv']."?".time(); ?>" class="btn btn-lg btn-block btn-primary"><span class="glyphicon glyphicon-download-alt"></span> Donwload daftar riwayat hidup</a>
</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">
<a href="<?php echo base_url();?>asset/doc/contoh_cv.doc" class="btn btn-lg btn-block btn-info">Download Template CV</a>
</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">
<a href="Sertifikat/Sertifikat_pdf" class="btn btn-lg btn-block btn-warning">Download Sertifikat</a>
</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
Upvotes: 0
Views: 1182
Answers (2)
fab2s
Reputation: 868
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.
Upvotes: 1
Hossein
Reputation: 3147
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();
});
Upvotes: 0
Related Questions
- Notification system jQuery, PHP, and MySQL
- Display notification only once - PHP - Codeigniter - JS
- Notification when new record is added in database php-jquery
- Notification Message using PHP and Jquery
- Real time notification by using php and jquery
- Live Notifications using JQuery and CodeIgniter
- Putting notification into PHP form instead of on page
- PHP - CodeIgniter Notifications
- detect new notification jquery
- PHP Notification System