Hi, i’m trying to hide a css class using jquery, could someone help please?
This is my jquery script which call a php file
<script>
$(document).ready(function(){
$("#datacount").load("controllers/ctrl_admin_view_notification.php");
setInterval(function(){
$("#datacount").load('controllers/ctrl_admin_view_notification.php')
}, 100);
});
</script>
This is my php script which returns a number of rows from database
<?php
$sql = "SELECT * from user_notifications where notification_status = '0'";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
$count = $result->num_rows;
echo $count;
?>
This is in my html file
<span class="badge badge-success"><div id="datacount"></div></span>
What i’m trying to achieve is to hide all the above html code if the row count is equal to zero.
Many thanks for your help
You can use Jquery hide() function eg
if(some statement){
$('.badge').hide();
}
The only thing is to pass the variable $count to your javascript code.
1 Like
You might use $.ajax() instead of .load(), so that you can do this inside the success method; like e.g.
const datacount = $('#datacount')
const config = {
url: 'controllers/ctrl_admin_view_notification.php',
success (res) {
if (Number(res)) {
datacount.text(res).show()
} else {
datacount.hide()
}
},
error () {
datacount.hide()
}
}
$.ajax(config)
window.setInterval($.ajax, 100, config)
1 Like
Hi, @m3g4p0p many thanks this is amazing and is working fine, the only little problem is that datacout.hide( ) does hide the number but it leaves the bubble because i didn’t hide the css classes .badge and .badge-success
<span class="badge badge-success"><div id="datacount"></div></span>
So i tried to hide the two classes .badge and .badge-success like @liontas76 suggested above but it does off course remove the class also for
<span class="badge badge-danger"> 4 </span>
<span class="badge badge-primary"> 3 </span>
Is there any way to solve this problem?
Sure, you can do this in the same conditional as above, like
const datacount = $('#datacount')
const badge = datacount.parent('.badge')
const config = {
url: 'controllers/ctrl_admin_view_notification.php',
success (res) {
if (Number(res)) {
datacount.text(res)
badge.show()
} else {
badge.hide()
}
},
error () {
badge.hide()
}
}
// etc.
That is cool, now is working but when I reload the page I can still see a green spot which quickly disappear.
No prob, you’re welcome! :-) You might hide the element from the start using a CSS class, like
.hidden {
display: none;
}
<span class="badge badge-success hidden">
<div id="datacount"></div>
</span>
jQuery’s .show() method will then override that CSS as soon as a non-zero response arrives.
1 Like
Amazing it is working perfectly. I’m learning PHP and just started with JQUERY and I’ve learned a lot thanks to your help. I’m doing some tests on my local machine, but If I can ask your opinion, do you think calling the php file every second can cause problems with a shared server? I don’t now any other methods to create a real time notification system with PHP and MySQL.
Thanks a lot again
You’re actually sending a request every tenth of a second, which might indeed be a bit over the top. ^^ If those notification updates should really be (close to) live, web sockets would be an option… although for most purposes an update every few seconds should certainly be sufficient.
Yes, that is great i think i’ll set a refresh every 10 min
Hi @m3g4p0p sorry to trouble you again I’ve noticed a little problem with jquery code for the update function. I’m using more than one dropdown on the menu and because they use the same class it is causing some problems.
this is my jquery code for the update function:
$(document).on('click', '.dropdown-toggle', function () {
const datacount = $('#datacount')
const badge = datacount.parent('.badge')
$.ajax({
type: 'POST',
url: 'controllers/ctrl_admin_update_notification.php',
success (res) {
if (res) {
datacount.hide()
badge.hide()
}
},
});
});
and this is the html
<li class="dropdown dropdown-extended dropdown-notification dropdown-dark" id="header_notification_bar">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
<i class="icon-bell"></i>
<span class="badge badge-success"><div id="datacount"></div></span>
</a>
<ul class="dropdown-menu" >
<li class="external">
<h3>
<span class="bold">12 pending</span> notifications</h3>
<a href="page_user_profile_1.html">view all</a>
</li>
<li>
<ul class="dropdown-menu-list scroller" style="height: 250px;" data-handle-color="#637283">
<li>
<a href="#">
<span class="photo">
<img src="../layout/assets/layouts/layout3/img/avatar2.jpg" class="img-circle" alt=""> </span>
<span class="subject">
<span class="from"> Lisa Wong </span>
<span class="time">Just Now </span>
</span>
<span class="message"> Vivamus sed auctor nibh congue nibh. auctor nibh auctor nibh... </span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<!-- END NOTIFICATION DROPDOWN -->
<li class="separator hide"> </li>
<!-- BEGIN INBOX DROPDOWN -->
<!-- DOC: Apply "dropdown-dark" class after below "dropdown-extended" to change the dropdown styte -->
<li class="dropdown dropdown-extended dropdown-inbox dropdown-dark" id="header_inbox_bar">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
<i class="icon-envelope-open"></i>
<span class="badge badge-danger"> 4 </span>
</a>
<ul class="dropdown-menu">
<li class="external">
<h3>You have
<span class="bold">7 New</span> Messages</h3>
<a href="app_inbox.html">view all</a>
</li>
<li>
<ul class="dropdown-menu-list scroller" style="height: 275px;" data-handle-color="#637283">
<li>
<a href="#">
<span class="photo">
<img src="../layout/assets/layouts/layout3/img/avatar2.jpg" class="img-circle" alt=""> </span>
<span class="subject">
<span class="from"> Lisa Wong </span>
<span class="time">Just Now </span>
</span>
<span class="message"> Vivamus sed auctor nibh congue nibh. auctor nibh auctor nibh... </span>
</a>
</li>
</ul>
</li>
</ul>
</li>
I can probably use id=“header_notification_bar” to fire jquery only on the notification dropdown.
system
April 16, 2017, 5:06pm
12
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
