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>
Related
I am creating a QR Code scanning web application which will run locally on a pc. It scans a qr code with unique id and marks the entry of the user using pc camera. I want to add a pop up in which before marking entry into the system, it asks whether to enter the person or not (security reasons at my company). If the user clicks yes, it marks the entry otherwise nothing happens.
Here is my code:
index.php
<?php session_start();?>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>PBSO GATEPASS</title>
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="js/instascan.min.js"></script>
<!-- DataTables -->
<link rel="stylesheet" href="plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
#divvideo{
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body style="background:#eee">
<nav class="navbar" style="background:#2c3e50">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> <i class="glyphicon glyphicon-qrcode"></i> WELCOME TO IOCL-PBSO (Marketing Division)</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><span class="glyphicon glyphicon-home"></span> Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-cog"></span> Maintenance <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><span class="glyphicon glyphicon-user"></span> List of Trainees</li>
<li><span class="glyphicon glyphicon-plus-sign"></span> Add New Trainee</li>
<li><span class="glyphicon glyphicon-calendar"></span> Attendance</li>
</ul>
</li>
<li><span class="glyphicon glyphicon-align-justify"></span> Reports</li>
<li><span class="glyphicon glyphicon-time"></span> Check Attendance</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<!--<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>-->
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-4" style="padding:10px;background:#fff;border-radius: 5px;" id="divvideo">
<center><p class="login-box-msg"> <i class="glyphicon glyphicon-camera"></i> TAP HERE</p></center>
<video id="preview" width="100%" height="50%" style="border-radius:10px;"></video>
<br>
<br>
<?php
if(isset($_SESSION['error'])){
echo "
<div class='alert alert-danger alert-dismissible' style='background:red;color:#fff'>
<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×</button>
<h4><i class='icon fa fa-warning'></i> Error!</h4>
".$_SESSION['error']."
</div>
";
unset($_SESSION['error']);
}
if(isset($_SESSION['success'])){
echo "
<div class='alert alert-success alert-dismissible' style='background:green;color:#fff'>
<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×</button>
<h4><i class='icon fa fa-check'></i> Success!</h4>
".$_SESSION['success']."
</div>
";
unset($_SESSION['success']);
}
?>
</div>
<div class="col-md-8">
<form action="CheckInOut.php" method="post" class="form-horizontal" style="border-radius: 5px;padding:10px;background:#fff;" id="divvideo">
<i class="glyphicon glyphicon-qrcode"></i> <label>SCAN QR CODE</label> <p id="time"></p>
<input type="text" name="studentID" id="text" placeholder="scan qrcode" class="form-control" autofocus>
</form>
<div style="border-radius: 5px;padding:10px;background:#fff;" id="divvideo">
<table id="example1" class="table table-bordered">
<thead>
<tr>
<td>NAME</td>
<td>GATE ID</td>
<td>TIME IN</td>
<td>TIME OUT</td>
<td>LOGDATE</td>
</tr>
</thead>
<tbody>
<?php
$server = "localhost:3404";
$username="root";
$password="hunter2";
$dbname="qrcodedb";
$conn = new mysqli($server,$username,$password,$dbname);
$date = date('Y-m-d');
if($conn->connect_error){
die("Connection failed" .$conn->connect_error);
}
$sql ="SELECT * FROM attendance LEFT JOIN student ON attendance.STUDENTID=student.STUDENTID WHERE LOGDATE='$date'";
$query = $conn->query($sql);
while ($row = $query->fetch_assoc()){
?>
<tr>
<td><?php echo $row['LASTNAME'].', '.$row['FIRSTNAME'].' '.$row['MNAME'];?></td>
<td><?php echo $row['STUDENTID'];?></td>
<td><?php echo $row['TIMEIN'];?></td>
<td><?php echo $row['TIMEOUT'];?></td>
<td><?php echo $row['LOGDATE'];?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
<br>
<button type="submit" class="btn btn-success pull-right" onclick="Export()">
<i class="fa fa-file-excel-o fa-fw"></i> Export to excel
</button>
</div>
<script>
function Export()
{
var conf = confirm("Please confirm if you wish to proceed in exporting the attendance in to Excel File");
if(conf == true)
{
window.open("export.php",'_blank');
}
}
</script>
<script>
let scanner = new Instascan.Scanner({ video: document.getElementById('preview')});
Instascan.Camera.getCameras().then(function(cameras){
if(cameras.length > 0 ){
scanner.start(cameras[0]);
} else{
alert('No cameras found');
}
}).catch(function(e) {
console.error(e);
});
scanner.addListener('scan',function(c){
document.getElementById('text').value=c;
document.forms[0].submit();
});
</script>
<script type="text/javascript">
var timestamp = '<?=time();?>';
function updateTime(){
$('#time').html(Date(timestamp));
timestamp++;
}
$(function(){
setInterval(updateTime, 1000);
});
</script>
<script src="plugins/jquery/jquery.min.js"></script>
<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="plugins/datatables/jquery.dataTables.min.js"></script>
<script src="plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
<script>
$(function () {
$("#example1").DataTable({
"responsive": true,
"autoWidth": false,
"order": [[ 2, "desc" ]],
});
$('#example2').DataTable({
"paging": true,
"lengthChange": false,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": false,
"responsive": true,
});
});
</script>
</body>
</html>
here is CheckInOut.php
<?php
session_start();
$server = "localhost:3404";
$username="root";
$password="hunter2";
$dbname="qrcodedb";
$conn = new mysqli($server,$username,$password,$dbname);
if($conn->connect_error){
die("Connection failed" .$conn->connect_error);
}
if(isset($_POST['studentID'])){
echo "<link rel='stylesheet' href='plugins/css/bootstrap.min.css'>";
echo "<script>";
echo "$(document).ready(function(){";
echo "$('#myModal').modal('show')";
echo "});";
echo "</script>";
echo "<div id='myModal' class='modal fade'>";
echo "<div class='modal-dialog'>";
echo "<div class='modal-content'>";
echo "<div class='modal-header'>";
echo "<h5 class='modal-title'>Attention!!! </h5>";
echo "<button type='button' class='close' data-dismiss='modal'>×</button>";
echo "</div>";
echo "<div class='modal-body'>";
echo "<p>Authorize the user</p>";
echo "</div>";
echo "<div class='modal-footer'>";
echo "<button type='button' class='btn btn-primary'>Allow</button>";
echo "<button type='button' class='btn btn-secondary' data-dismiss='modal'>Deny</button>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "<script src='plugins/jquery/jquery.min.js'></script>";
echo "<script src='plugins/bootstrap/js/bootstrap.min.js'></script>";
$studentID =$_POST['studentID'];
$date = date('Y-m-d');
$time = date('H:i:s A');
$sql = "SELECT * FROM student WHERE STUDENTID = '$studentID'";
$query = $conn->query($sql);
if($query->num_rows < 1){
$_SESSION['error'] = 'Cannot find QRCode number '.$studentID;
}else{
$row = $query->fetch_assoc();
$id = $row['STUDENTID'];
$sql ="SELECT * FROM attendance WHERE STUDENTID='$id' AND LOGDATE='$date' AND STATUS='0'";
$query=$conn->query($sql);
if($query->num_rows>0){
$sql = "UPDATE attendance SET TIMEOUT='$time', STATUS='1' WHERE STUDENTID='$studentID' AND LOGDATE='$date'";
$query=$conn->query($sql);
$_SESSION['success'] = 'Successfuly Time Out: '.$row['FIRSTNAME'].' '.$row['LASTNAME'];
}else{
$sql = "INSERT INTO attendance(STUDENTID,TIMEIN,LOGDATE,STATUS) VALUES('$studentID','$time','$date','0')";
if($conn->query($sql) ===TRUE){
$_SESSION['success'] = 'Successfuly Time In: '.$row['FIRSTNAME'].' '.$row['LASTNAME'];
}else{
$_SESSION['error'] = $conn->error;
}
}
}
}else{
$_SESSION['error'] = 'Please scan your QR Code number';
}
header("location: index.php");
$conn->close();
?>
Please help me in creating the pop up. The pop up code does not work, but rest of the code works
I use a PHP Script (AdLinkFly - Monetized URL Shortener)
I want to display different menu according to login user . If user is client then display Manage Account and LogOut otherwise show Sing-Up and Sing-In.
Here is the home page http://adshort.ga
Here is the code "front.ctp" :
<html lang="<?= locale_get_primary_language(null) ?>">
<head>
<?= $this->element('front_head'); ?>
</head>
<body class="<?= ($this->request->here == $this->request->webroot) ? 'home' : 'inner-page' ?>">
<?= get_option('after_body_tag_code'); ?>
<!-- Navigation -->
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only"><?= __('Toggle navigation') ?></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<?php
$logo = get_logo();
$class = '';
if ($logo['type'] == 'image') {
$class = 'logo-image';
}
?>
<a class="navbar-brand <?= $class ?>" href="<?= $this->Url->build('/'); ?>"><?= $logo['content'] ?></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 navbar-right">
<li>
<?= __('Home') ?>
</li>
<?php if (get_option('enable_advertising', 'yes') == 'yes') : ?>
<li>
<?= __('Advertising') ?>
</li>
<?php endif; ?>
<li>
<?= __('Payout Rates') ?>
</li>
<?php if ((bool)get_option('blog_enable', false)) : ?>
<li>
<?= __('Blog') ?>
</li>
<?php endif; ?>
<li>
<?= __('Sign in') ?>
</li>
<li>
<?= __('Sign Up') ?>
</li>
<li>
<?= __('Dashboard') ?>
</li>
<?php if (count(get_site_languages(true)) > 1) : ?>
<li class="dropdown language-selector">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false"><i class="fa fa-language"></i> <span class="caret"></span></a>
<ul class="dropdown-menu">
<?php foreach (get_site_languages(true) as $lang) : ?>
<li>
<?= $this->Html->link(
locale_get_display_name($lang, $lang),
'/' . $this->request->url . '?lang=' . $lang
); ?>
</li>
<?php endforeach; ?>
</ul>
</li>
<?php endif; ?>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<?= $this->Flash->render() ?>
<?= $this->fetch('content') ?>
<?= $this->element('front_footer'); ?>
</body>
</html>
Im not expert in PHP i would be grateful if someone could help me
When the user log in, start a session session_start(), then add to a $_SESSION variable when you store a value that the script can recognise, for example: $_SESSION['userLogged'] = true;, then at the main file, you can add this:
session_start();
if($_SESSION['userLogged'] == true) {
//Display here the HTML with echo function
} else {
//Load the normal page
}
Imagine you want to display a <p> tag with the text "Hello world!", then you would have to go to the html file, find the tag where you want the code to be executed, and then do the code below. For example:
if($_SESSION['userLogged'] == true) {
echo '<p>Hello world!</p>';
}
I've been struggling for some weeks with this problem. Look, I've got a page with a nice table, that is dynamic with the help of jquery.
Blue button (which's input[submit]), reacts on click and opens additional area on the right.
All data in the table is an output from a Database. My DB looks like this:
And here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Problem Solver</title>
<link href="other/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css"></head>
<body>
<!-- -------------------upper navigation------------------------------ -->
<div class="container-fluid">
<nav id="navbar" class="navbar navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>F.A.Q</li>
<li>Technician</li>
<li>Delivery Analyst</li>
</ul>
<form action="#.php" method="post" name="search_form" class="navbar-form navbar-right" >
<input type="text" class="form-control" placeholder="Search..." name="search_field">
</form>
</nav>
<!-- -----------------------RESULTS' TABLE--------------------------->
<div class="row">
<div class="col-md-9 col-lg-9 col-sm-10 col-xs-12 main myTableBlock">
<h2 class="sub-header">Results:</h2>
<div class="table-responsive">
<?php
$dbh = new PDO("sqlite:myDB2");
$query = $dbh->prepare("SELECT * FROM myData");
$query->execute();
$result = $query->fetchall();
echo
"<table class='table table-striped table-hover' name='results_table'>
<thead>
<tr>
<th>Incident Number</th>
<th>Type of problem</th>
<th>Subject of problem</th>
<th>Date</th>
<th>Current Status</th>
</tr>
</thead>
<tbody>"
;
foreach($result as $row)
{
echo "<tr class=".$row['ID']." >";
echo "<td>" . $row['incident_number'] . "</td>";
echo "<td>" . $row['incident_type'] . "</td>";
echo "<td>" . $row['incident_subject'] . "</td>";
echo "<td>" . $row['incident_time'] . "</td>";
echo "<td>" . $row['status'] . "</td>";
echo "<td>" ."<form action='myOpennerOutput.php' method='GET'>"."<input type='hidden' name='my_inc_number' value=". $row['incident_number'] .">"."<input type='submit' name='trigger' value='Show Actions' class='btn btn-primary' data-toggle='collapse' href='#collapseExample' aria-expanded='false' aria-controls='collapseExample'>". "</form>". "</td>";
}
echo "</tr>";
echo "</tbody>";
echo "</table>";
?>
</div>
</div>
<!-- ---------------------------------OPENNER BLOCK --------------->
<div class="col-md-2 sidebar myOpenner col-md-pull-1 col-lg-2 col-lg-pull-1 col-sm-2 col-sm-pull-1 col-xs-2 col-xs-pull-1">
<div class="collapse" id="collapseExample">
<div class="well">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<form action="#.php" method="post">
<label id="incident_number">Incident nr.:</label>
<textarea name="actionsByTech" rows="5" cols="30" placeholder="Technician's actions:"></textarea><br>
<br>
<textarea name="da_description" rows="5" cols="30" placeholder="DA's description:"></textarea></br>
<div class=" col-md-12 text-center">
<input type="submit" class="btn btn-primary" value="Update">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- ----------------OPENNER END ------------------>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="other/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>
MY PROBLEM: I want, to get 'action' from myActions table in Data Base, and put in to the field from right clicking the Blue button "Show Actions". Every action is connected with different rows on site. So, first row has Incident number 999, and I want to get actions from that record in DB, and put it to field on the right. I would appreciate if you could help me with that. Thanks!
Try the below code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
Problem Solver
</title>
<link href="other/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- -------------------upper navigation------------------------------ -->
<div class="container-fluid">
<nav id="navbar" class="navbar navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
F.A.Q
</li>
<li>
Technician
</li>
<li>
Delivery Analyst
</li>
</ul>
<form action="#.php" method="post" name="search_form" class="navbar-form navbar-right" >
<input type="text" class="form-control" placeholder="Search..." name="search_field">
</form>
</nav>
<!-- -----------------------RESULTS' TABLE--------------------------->
<div class="row">
<div class="col-md-9 col-lg-9 col-sm-10 col-xs-12 main myTableBlock">
<h2 class="sub-header">
Results:
</h2>
<div class="table-responsive">
<?php
$dbh = new PDO("sqlite:myDB2");
$query = $dbh->prepare("SELECT * FROM myData");
$query->execute();
$result = $query->fetchall();
echo
"<table class='table table-striped table-hover' name='results_table'>
<thead>
<tr>
<th>Incident Number</th>
<th>Type of problem</th>
<th>Subject of problem</th>
<th>Date</th>
<th>Current Status</th>
</tr>
</thead>
<tbody>"
;
foreach($result as $row)
{
echo "<tr class=".$row['ID']." >";
echo "<td>" . $row['incident_number'] . "</td>";
echo "<td>" . $row['incident_type'] . "</td>";
echo "<td>" . $row['incident_subject'] . "</td>";
echo "<td>" . $row['incident_time'] . "</td>";
echo "<td>" . $row['status'] . "</td>";
echo "<td>" ."<input type='submit' name='trigger' value='Show Actions' class='btn btn-primary' data-toggle='collapse' href='#collapseExample' aria-expanded='false' aria-controls='collapseExample' onclick='refreshOpenner(".$row['incident_number'].")'>";
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
?>
</div>
</div>
<!-- ---------------------------------OPENNER BLOCK --------------->
<div class="col-md-2 sidebar myOpenner col-md-pull-1 col-lg-2 col-lg-pull-1 col-sm-2 col-sm-pull-1 col-xs-2 col-xs-pull-1">
<div class="collapse" id="collapseExample">
<div class="well">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<form action="#.php" method="post">
<label id="incident_number">Incident nr.:</label>
<textarea name="actionsByTech" rows="5" cols="30" placeholder="Technician's actions:"></textarea>
<br>
<br>
<textarea name="da_description" rows="5" cols="30" placeholder="DA's description:"></textarea>
</br>
<div class=" col-md-12 text-center">
<input type="submit" class="btn btn-primary" value="Update">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- ----------------OPENNER END ------------------>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="other/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
function refreshOpenner(incidentNr)
{
$('#incident_number').text('Incident nr.: ' +incidentNr);
}
}
</script>
</body>
</html>
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!
I am working on an existing wordpress site. I am updating a page that displays the users in clickable images. When the image is clicked a dropdown box is supposed to display the users name and description. The problem I am having is, the dropdown box is only displaying the name and description of the last user on the page. The information in the dropdown is not matching up with the image clicked. Any help is greatly appreciated!
Here is the HTML/PHP:
<section class="series">
<div class="container-fluid">
<?php //query for hosts/contributor users
$cq = new WP_User_Query(array('role'=>'contributor'));
// User Loop
if(!empty($cq->results))
{
//sort users into current and past by meta field//
$hosts = $cq->results;
$current_hosts = array();
foreach($hosts as $user)
{
$user->sort_num = get_field('order', "user_$user->ID");
if(tv_is_host_active($user->ID))
$current_hosts[] = $user;
else
$past_hosts[] = $user;
}
usort($current_hosts, 'tv_compare_hosts');
//display the current hosts
$row_counter = 0;
foreach ( $current_hosts as $user )
{
//add rows of four
if($row_counter++ % 4 == 0)
{
echo "<div class='row'\n>";
} ?>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a class="card card-cast" href="javascript:void(0)">
<div class="card-img-cast">
<?php if(get_field('profile_picture', "user_".$user->ID)): $image = get_field('profile_picture', "user_".$user->ID); ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php else: ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/thumbholder-medium.png" alt="winchester logo" />
<?php endif;?>
</div>
<div class="card-content">
<div class="card-title"><?php echo $user->data->display_name; ?></div>
</div>
</a>
</div>
<?php
//add rows of 4
if($row_counter % 4 == 0)
{
echo "</div><!-- end row-->\n";
}
} //end foreach of current hosts
//cap row if the last row was not full
if(!($row_counter % 4 == 0))
{
echo "</div><!-- end/cap row-->\n";
}
?>
<?php
} else { ?>
<div class="col-xs-12 col-sm-4 host">
<p>No hosts found.</p>
</div>
<div class="clearfix visible-xs"> </div>
<?php
}
?>
<?php endwhile;
endif; //end main loop ?>
<!-- cast profile dropdown -->
<div class="container-fluid profile-details hidden">
<i class="fa fa-times closeBox" aria-hidden="true"></i>
<h3 class="member-name"><?php echo $user->data->display_name; ?></h3>
<p class=".text-white"><?php echo tv_host_shows($user->ID); ?></p>
<p class="member-description"><?php echo get_user_meta($user->ID, 'description', true); ?></p>
<div class="row">
<div class="col-xs-12">
<ul class="list-inline social">
<?php if(get_field('facebook_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Like <?php echo $user->data->display_name; ?> On Facebook" href="<?php the_field('facebook_profile_link', "user_".$user->ID); ?>"><i class="fa fa-facebook"></i></a></li>
<?php endif;
if(get_field('twitter_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Follow <?php echo $user->data->display_name; ?> On Twitter" href="<?php the_field('twitter_profile_link', "user_".$user->ID); ?>"><i class="fa fa-twitter"></i></a></li>
<?php endif;
if(get_field('youtube_channel_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Watch <?php echo $user->data->display_name; ?> On Youtube" href="<?php the_field('youtube_channel_link', "user_".$user->ID); ?>"><i class="fa fa-youtube"></i></a></li>
<?php endif;
if(get_field('website', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="See the website of <?php echo $user->data->display_name; ?>" href="<?php the_field('website', "user_".$user->ID); ?>"><i class="fa fa-globe"></i></a></li>
<?php endif; ?>
</ul>
</div>
</div><!-- end social link row -->
</div><!-- end dropdown -->
</div><!--end container-->
</section>
</main><!--end .main-bg -->
<script>
jQuery(document).ready(function() {
initHostsPage();
});
</script>
<?php
get_footer(); ?>
and the jquery function to show dropdown box:
function initHostsPage() {
$('.social').each(function(key, val){
$(this).children('li').children('a').tooltip();
});
//dropdown profile box
$('.card').click(function() {
var row = $(this).closest('.row');
var profileDetails = $('.profile-details');
profileDetails.removeClass('hidden');
row.append(profileDetails);
if((profileDetails).is(':hidden')) {
profileDetails.slideTogle('slow');
}
else{
profileDetails.hide();
}
});
$(".closeBox").click(function() {
$(this).parent().hide();
});
}
Ok apparently there were both php and javascript mistakes. In php you succesfully RETRIEVING all users, but only PRINTING the last one, you would need to cast the profile-details inside the loop, but you also need to differentiate each profile-detail so they dont all come out at the same time. And we need to differentiate cards. So to not broke any css I added profile-id class and data-id for the card
<section class="series">
<div class="container-fluid">
<?php //query for hosts/contributor users
$cq = new WP_User_Query(array('role'=>'contributor'));
// User Loop
if(!empty($cq->results))
{
//sort users into current and past by meta field//
$hosts = $cq->results;
$current_hosts = array();
foreach($hosts as $user)
{
$user->sort_num = get_field('order', "user_$user->ID");
if(tv_is_host_active($user->ID))
$current_hosts[] = $user;
else
$past_hosts[] = $user;
}
usort($current_hosts, 'tv_compare_hosts');
//display the current hosts
$row_counter = 0;
foreach ( $current_hosts as $user )
{
//add rows of four
if($row_counter++ % 4 == 0)
{
echo "<div class='row'\n>";
} ?>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a data-id="<?php echo $user->ID;?>" class="card card-cast" href="javascript:void(0)">
<div class="card-img-cast">
<?php if(get_field('profile_picture', "user_".$user->ID)): $image = get_field('profile_picture', "user_".$user->ID); ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php else: ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/thumbholder-medium.png" alt="winchester logo" />
<?php endif;?>
</div>
<div class="card-content">
<div class="card-title"><?php echo $user->data->display_name; ?></div>
</div>
</a>
</div>
<?php
//add rows of 4
if($row_counter % 4 == 0)
{
echo "</div><!-- end row-->\n";
}
} //end foreach of current hosts
//cap row if the last row was not full
if(!($row_counter % 4 == 0))
{
echo "</div><!-- end/cap row-->\n";
}
?>
<!-- cast profile dropdown -->
<div class="container-fluid profile-details profile-<?php echo $user->ID;?>hidden">
<i class="fa fa-times closeBox" aria-hidden="true"></i>
<h3 class="member-name"><?php echo $user->data->display_name; ?></h3>
<p class=".text-white"><?php echo tv_host_shows($user->ID); ?></p>
<p class="member-description"><?php echo get_user_meta($user->ID, 'description', true); ?></p>
<div class="row">
<div class="col-xs-12">
<ul class="list-inline social">
<?php if(get_field('facebook_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Like <?php echo $user->data->display_name; ?> On Facebook" href="<?php the_field('facebook_profile_link', "user_".$user->ID); ?>"><i class="fa fa-facebook"></i></a></li>
<?php endif;
if(get_field('twitter_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Follow <?php echo $user->data->display_name; ?> On Twitter" href="<?php the_field('twitter_profile_link', "user_".$user->ID); ?>"><i class="fa fa-twitter"></i></a></li>
<?php endif;
if(get_field('youtube_channel_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Watch <?php echo $user->data->display_name; ?> On Youtube" href="<?php the_field('youtube_channel_link', "user_".$user->ID); ?>"><i class="fa fa-youtube"></i></a></li>
<?php endif;
if(get_field('website', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="See the website of <?php echo $user->data->display_name; ?>" href="<?php the_field('website', "user_".$user->ID); ?>"><i class="fa fa-globe"></i></a></li>
<?php endif; ?>
</ul>
</div>
</div><!-- end social link row -->
</div><!-- end dropdown -->
</div><!--end container-->
<?php
} else { ?>
<div class="col-xs-12 col-sm-4 host">
<p>No hosts found.</p>
</div>
<div class="clearfix visible-xs"> </div>
<?php
}
?>
<?php endwhile;
endif; //end main loop ?>
</section>
</main><!--end .main-bg -->
<script>
jQuery(document).ready(function() {
initHostsPage();
});
</script>
<?php
get_footer(); ?>
Html set now lets see the javascript. It was selecting any card and retrieving the only profile. Now it will select any card, get its id and retrieve that id profile:
function initHostsPage() {
$('.social').each(function(key, val){
$(this).children('li').children('a').tooltip();
});
//dropdown profile box
$('.card').click(function() {
var row = $(this).closest('.row');
var id = $(this).data('id'); //We get the card
var profileDetails = $('.profile-' + id); //We get the exact profile
profileDetails.removeClass('hidden');
row.append(profileDetails);
if((profileDetails).is(':hidden')) {
profileDetails.slideTogle('slow');
}
else{
profileDetails.hide();
}
});
$(".closeBox").click(function() {
$(this).parent().hide();
});
}
Tell me how it goes!
HTML/PHP:
<section class="series">
<div class="container-fluid">
<?php //query for hosts/contributor users
$cq = new WP_User_Query(array('role'=>'contributor'));
// User Loop
if(!empty($cq->results))
{
//sort users into current and past by meta field//
$hosts = $cq->results;
$current_hosts = array();
foreach($hosts as $user)
{
$user->sort_num = get_field('order', "user_$user->ID");
if(tv_is_host_active($user->ID))
$current_hosts[] = $user;
else
$past_hosts[] = $user;
}
usort($current_hosts, 'tv_compare_hosts');
//display the current hosts
$row_counter = 0;
foreach ( $current_hosts as $user )
{
//add rows of four
if($row_counter++ % 4 == 0)
{
echo "<div class='row'\n>";
} ?>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a data-id="<?php echo $user->ID;?>" class="card-cast" href="javascript:void(0)">
<div class="card-img-cast">
<?php if(get_field('profile_picture', "user_".$user->ID)): $image = get_field('profile_picture', "user_".$user->ID); ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php else: ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/thumbholder-medium.png" alt="winchester logo" />
<?php endif;?>
</div>
<div class="card-content">
<div class="card-title"><?php echo $user->data->display_name; ?></div>
</div>
</a>
</div>
<!-- cast profile dropdown -->
<div class="profile-details profile-<?php echo $user->ID;?> hidden">
<i class="fa fa-times closeBox" aria-hidden="true"></i>
<h3 class="member-name"><?php echo $user->data->display_name; ?></h3>
<p class=".text-white"><?php echo tv_host_shows($user->ID); ?></p>
<p class="member-description"><?php echo get_user_meta($user->ID, 'description', true); ?></p>
<div class="row">
<div class="col-xs-12">
<ul class="list-inline social">
<?php if(get_field('facebook_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Like <?php echo $user->data->display_name; ?> On Facebook" href="<?php the_field('facebook_profile_link', "user_".$user->ID); ?>"><i class="fa fa-facebook"></i></a></li>
<?php endif;
if(get_field('twitter_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Follow <?php echo $user->data->display_name; ?> On Twitter" href="<?php the_field('twitter_profile_link', "user_".$user->ID); ?>"><i class="fa fa-twitter"></i></a></li>
<?php endif;
if(get_field('youtube_channel_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Watch <?php echo $user->data->display_name; ?> On Youtube" href="<?php the_field('youtube_channel_link', "user_".$user->ID); ?>"><i class="fa fa-youtube"></i></a></li>
<?php endif;
if(get_field('website', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="See the website of <?php echo $user->data->display_name; ?>" href="<?php the_field('website', "user_".$user->ID); ?>"><i class="fa fa-globe"></i></a></li>
<?php endif; ?>
</ul>
</div>
</div><!-- end social link row -->
</div><!-- end dropdown -->
<?php
//add rows of 4
if($row_counter % 4 == 0)
{
echo "</div><!-- end row-->\n";
}
} //end foreach of current hosts?>
</div><!-- end Container -->
<?php
} else { ?>
<div class="col-xs-12 col-sm-4 host">
<p>No hosts found.</p>
</div>
<div class="clearfix visible-xs"> </div>
<?php
}
?>
<?php endwhile;
endif; //end main loop ?>
</section>
</main><!--end .main-bg -->
<script>
jQuery(document).ready(function() {
initHostsPage();
});
</script>
<?php
get_footer(); ?>
and the Javascript:
function initHostsPage() {
$('.social').each(function(key, val){
$(this).children('li').children('a').tooltip();
});
//dropdown profile box
$('.card-cast').click(function() {
var row = $(this).closest('.row');
var id = $(this).data('id'); //get the card
var profileDetails = $('.profile-' + id); //get the exact profile
profileDetails.removeClass('hidden');
row.append(profileDetails);
if((profileDetails).is(':hidden')) {
profileDetails.slideToggle('slow');
}
else{
profileDetails.hide();
}
});
$(".closeBox").click(function() {
$(this).parent().hide();
});
}