I've implemented a search bar that loops into an UL (myUL) and display the results (h5). This works fine for static data but once I implement the PHP call to fetch MySQL, the search won't work and display the results anymore. On the console I see that it's not able to find the query results.
console log
Here's the piece of the code I've implemented the Search Input and ran the query:
<div class="page">
<div class="page-content">
<!-- Panel -->
<div class="panel">
<div class="panel-body">
<form class="page-search-form" role="search">
<div class="input-search input-search-dark">
<i class="input-search-icon md-search" aria-hidden="true"></i>
<input type="text" class="form-control" id="myInput" name="search" onkeyup="myFunction()" placeholder="Search Users">
<button type="button" class="input-search-close icon md-close" aria-label="Close"></button>
</div>
</form>
<div class="nav-tabs-horizontal nav-tabs-animate" data-plugin="tabs">
<div class="dropdown page-user-sortlist">
Order By: <a class="dropdown-toggle inline-block" data-toggle="dropdown"
href="#" aria-expanded="false">Last Active</a>
<div class="dropdown-menu animation-scale-up animation-top-right animation-duration-250"
role="menu">
<a class="active dropdown-item" href="javascript:void(0)">Last Active</a>
<a class="dropdown-item" href="javascript:void(0)">Username</a>
<a class="dropdown-item" href="javascript:void(0)">Location</a>
<a class="dropdown-item" href="javascript:void(0)">Register Date</a>
</div>
</div>
<!-- KIEL ALL CONTACTS -->
<ul class="nav nav-tabs nav-tabs-line" role="tablist">
</ul>
<div class="tab-content">
<div class="tab-pane animation-fade active" id="all_contacts" role="tabpanel">
<ul class="list-group" id="myUL">
<?php
$result = mysqli_query($conn,"SELECT * FROM customer");
while($row = mysqli_fetch_array($result))
{
?>
<li class="list-group-item">
<div class="media">
<div class="pr-0 pr-sm-20 align-self-center">
<div class="avatar avatar-online">
<img src="../../../global/portraits/1.jpg" alt="...">
<i class="avatar avatar-busy"></i>
</div>
</div>
<div class="media-body align-self-center">
<h5 class="mt-0 mb-5 name">
<?php echo $row["customerName"]; ?>
<small>Ultimo Acesso: <?php echo $row["customerLastLogin"]; ?></small>
</h5>
<p>
<i class="icon icon-color md-pin" aria-hidden="true"></i> Street 4425 Golf Course Rd
</p>
<div>
<a class="text-action" href="javascript:void(0)">
<i class="icon icon-color md-email" aria-hidden="true" title="<?php echo $row["customerEmail"]; ?>"></i>
</a>
<a class="text-action" href="javascript:void(0)">
<i class="icon icon-color md-smartphone" aria-hidden="true" title="<?php echo $row["customerPhone"]; ?>"></i>
</a>
<a class="text-action" href="javascript:void(0)">
<i class="fas fa-box-open md-smartphone" aria-hidden="true" title="<?php echo $row["customerId"]; ?>"></i>
</a>
</div>
</div>
<div class="pl-0 pl-sm-20 mt-15 mt-sm-0 align-self-center">
<button type="button" class="btn btn-icon btn-primary waves-effect waves-classic" data-toggle="modal" data-target="#updateUser<?php echo $row['customerId']?>">
<i class="fas fa-pencil-alt md-notifications" aria-hidden="true"></i>
</button>
<button type="button" class="btn btn-icon btn-danger waves-effect waves-classic">
<i class="fas fa-trash-alt md-notifications" aria-hidden="true"></i>
</button>
</div>
</div>
</li>
<script>
function myFunction() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
console.log(li);
// debugger;
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("h5")[0];
txtValue = a.textContent || a.innerText;
// debugger;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
</ul>
<?php
}
// close connection database
mysqli_close($conn);
?>
Any idea?
Thanks.
Related
I wanna to hide sorting icons by default and show them by clicking the column header name. This is my .cshtml code:
#model string[]
<style>
</style>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class="tableHeader" id ="table">
<div class="card w-100 mb-1 border-0">
<div class="card-dark-mode-body text-dark headerRow fw-bolder mainColor" >
<div class="row p-2">
#foreach(var prop in Model)
{
<div class="col text-center d-table sortable" >
<div class="btn-group" id="sorting" onclick="sortingVisibility()">
<p class="mb-0 d-lg-table-cell align-middle" id="columnName" style='padding-top:3px'>
#prop
<div class="btn-group-vertical" style='padding-left: 20px;' id="divIcon">
<a href="/Administracija/Ocitavanja/Index?OrderBy=#prop&Sorting=asc" class="btn btn-xs btn-link p-0">
<i class="fa fa-sort-up" style='color:white;' id="sortUpIcon" aria-hidden="true"></i>
</a>
<a href="/Administracija/Ocitavanja/Index?OrderBy=#prop&Sorting=desc" class="btn btn-xs btn-link p-0">
<i class="fa fa-sort-down" style='color:white;' id="sortDownIcon" aria-hidden="true"></i>
#*<span class="glyphicon glyphicon-triangle-bottom" style='color:white;'></span>*#
</a>
</div>
</p>
</div>
</div>
}
</div>
</div>
</div>
</div>
#*location.href='/Administracija/Ocitavanja/Index?OrderBy=#prop&Sorting=desc'*#
<script>
function sortingVisibility()
{
var iconUp = document.getElementById("sortUpIcon");
var iconDown = document.getElementById("sortDownIcon");
var div = document.getElementById("divIcon");
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
}
I tried to do like this but its not working on click it only hide the icon and doesnt change anything.
Can anyone give me some hints about this?
In order to hide the div, you have to initially set the display property of the div to none and then we have to set the display property to block or none.
Below I have modified your code with the changes.
#model string[]
<style>
</style>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class="tableHeader" id ="table">
<div class="card w-100 mb-1 border-0">
<div class="card-dark-mode-body text-dark headerRow fw-bolder mainColor" >
<div class="row p-2">
#foreach(var prop in Model)
{
<div class="col text-center d-table sortable" >
<div class="btn-group" id="sorting" onclick="sortingVisibility()">
<p class="mb-0 d-lg-table-cell align-middle" id="columnName" style='padding-top:3px'>
#prop
<div class="btn-group-vertical" style='padding-left: 20px;' id="divIcon">
<a href="/Administracija/Ocitavanja/Index?OrderBy=#prop&Sorting=asc" class="btn btn-xs btn-link p-0">
<i class="fa fa-sort-up" style='color:white; display: none' id="sortUpIcon" aria-hidden="true"></i>
</a>
<a href="/Administracija/Ocitavanja/Index?OrderBy=#prop&Sorting=desc" class="btn btn-xs btn-link p-0">
<i class="fa fa-sort-down" style='color:white; display: none' id="sortDownIcon" aria-hidden="true"></i>
#*<span class="glyphicon glyphicon-triangle-bottom" style='color:white;'></span>*#
</a>
</div>
</p>
</div>
</div>
}
</div>
</div>
</div>
</div>
#*location.href='/Administracija/Ocitavanja/Index?OrderBy=#prop&Sorting=desc'*#
<script>
function sortingVisibility()
{
var iconUp = document.getElementById("sortUpIcon");
var iconDown = document.getElementById("sortDownIcon");
var div = document.getElementById("divIcon");
if ( iconUp.style.display == "none" || iconDown.style.display == "none";){
iconUp.style.display == "none";
iconDown.style.display =="block";
} else {
iconUp.style.display == "block";
iconDown.style.display =="none";
}
}
I want to delete data on my website using a delete button. The data is displayed into a "#table_body" with a button that is created in a javascript. My idea here is that every line of data has a delete button under it. My problem is how to delete the data based on the unique id/reference id by pressing the delete button.
I have tried naming the ".child('123').remove();" instead of ".child(key).remove();" and it works. however it only deletes the data based on the 123 id. I want it to delete the data with the unique id.
Here is the Javascript code:
var rootRef = firebase.database().ref().child("User");
rootRef.on("child_added", snap => {
var name = snap.child("name").val();
var add = snap.child("address").val();
var contact = snap.child("contact").val();
$("#table_body").append("<tr><td>" + name + "</td><td>" + add + "</td><td>" + contact + "</td><td>");
$("#table_body").append('<button id="1" onClick="reply_click(this.id)">Delete</button></td></tr>');
});
function reply_click(clicked_id){
firebase.database().ref("User").child(key).remove();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
<link rel="icon" type="image/png" href="../assets/img/favicon.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>
Happy Paws
</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
<!-- Fonts and icons -->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<!-- CSS Files -->
<link href="../assets/css/material-dashboard.css?v=2.1.0" rel="stylesheet" />
<!-- CSS Just for demo purpose, don't include it in your project -->
<link href="../assets/demo/demo.css" rel="stylesheet" />
</head>
<div class="wrapper ">
<div class="sidebar" data-color="green" data-background-color="black" data-image="../assets/img/sidebar-2.jpg">
<!--
Tip 1: You can change the color of the sidebar using: data-color="purple | azure | green | orange | danger"
Tip 2: you can also add an image using data-image tag
-->
<div class="logo">
<a class="simple-text logo-normal">
HAPPY PAWS
</a>
</div>
<div class="sidebar-wrapper">
<ul class="nav">
<li class="nav-item active ">
<a class="nav-link" href="./dashboard.html">
<i class="material-icons">dashboard</i>
<p>Dashboard</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./user.html">
<i class="material-icons">person</i>
<p>Account</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./tables.html">
<i class="material-icons">content_paste</i>
<p>User List</p>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="javscript:void(0)" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">library_books</i>
<span class="notification">Pet Article</span>
<p class="d-lg-none d-md-block">
Some Actions
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="./typography.html"><p style="color:green;">Articles</p></a>
<a class="dropdown-item" href="./add-article.html"><p style="color:green;">Add Article</p></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="javscript:void(0)" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">shopping_cart</i>
<span class="notification">Products</span>
<p class="d-lg-none d-md-block">
Some Actions
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="./accessories.html"><p style="color:green;">Accessories</p></a>
<a class="dropdown-item" href="./clothes.html"><p style="color:green;">Clothes</p></a>
<a class="dropdown-item" href="./food.html"><p style="color:green;">Food</p></a>
<a class="dropdown-item" href="./hygiene.html"><p style="color:green;">Hygiene</p></a>
<a class="dropdown-item" href="./toys.html"><p style="color:green;">Toys</p></a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="javscript:void(0)" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">pets</i>
<span class="notification">Pet Adoption</span>
<p class="d-lg-none d-md-block">
Some Actions
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="./icons.html"><p style="color:green;">Dog</p></a>
<a class="dropdown-item" href="./cat.html"><p style="color:green;">Cat</p></a>
</div>
</li>
<li class="nav-item ">
<a class="nav-link" href="./login.html">
<i class="material-icons">logout</i>
<p>logout</p>
</a>
</li>
<!-- <li class="nav-item active-pro ">
<a class="nav-link" href="./upgrade.html">
<i class="material-icons">unarchive</i>
<p>Upgrade to PRO</p>
</a>
</li> -->
</ul>
</div>
</div>
<div class="main-panel">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top " id="navigation-example">
<div class="container-fluid">
<div class="navbar-wrapper">
<a class="navbar-brand" href="javascript:void(0)">Dashboard</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation" data-target="#navigation-example">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
</button>
<div class="collapse navbar-collapse justify-content-end">
<form class="navbar-form">
<div class="input-group no-border">
<input type="text" id="Search1" value="" class="form-control" placeholder="Search...">
<button type="submit" id="Search2" class="btn btn-default btn-round btn-just-icon">
<i class="material-icons">search</i>
<div class="ripple-container"></div>
</button>
</div>
</form>
</div>
</nav>
<!-- End Navbar -->
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
<a href="#">
<div class="card card-stats">
<div class="card-header card-header-warning card-header-icon">
<div class="card-icon">
<i class="material-icons">face</i>
</div>
<p class="card-category">New Users</p>
<h3 class="card-title">
<small></small>
</h3>
</div>
<div class="card-footer">
<div class="stats">
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
<a href="reports.html">
<div class="card card-stats">
<div class="card-header card-header-success card-header-icon">
<div class="card-icon">
<i class="material-icons">report_problem</i>
</div>
<p class="card-link" href="./dashboard.html">
<p class="card-category" >Reports</p>
<h3 class="card-title"></h3>
</div>
<div class="card-footer">
<div class="stats">
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
<a href=".">
<div class="card card-stats">
<div class="card-header card-header-danger card-header-icon">
<div class="card-icon">
<i class="material-icons">pets</i>
</div>
<p class="card-category">New Pet for Adoption</p>
<h3 class="card-title"></h3>
</div>
<div class="card-footer">
<div class="stats">
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
<a href="#">
<div class="card card-stats">
<div class="card-header card-header-info card-header-icon">
<div class="card-icon">
<i class="material-icons">add_shopping_cart</i>
</div>
<p class="card-category" href="./dashboard.html">New Product</p>
<h3 class="card-title"></h3>
</div>
<div class="card-footer">
<div class="stats">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12">
<a href="#">
<div class="card">
<div class="card-header card bg-success text-white">
<h4 class="card-title">Account List</h4>
</div>
<div class="card-body table-responsive">
<table class="table table-hover">
<thead class="text-warning">
<th>Name</th>
<th>Address</th>
<th>Contact</th>
<th>Delete</th>
</thead>
<tbody id="table_body">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="https://www.gstatic.com/firebasejs/5.5.8/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyBHzWLC1UCPrwI0lTsWdmTQWlles05unb0",
authDomain: "happy-paws-6f139.firebaseapp.com",
databaseURL: "https://happy-paws-6f139.firebaseio.com",
projectId: "happy-paws-6f139",
storageBucket: "happy-paws-6f139.appspot.com",
messagingSenderId: "53124089069"
};
firebase.initializeApp(config);
</script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="accountview.js"></script>
<script src="firebase.js"></script>
<script src="login.js"></script>
<div class="fixed-plugin">
<div class="dropdown show-dropdown">
<a href="#" data-toggle="dropdown">
<i class="fa fa-cog fa-2x"> </i>
</a>
<ul class="dropdown-menu">
<li class="header-title"> Sidebar Filters</li>
<li class="adjustments-line">
<a href="javascript:void(0)" class="switch-trigger active-color">
<div class="badge-colors ml-auto mr-auto">
<span class="badge filter badge-purple active" data-color="purple"></span>
<span class="badge filter badge-azure" data-color="azure"></span>
<span class="badge filter badge-green" data-color="green"></span>
<span class="badge filter badge-warning" data-color="orange"></span>
<span class="badge filter badge-danger" data-color="danger"></span>
</div>
<div class="clearfix"></div>
</a>
</li>
<li class="header-title">Images</li>
<li>
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="../assets/img/sidebar-1.jpg" alt="">
</a>
</li>
<li class="active">
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="../assets/img/sidebar-2.jpg" alt="">
</a>
</li>
<li>
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="../assets/img/sidebar-3.jpg" alt="">
</a>
</li>
<li>
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="../assets/img/sidebar-4.jpg" alt="">
</a>
</li>
<!-- Core JS Files -->
<script src="../assets/js/core/jquery.min.js"></script>
<script src="../assets/js/core/popper.min.js"></script>
<script src="../assets/js/core/bootstrap-material-design.min.js"></script>
<script src="https://unpkg.com/default-passive-events"></script>
<script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<!-- Google Maps Plugin -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
<!-- Chartist JS -->
<script src="../assets/js/plugins/chartist.min.js"></script>
<!-- Notifications Plugin -->
<script src="../assets/js/plugins/bootstrap-notify.js"></script>
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
<script src="../assets/js/material-dashboard.js?v=2.1.0"></script>
<!-- Material Dashboard DEMO methods, don't include it in your project! -->
<script src="../assets/demo/demo.js"></script>
<script>
$(document).ready(function() {
$().ready(function() {
$sidebar = $('.sidebar');
$sidebar_img_container = $sidebar.find('.sidebar-background');
$full_page = $('.full-page');
$sidebar_responsive = $('body > .navbar-collapse');
window_width = $(window).width();
$('.fixed-plugin a').click(function(event) {
// Alex if we click on switch, stop propagation of the event, so the dropdown will not be hide, otherwise we set the section active
if ($(this).hasClass('switch-trigger')) {
if (event.stopPropagation) {
event.stopPropagation();
} else if (window.event) {
window.event.cancelBubble = true;
}
}
});
$('.fixed-plugin .active-color span').click(function() {
$full_page_background = $('.full-page-background');
$(this).siblings().removeClass('active');
$(this).addClass('active');
var new_color = $(this).data('color');
if ($sidebar.length != 0) {
$sidebar.attr('data-color', new_color);
}
if ($full_page.length != 0) {
$full_page.attr('filter-color', new_color);
}
if ($sidebar_responsive.length != 0) {
$sidebar_responsive.attr('data-color', new_color);
}
});
$('.fixed-plugin .background-color .badge').click(function() {
$(this).siblings().removeClass('active');
$(this).addClass('active');
var new_color = $(this).data('background-color');
if ($sidebar.length != 0) {
$sidebar.attr('data-background-color', new_color);
}
});
$('.fixed-plugin .img-holder').click(function() {
$full_page_background = $('.full-page-background');
$(this).parent('li').siblings().removeClass('active');
$(this).parent('li').addClass('active');
var new_image = $(this).find("img").attr('src');
if ($sidebar_img_container.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
$sidebar_img_container.fadeOut('fast', function() {
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
$sidebar_img_container.fadeIn('fast');
});
}
if ($full_page_background.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
$full_page_background.fadeOut('fast', function() {
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
$full_page_background.fadeIn('fast');
});
}
if ($('.switch-sidebar-image input:checked').length == 0) {
var new_image = $('.fixed-plugin li.active .img-holder').find("img").attr('src');
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
}
if ($sidebar_responsive.length != 0) {
$sidebar_responsive.css('background-image', 'url("' + new_image + '")');
}
});
$('.switch-sidebar-image input').change(function() {
$full_page_background = $('.full-page-background');
$input = $(this);
if ($input.is(':checked')) {
if ($sidebar_img_container.length != 0) {
$sidebar_img_container.fadeIn('fast');
$sidebar.attr('data-image', '#');
}
if ($full_page_background.length != 0) {
$full_page_background.fadeIn('fast');
$full_page.attr('data-image', '#');
}
background_image = true;
} else {
if ($sidebar_img_container.length != 0) {
$sidebar.removeAttr('data-image');
$sidebar_img_container.fadeOut('fast');
}
if ($full_page_background.length != 0) {
$full_page.removeAttr('data-image', '#');
$full_page_background.fadeOut('fast');
}
background_image = false;
}
});
$('.switch-sidebar-mini input').change(function() {
$body = $('body');
$input = $(this);
if (md.misc.sidebar_mini_active == true) {
$('body').removeClass('sidebar-mini');
md.misc.sidebar_mini_active = false;
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar();
} else {
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar('destroy');
setTimeout(function() {
$('body').addClass('sidebar-mini');
md.misc.sidebar_mini_active = true;
}, 300);
}
// we simulate the window Resize so the charts will get updated in realtime.
var simulateWindowResize = setInterval(function() {
window.dispatchEvent(new Event('resize'));
}, 180);
// we stop the simulation of Window Resize after the animations are completed
setTimeout(function() {
clearInterval(simulateWindowResize);
}, 1000);
});
});
});
</script>
<script>
$(document).ready(function() {
// Javascript method's body can be found in assets/js/demos.js
md.initDashboardPageCharts();
});
</script>
</body>
</html>
To get the key, you can do the following:
rootRef.on("child_added", snap => {
var key = snap.key;
var name = snap.child("name").val();
var add = snap.child("address").val();
var contact = snap.child("contact").val();
$("#table_body").append("<tr><td>" + name + "</td><td>" + add + "</td><td>" + contact + "</td><td>");
$("#table_body").append('<button id="1" onClick="reply_click(' + key + ')">Delete</button></td></tr>');
});
function reply_click(clicked_id){
firebase.database().ref("User").child(clicked_id).remove();
}
The snap.key will be able to retrieve the unique id in the database.
From the docs:
key
The key (last part of the path) of the location of this DataSnapshot.
I want to know how to change display style and element class when I click on element:
and also I'm loading " jquery.min.js version: 2.1.4 " and " bootstrap.min.js "
Before click on element:
<ul class"nav navbar-nav" >
<li class="nav-item search">
<!-- this a element -->
<a class="nav-link search-toggle" id="nav-link-search" href="#" title="Search Posts">
<i class="fa fa-fw fa-search"></i>
<span class="sr-only">
Search
</span>
</a>
</li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area">
<div class="container">
<div class="search-area-input">
<input placeholder="Search articles" type="text">
</div>
<div class="search-area-results index">
<ol class="article-index-list"></ol>
</div>
</div>
</div>
And after click on element:
<nav class="nav navbar-nav">
<li class="nav-item search">
<!-- this a element -->
<a class="nav-link search-toggle" href="#" title="Search articles">
<i class="fa fa-fw fa-times" title="Close search"></i>
<span class="sr-only">
Search
</span>
</a>
</li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area" style="display: block;">
<div class="container">
<div class="search-area-input">
<input placeholder="Search articles" type="text">
</div>
<div class="search-area-results index">
<ol class="article-index-list"></ol>
</div>
</div>
</div>
$("a").click(function(){
var i =$(this);
i.removeAttr('title');
i.attr('title','Search articles');
i.removeAttr('id');
var j = $('i.fa-search');
j.removeAttr('class');
j.attr('class','fa fa-fw fa-times');
j.attr('title','Close search');
$('.search-area').css('display',"block");
});
if u want to (display:none) again
$("a").click(function(){
var i =$(this);
i.removeAttr('title');
i.attr('title','Search Posts');
i.attr('id','nav-link-search');
var j = $('i.fa-times');
j.removeAttr('class');
j.attr('class','fa fa-fw fa-search');
j.removeAttr('title');
$('.search-area').css('display',"none");
});
$(document).on('click', ".search-toggle", function(e) {
e.preventDefault();
$(".search-area").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div><ul class="nav navbar-nav">
<li class="nav-item search">
<!-- this a element -->
<a class="nav-link search-toggle" id="nav-link-search" href="#" title="Search Posts">
<i class="fa fa-fw fa-search"></i>
<span class="sr-only">
Search
</span>
</a>
</li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area" style="display: none;">
<div class="container">
<div class="search-area-input">
<input placeholder="Search articles" type="text">
</div>
<div class="search-area-results index">
<ol class="article-index-list"></ol>
</div>
</div>
</div>
The code below will add the display: block to the element "search-area". This is given you have a clicking element with the class "element".
$(".element").click(function(){
$(".search-area").css( "display", "block" );
});
To change an element when you click on a link, the general concept is
$('a').on('click',function(e) {
e.preventDefault(); // don't follow the link
$('.search-area').addClass('something').removeClass('somethngElse'); // change .search-area
$('i.fa').addClass('something').removeClass('somethingElse').attr('title','foobar'); // change your i element
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class"nav navbar-nav" >
<li class="nav-item search">
<!-- this a element -->
<a class="nav-link search-toggle" id="nav-link-search" href="#" title="Search Posts">
<i class="fa fa-fw fa-search"></i>
<span class="sr-only">
Search
</span>
</a>
</li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area">
<div class="container">
<div class="search-area-input">
<input placeholder="Search articles" type="text">
</div>
<div class="search-area-results index">
<ol class="article-index-list"></ol>
</div>
</div>
</div>
I have used owl carousel 2 for product slider. Products are added from the admin panel which needs to be displayed in front-end including images. I am able to add images and call them in the front but it doesn't fit in the owl carousel which creates a messy look on the site. If I directly put it in an image source it works, but calling from Javascript doesn't work.
All I need is that the product info and image should fit within and also owl carousel 2 should be supportive.
I am using jquery 2.1.4 and bootstrap 3.
HTML:
<div class="col-sm-12">
<div class="block block-tabs">
<div class="block-head">
<div class="block-title">
<div class="block-title-text text-lg">best selling</div>
</div>
<ul class="nav-tab">
<li class="active"><a data-toggle="tab" href="#tab-1">All</a></li>
<li ><a data-toggle="tab" href="#tab-2">Personalised</a></li>
<li><a data-toggle="tab" href="#tab-2">Photo Books</a></li>
<li><a data-toggle="tab" href="#tab-1">Calanders</a></li>
<li><a data-toggle="tab" href="#tab-2">LED Lights</a></li>
</ul>
</div>
<div class="block-inner">
<div class="tab-container">
<div id="tab-1" class="tab-panel fade in active">
<ul id="tab1" class="products kt-owl-carousel" data-margin="20" data-loop="true" data-nav="true" data-responsive='{"0":{"items":1},"600":{"items":3},"1000":{"items":5}}'>
</ul>
</div>
<div id="tab-2" class="tab-panel fade">
<ul class="products kt-owl-carousel" data-margin="20" data-loop="true" data-nav="true" data-responsive='{"0":{"items":1},"600":{"items":3},"1000":{"items":5}}'>
<li class="product">
<div class="product-container">
<div class="product-left">
<div class="product-thumb">
<a class="product-img" href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg" alt="Product"></a>
<a title="Quick View" href="#" class="btn-quick-view">Quick View</a>
</div>
</div>
<div class="product-right">
<div class="product-name">
Cotton Lycra Leggings
</div>
<div class="price-box">
<span class="product-price">139.98</span>
<span class="product-price-old">169.00</span>
</div>
<div class="product-star">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
</div>
<div class="product-button">
<a class="btn-add-wishlist" title="Add to Wishlist" href="#">Add Wishlist</a>
<a class="btn-add-comparre" title="Add to Compare" href="#">Add Compare</a>
<a class="button-radius btn-add-cart" title="Add to Cart" href="#">Cart<span class="icon"></span></a>
</div>
</div>
</div>
</li>
<li class="product">
<div class="product-container">
<div class="product-left">
<div class="product-thumb">
<a class="product-img" href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg" alt="Product"></a>
<a title="Quick View" href="#" class="btn-quick-view">Quick View</a>
</div>
</div>
<div class="product-right">
<div class="product-name">
Cotton Lycra Leggings
</div>
<div class="price-box">
<span class="product-price">139.98</span>
<span class="product-price-old">169.00</span>
</div>
<div class="product-star">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
</div>
<div class="product-button">
<a class="btn-add-wishlist" title="Add to Wishlist" href="#">Add Wishlist</a>
<a class="btn-add-comparre" title="Add to Compare" href="#">Add Compare</a>
<a class="button-radius btn-add-cart" title="Add to Cart" href="#">Cart<span class="icon"></span></a>
</div>
</div>
</div>
</li>
<li class="product">
<div class="product-container">
<div class="product-left">
<div class="product-thumb">
<a class="product-img" href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg" alt="Product"></a>
<a title="Quick View" href="#" class="btn-quick-view">Quick View</a>
</div>
</div>
<div class="product-right">
<div class="product-name">
Cotton Lycra Leggings
</div>
<div class="price-box">
<span class="product-price">139.98</span>
<span class="product-price-old">169.00</span>
</div>
<div class="product-star">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
</div>
<div class="product-button">
<a class="btn-add-wishlist" title="Add to Wishlist" href="#">Add Wishlist</a>
<a class="btn-add-comparre" title="Add to Compare" href="#">Add Compare</a>
<a class="button-radius btn-add-cart" title="Add to Cart" href="#">Cart<span class="icon"></span></a>
</div>
</div>
</div>
</li>
<li class="product">
<div class="product-container">
<div class="product-left">
<div class="product-thumb">
<a class="product-img" href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg" alt="Product"></a>
<a title="Quick View" href="#" class="btn-quick-view">Quick View</a>
</div>
</div>
<div class="product-right">
<div class="product-name">
Cotton Lycra Leggings
</div>
<div class="price-box">
<span class="product-price">139.98</span>
<span class="product-price-old">169.00</span>
</div>
<div class="product-star">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
</div>
<div class="product-button">
<a class="btn-add-wishlist" title="Add to Wishlist" href="#">Add Wishlist</a>
<a class="btn-add-comparre" title="Add to Compare" href="#">Add Compare</a>
<a class="button-radius btn-add-cart" title="Add to Cart" href="#">Cart<span class="icon"></span></a>
</div>
</div>
</div>
</li>
<li class="product">
<div class="product-container">
<div class="product-left">
<div class="product-thumb">
<a class="product-img" href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg" alt="Product"></a>
<a title="Quick View" href="#" class="btn-quick-view">Quick View</a>
</div>
</div>
<div class="product-right">
<div class="product-name">
Cotton Lycra Leggings
</div>
<div class="price-box">
<span class="product-price">139.98</span>
<span class="product-price-old">169.00</span>
</div>
<div class="product-star">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
</div>
<div class="product-button">
<a class="btn-add-wishlist" title="Add to Wishlist" href="#">Add Wishlist</a>
<a class="btn-add-comparre" title="Add to Compare" href="#">Add Compare</a>
<a class="button-radius btn-add-cart" title="Add to Cart" href="#">Cart<span class="icon"></span></a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Javascript:
$(function () {
init_carousel();
var url = '../Home/FrontProduct';
var data1 = {};
$.post(url, data1, function (data) {
OnSuccess(data);
});
function OnSuccess(data) {
var xmlDoc = $.parseXML(data);
var xml = $(xmlDoc);
var All = xml.find("All");
var AllrowCount = Math.ceil(All.length);
var content_g = '';
for (var p = 0; p < AllrowCount; p++) {
var Allrow = $(All[p]);
var content = '';
content = '<div class="item">' +
' <div class="product-container">' +
' <div class="product-left">' +
' <div class="product-thumb">' +
' <a class="product-img" href="#"><img src="http://ashish81.honestteam.com/products/pro_img/' + Allrow.find("ProductImages").text() + '"></a>' +
'<a title="Quick View" href="#" class="btn-quick-view">Quick View</a>' +
'</div>' +
' </div>' +
'<div class="product-right">' +
' <div class="product-name">' +
' Cotton Lycra Leggings' +
' </div>' +
' <div class="price-box">' +
' <span class="product-price">139.98</span>' +
' <span class="product-price-old">169.00</span>' +
' </div>' +
'<div class="product-star">' +
'<i class="fa fa-star"></i>' +
'<i class="fa fa-star"></i>' +
'<i class="fa fa-star"></i>' +
'<i class="fa fa-star"></i>' +
'<i class="fa fa-star-half-o"></i>' +
'</div>' +
'<div class="product-button">' +
'<a class="btn-add-wishlist" title="Add to Wishlist" href="#">Add Wishlist</a>' +
'<a class="btn-add-comparre" title="Add to Compare" href="#">Add Compare</a>' +
'<a class="button-radius btn-add-cart" title="Add to Cart" href="#">Cart<span class="icon"></span></a>' +
' </div>' +
' </div>' +
'</div>' +
'</div>';
content_g = content_g + content;
}
var owl = $('.kt-owl-carousel');
owl.prepare().trigger('add.owl.carousel', content_g);
}
});
/* Functions */
function init_carousel() {
$('.kt-owl-carousel').each(function () {
var config = $(this).data();
//config.navText = ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'];
var animateOut = $(this).data('animateout');
var animateIn = $(this).data('animatein');
if (typeof animateOut != 'undefined') {
config.animateOut = animateOut;
}
if (typeof animateIn != 'undefined') {
config.animateIn = animateIn;
}
var owl = $(this);
owl.owlCarousel(config);
$(this).find('.owl-item').removeClass('last-item');
$(this).find('.owl-item.active').last().addClass('last-item');
var t = $(this);
owl.on('changed.owl.carousel', function (event) {
var item = event.item.index;
t.find('.owl-item').removeClass('last-item');
setTimeout(function () {
t.find('.owl-item.active').last().addClass('last-item');
}, 100);
});
});
};
Here is the jfiddle
The problem is that you call the init function of owlcarousel before you have the content. So, to solve this you have to initialize the plugin just after the ajax call return.
Something like this:
function ajaxLike() {
$('body').append('<div class="owl-carousel"> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> </div>');
// just after the html appears in the DOM you can initialize the owl plugin
ajaxCallback();
}
// add the html with script, just like you do after the ajax's call return
ajaxLike();
function ajaxCallback() {
$('.owl-carousel').owlCarousel({
margin:10
});
}
.owl-item {
width:100px;
height:100px;
line-height:100px;
text-align:center;
background:red;
}
<link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css">
<script src="http://www.owlcarousel.owlgraphic.com/assets/vendors/jquery.min.js"></script>
<script src="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script>
http://jsbin.com/jetane
Basically trying to create kind of an inbox for my person portfolio (more of a learning experience, then anything serious, or of use).
Right now when this document loads within an ajax/javascript function, it loads showing ALL emails (instead of just showing the Inbox section by default)
I've tried adding a function in javascript for "on document load" but I believe I may not have the css correct or anything.
My code is below:
<div id="messages" class="container-fluid">
<div class="row">
<div id="breadcrumb" class="col-xs-12">
<a href="#" class="show-sidebar">
<i class="fa fa-bars"></i>
</a>
<ol class="breadcrumb pull-left">
<li>Dashboard</li>
<li>Modules</li>
<li>Messages</li>
</ol>
<div id="social" class="pull-right">
<i class="fa fa-google-plus"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-youtube"></i>
</div>
</div>
</div>
<div class="row" id="test">
<div class="col-xs-12">
<div class="row">
<ul id="messages-menu" class="nav msg-menu">
<li>
<a href="#" class="" id="msg-inbox">
<i class="fa fa-inbox"></i>
<span class="hidden-xs">Inbox (<?php echo $inboxCount; ?>)</span>
</a>
</li>
<li>
<a href="#" class="" id="msg-starred">
<i class="fa fa-star"></i>
<span class="hidden-xs">Unread (<?php echo $unreadCount; ?>)</span>
</a>
</li>
<li>
<a href="#" class="" id="msg-important">
<i class="fa fa-bookmark"></i>
<span class="hidden-xs">Read (<?php echo $readCount; ?>)</span>
</a>
</li>
<li>
<a href="#" class="" id="msg-trash">
<i class="fa fa-trash-o"></i>
<span class="hidden-xs">Trash (<?php echo $trashCount; ?>)</span>
</a>
</li>
</ul>
<div id="messages-list" class="col-xs-10 col-xs-offset-2">
<?php
while ($row = mysqli_fetch_assoc($getEmails)) {
$email_id = $row['email_id'];
$emailStatus = $row['emailStatus'];
$contactName = $row['contactName'];
$contactEmailAddress = $row['contactEmailAddress'];
$messageBody = $row['messageBody'];
$tempEmailDate = $row['emailDate'];
$emailDate = date("d-m-Y", strtotime($tempEmailDate));
$contactName = strtoupper($contactName);
$contactEmailAddress = strtoupper($contactEmailAddress);
if ($row == 1 && ($emailStatus == 1 || $emailStatus == 2)) {
echo "
<div class='row one-list-message msg-inbox-item' id='msg-one'>
<div class='col-xs-1 checkbox'>
<label>
<input type='checkbox'>$contactName
<i class='fa fa-square-o small'></i>
</label>
</div>
<div class='col-xs-9 message-title'>$messageBody</div>
<div class='col-xs-2 message-date'>$emailDate</div>
</div>
";
} else if ($emailStatus == 1 || $emailStatus == 2) {
echo "
<div class='row one-list-message msg-inbox-item'>
<div class='col-xs-1 checkbox'>
<label>
<input type='checkbox'>$contactName
<i class='fa fa-square-o small'></i>
</label>
</div>
<div class='col-xs-9 message-title'>$messageBody</div>
<div class='col-xs-2 message-date'>$emailDate</div>
</div>
";
}
if ($emailStatus == 1) {
// Unread section
echo "
<div class='row one-list-message msg-starred-item'>
<div class='col-xs-1 checkbox'>
<label>
<input type='checkbox'>$contactName
<i class='fa fa-square-o small'></i>
</label>
</div>
<div class='col-xs-9 message-title'>$messageBody</div>
<div class='col-xs-2 message-date'>$emailDate</div>
</div>
";
$updateEmailStatus = mysqli_query($db, "UPDATE emails SET emailStatus='2' WHERE email_id='$email_id'");
} else {
if ($emailStatus == 2) {
// Read section
echo "
<div class='row one-list-message msg-important-item'>
<div class='col-xs-1 checkbox'>
<label>
<input type='checkbox'>$contactName
<i class='fa fa-square-o small'></i>
</label>
</div>
<div class='col-xs-9 message-title'>$messageBody</div>
<div class='col-xs-2 message-date'>$emailDate</div>
</div>
";
} else {
if ($emailStatus == 3) {
// Deleted section
echo "
<div class='row one-list-message msg-trash-item'>
<div class='col-xs-1 checkbox'>
<label>
<input type='checkbox'>$contactName
<i class='fa fa-square-o small'></i>
</label>
</div>
<div class='col-xs-9 message-title'>$messageBody</div>
<div class='col-xs-2 message-date'>$emailDate</div>
</div>
";
}
}
}
}
?>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#msg-inbox').show();
});
// Add listener for redraw menu when windows resized
window.onresize = MessagesMenuWidth;
$(document).ready(function() {
// Add class for correctly view of messages page
$('#content').addClass('full-content');
// Run script for change menu width
MessagesMenuWidth();
$('#content').on('click','[id^=msg-]', function(e){
e.preventDefault();
$('[id^=msg-]').removeClass('active');
$(this).addClass('active');
$('.one-list-message').slideUp('fast');
$('.'+$(this).attr('id')+'-item').slideDown('fast');
});
$('html').animate({scrollTop: 0},'slow');
});
</script>
Can anyone see how I'd do the javascript to have the msg-inbox load when the page loads? instead of loading none and displaying all emails.
Thank you!
When trying to hide and/or show divs, jquery is your best friend. It's simple and looks nice.
Start by wrapping your read & unread messages in a div id of "inbox"
Then give each of your inbox divs an id like "read" & "unread"
Using the code below you can hide/show your individual divs.
Place this between your <head> </head> tags
<script src="JS/jquery/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){
$("#Unread").click(function(){
$("#unread").slideToggle(500, function() {
});
});
$("#Read").click(function(){
$("#read").slideToggle(500, function() {
});
});
$("#Deleted").click(function(){
$("#deleted").slideToggle(500, function() {
});
});
});
</script>
<style>
#unread {
display: none;
}
#read {
display: none;
}
#deleted {
display: none;
}
</style>
Then in the body of your page, you can do something like this
<div id="inbox">
<div id="unread_msgs">
<button id="Unread">Show/Hide Unread</button>
<div id="unread">
<p>These </p>
<p>are</p>
<p>my</p>
<p>unread</p>
<p>messages</p>
</div><!-- end unread -->
</div><!-- end unread_msgs -->
<div id="read_msgs">
<button id="Read">Show/Hide Read</button>
<div id="read">
<p>These </p>
<p>are</p>
<p>my</p>
<p>read</p>
<p>messages</p>
</div><!-- end read -->
</div><!-- end read_msgs -->
</div><!-- end inbox -->
<div id="deleted_msgs">
<button id="Deleted">Show/Hide Deleted</button>
<div id="deleted">
<p>These </p>
<p>are</p>
<p>my</p>
<p>deleted</p>
<p>messages</p>
</div>
</div>
Hope this helps. It should get you going in the right direction.
References
jquery slidetoggle