Creating a popup - javascript

I am real noob and I want to learn but I got stuck on creating a pop up..
This is my code
<!DOCTYPE html>
<html lang="en">
<link rel="shortcut icon" href="https://sols-rpg.com/home/favicon.png" type="image/x-icon"/>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="height=device-height, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>LA-RP - Home</title>
<script type="text/javascript">
//<![CDATA[
try{if (!window.CloudFlare) {var CloudFlare=[{verbose:0,p:1482933530,byc:0,owlid:"cf",bag2:1,mirage2:0,oracle:0,paths:{cloudflare:"/cdn-cgi/nexp/dok3v=1613a3a185/"},atok:"76d6adaf2e1ad169990326f51d43e159",petok:"4520fa4333a7ead90224eaba558cbb032249d63d-1483805698-1800",zone:"sols-rpg.com",rocket:"0",apps:{"abetterbrowser":{"ie":"7","opera":null,"chrome":null,"safari":null,"firefox":null}}}];!function(a,b){a=document.createElement("script"),b=document.getElementsByTagName("script")[0],a.async=!0,a.src="//ajax.cloudflare.com/cdn-cgi/nexp/dok3v=f2befc48d1/cloudflare.min.js",b.parentNode.insertBefore(a,b)}()}}catch(e){};
//]]>
</script>
<link href="css/main.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top" role="navigation" style="border-bottom: #0d79c9 3px solid;">
<div class="container">
<div class="navbar-header">
<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>
<div class="navbar-logo"><img src="img/logov3.png"></div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" style="margin-top:6px;">
<li>
<span class="glyphicon glyphicon-home"></span> <b>Acasa</b>
</li>
<li>
<span class="glyphicon glyphicon-globe"></span> <b>Forum</b>
</li>
<li>
</li>
<li>
<span class="glyphicon glyphicon-shopping-cart"></span> <b>Magazin</b>
</li>
<li>
<span class="glyphicon glyphicon-info-sign"></span> <b>Anunturi</b>
</li>
</ul>
</div>
</div>
</nav>
<div class="banner">
<h1>Bine ai venit pe <font style="color:#0d79c9;">Los Angeles Roleplay</font>!</h1>
<h6><b>Serverul este bazat pe viata din Los Angeles.</b></a>.</h6>
<h6><b><font style="color:#0d79c9;"><span class="glyphicon glyphicon-star"></span></font> Mai multe informatii pe <font style="color:#0d79c9;">forum</font>! <font style="color:#0d79c9;"><span class="glyphicon glyphicon-star"></span></font></b></a></h6>
<div class="spacer1"> </div>
<div class="spacer1"> </div>
<button id="popup" onclick="div_show()"><span class="glyphicon glyphicon-pencil"></span> Inregistreaza-te </button> <button class="btn-transparent"><span class="glyphicon glyphicon-share-alt"></span> Logheaza-te</button><br>
<div class="spacer1"> </div>
<button class="btn-transparent" style="padding:5px 63px 5px 63px;"><span class="glyphicon glyphicon-play"></span> Conecteaza-te</button>
<div class="spacer1"> </div>
<button class="btn-transparent" style="padding:5px 63px 5px 63px;"><span class="glyphicon glyphicon-cloud-download"></span> Descarca SA-MP</button>
<div class="spacer1"> </div>
<button class="btn-transparent" style="padding:5px 63px 5px 63px;"><span class="glyphicon glyphicon-headphones"></span> Vorbeste pe TeamSpeak</button>
<div class="footer">
<a href="https://www.positivessl.com"><img src="img/comodo_secure_seal_113x59_transp.png" align="left"/>
<img src="img/ytbutton.png" align="right" hspace="5"/> <a href="https://www.facebook.com/roleplaylarp/"><img src="img/fbbutton.jpg" align="right"/>
<p>
Copyright © Los Angeles Roleplay 2017
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I want when pressing this button
<button id="popup" onclick="div_show()"><span class="glyphicon glyphicon-pencil"></span> Inregistreaza-te </button>
A pop up will appear with a nice animation on the user screen and the background would get a bit blurred, I'd like to put a form in that pop up but what I need is just the pop up please..
I've made a popup and a phpscript to send the inputs to my email but it is not working, I don't get any emails.
<?php
$your_email ='andreigames9#gmail.com';// <<=== update to your email address
session_start();
$errors = '';
$name = '';
$visitor_email = '';
$nastere = '';
$forumname = '';
$parola = '';
$poveste = '';
$mgpg = '';
if(isset($_POST['submit']))
{
$name = $_POST['field5'];
$visitor_email = $_POST['field4'];
$nastere = $_POST['field2'];
$forumname = $_POST['field1'];
$parola = $_POST['field3'];
$poveste = ['field6'];
$mgpg = ['field7'];
///------------Do Validations-------------
if(empty($name)||empty($visitor_email))
{
$errors .= "\n Name and Email are required fields. ";
}
if(IsInjected($visitor_email))
{
$errors .= "\n Bad email value!";
}
if(empty($_SESSION['6_letters_code'] ) ||
strcasecmp($_SESSION['6_letters_code'], $_POST['6_letters_code']) != 0)
{
//Note: the captcha code is compared case insensitively.
//if you want case sensitive match, update the check above to
// strcmp()
$errors .= "\n The captcha code does not match!";
}
if(empty($errors))
{
//send the email
$to = $your_email;
$subject="Creare caracter $name";
$from = $your_email;
$ip = isset($_SERVER['REMOTE_ADDR']) ? $_SERVER['REMOTE_ADDR'] : '';
$body = "A user $forumname submitted the contact form:\n".
"Nume Forum: $forumname\n".
"Email: $visitor_email \n".
"IP: $ip\n";
"Nume Caracter: $name\n ".
"Parola: #parola\n".
"Data Nasterii: $nastere\n".
"Poveste Caracter:\n $poveste \n".
"Definitii MG si PG:\n $mgpg ".
$headers = "From: $from \r\n";
$headers .= "Reply-To: $visitor_email \r\n";
mail($to, $subject, $body,$headers);
header('Location: thank-you.html');
}
}
// Function to validate against any email injection attempts
function IsInjected($str)
{
$injections = array('(\n+)',
'(\r+)',
'(\t+)',
'(%0A+)',
'(%0D+)',
'(%08+)',
'(%09+)'
);
$inject = join('|', $injections);
$inject = "/$inject/i";
if(preg_match($inject,$str))
{
return true;
}
else
{
return false;
}
}
?>
<!DOCTYPE html>
<html lang="en">
<link rel="shortcut icon" href="https://sols-rpg.com/home/favicon.png" type="image/x-icon"/>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="height=device-height, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>LA-RP - Home</title>
<script type="text/javascript">
//<![CDATA[
try{if (!window.CloudFlare) {var CloudFlare=[{verbose:0,p:1482933530,byc:0,owlid:"cf",bag2:1,mirage2:0,oracle:0,paths:{cloudflare:"/cdn-cgi/nexp/dok3v=1613a3a185/"},atok:"76d6adaf2e1ad169990326f51d43e159",petok:"4520fa4333a7ead90224eaba558cbb032249d63d-1483805698-1800",zone:"sols-rpg.com",rocket:"0",apps:{"abetterbrowser":{"ie":"7","opera":null,"chrome":null,"safari":null,"firefox":null}}}];!function(a,b){a=document.createElement("script"),b=document.getElementsByTagName("script")[0],a.async=!0,a.src="//ajax.cloudflare.com/cdn-cgi/nexp/dok3v=f2befc48d1/cloudflare.min.js",b.parentNode.insertBefore(a,b)}()}}catch(e){};
//]]>
</script>
<link href="css/main.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top" role="navigation" style="border-bottom: #0d79c9 3px solid;">
<div class="container">
<div class="navbar-header">
<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>
<div class="navbar-logo"><img src="img/logov3.png"></div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" style="margin-top:6px;">
<li>
<span class="glyphicon glyphicon-home"></span> <b>Acasa</b>
</li>
<li>
<span class="glyphicon glyphicon-globe"></span> <b>Forum</b>
</li>
<li>
</li>
<li>
<span class="glyphicon glyphicon-shopping-cart"></span> <b>Magazin</b>
</li>
<li>
<span class="glyphicon glyphicon-info-sign"></span> <b>Anunturi</b>
</li>
</ul>
</div>
</div>
</nav>
<div class="banner">
<h1>Bine ai venit pe <font style="color:#0d79c9;">Los Angeles Roleplay</font>!</h1>
<h6><b>Serverul este bazat pe viata din Los Angeles.</b></a>.</h6>
<h6><b><font style="color:#0d79c9;"><span class="glyphicon glyphicon-star"></span></font> Mai multe informatii pe <font style="color:#0d79c9;">forum</font>! <font style="color:#0d79c9;"><span class="glyphicon glyphicon-star"></span></font></b></a></h6>
<div class="spacer1"> </div>
<div class="spacer1"> </div>
<button id="show" onclick="div_show()" class="btn-transparent"><span class="glyphicon glyphicon-pencil"></span> Inregistreaza-te </button> <button class="btn-transparent"><span class="glyphicon glyphicon-share-alt"></span> Logheaza-te</button><br>
<div class="spacer1"> </div>
<button class="btn-transparent" style="padding:5px 63px 5px 63px;"><span class="glyphicon glyphicon-play"></span> Conecteaza-te</button>
<div class="spacer1"> </div>
<button class="btn-transparent" style="padding:5px 63px 5px 63px;"><span class="glyphicon glyphicon-cloud-download"></span> Descarca SA-MP</button>
<div class="spacer1"> </div>
<button class="btn-transparent" style="padding:5px 63px 5px 63px;"><span class="glyphicon glyphicon-headphones"></span> Vorbeste pe TeamSpeak</button>
<div class="footer">
<a href="https://www.positivessl.com"><img src="img/comodo_secure_seal_113x59_transp.png" align="left"/>
<img src="img/ytbutton.png" align="right" hspace="5"/> <a href="https://www.facebook.com/roleplaylarp/"><img src="img/fbbutton.jpg" align="right"/>
<dialog id="window">
<form class="form-style-9">
<ul>
<li>
<input type="text" name="field1" class="field-style field-split align-left" placeholder="Nume Forum" />
<input type="text" name="field2" class="field-style field-split align-right" placeholder="Data Nasterii" />
</li>
<li>
<input type="text" name="field3" class="field-style field-split align-left" placeholder="Parola" />
<input type="email" name="field4" class="field-style field-split align-right" placeholder="Email" />
</li>
<li>
<input type="text" name="field5" class="field-style field-full align-none" placeholder="Nume_Prenume" />
</li>
<li>
<textarea name="field6" class="field-style" placeholder="Poveste Caracter"></textarea>
</li>
<li>
<textarea name="field7" class="field-style" placeholder="Defineste ce inseamna Metagaming si Powergaming plus exemple"></textarea>
</li>
<li>
<input type="submit" name="submit" value="TRIMITE" />
</li>
</ul>
</form>
<button id="exit" class="btn-transparent">Close Dialog
</dialog>
</div>
<p class="copyright">Copyright © Los Angeles Roleplay 2017</p>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/my_js.js"></script>
<script src="scripts/gen_validatorv31.js"></script>
<script src="scripts/validationAndCaptcha.js"></script>
</body>
</html>


Below is the bootstrap modal with simple button click pop-up:
Refer link for more information.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>


First off, make sure you keep these two references to script codes on the head of the document, it is bad practice.
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
You can look at examples online to make your very own prototype. Make sure to take a look at this site if you want to know all about HTML globals (or at the very least references for what you are making).
This is how I would style my document header:
<head>
<title> // 1x Title Tag
<meta> // Subsequently, meta tags
// which honestly I have not much experience using and I
// assume are for dynamic styling on mobile devices, and SEO
<link href> // link tags to css
// and finally
<script src="js/jquery.js"></script> // script tags
<script src="js/bootstrap.min.js"></script> // and script code
<script type="text/javascript">
//<![CDATA[
try{if (!window.CloudFlare) {var CloudFlare=[{verbose:0,p:1482933530,byc:0,owlid:"cf",bag2:1,mirage2:0,oracle:0,paths:{cloudflare:"/cdn-cgi/nexp/dok3v=1613a3a185/"},atok:"76d6adaf2e1ad169990326f51d43e159",petok:"4520fa4333a7ead90224eaba558cbb032249d63d-1483805698-1800",zone:"sols-rpg.com",rocket:"0",apps:{"abetterbrowser":{"ie":"7","opera":null,"chrome":null,"safari":null,"firefox":null}}}];!function(a,b){a=document.createElement("script"),b=document.getElementsByTagName("script")[0],a.async=!0,a.src="//ajax.cloudflare.com/cdn-cgi/nexp/dok3v=f2befc48d1/cloudflare.min.js",b.parentNode.insertBefore(a,b)}()}}catch(e){};
//]]>
</script>
</head>
Since I consider myself to be somewhat resourceful, I was going to suggest doing it pure javascript+css, with no extra libraries, unless you wish to write one yourself in the future. You can do it in jQuery, like somebody else suggested.
Even though I don't usually recommend w3schools, here is another way to do it: http://www.w3schools.com/howto/howto_css_modals.asp
Maybe you'd like to learn how they do it and will end up outsmarting them. If you are still curious, add a comment on my post so I can know to link you to a CSS tutorial or HTML follow through.

Related

Unable to properly add TR to HTML from JS script

I keep getting an indexing error while trying to add TR tags to my HTML using the innerHTML attribute. This is what the JS script looks like.
var myTbody = document.querySelector(".table");
var button = document.querySelector(".add-stock");
var input = document.querySelector(".stock-input");
button.addEventListener("click", function () {
var td = document.querySelectorAll("td");
var row = myTbody.insertRow(td.length + 1);
var cell_univeral = row.insertCell(td.length - 1);
cell_univeral.innerHTML = input.value;
});
And this is the related html document:
<!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.0" />
<title>Technical</title>
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"
></script>
<link
rel="stylesheet"
href="{{url_for('static', filename='css/technical.css')}}"
/>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">Home</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" href="#">Technical</a>
<a class="nav-link" href="#">Alpha-Beta</a>
<a class="nav-link" href="#">Partition</a>
<a class="nav-link disabled">More</a>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="content">
<div class="top-form">
<form action='#' method="post">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label"
>Ticker Symbols</label
>
<input
type="text"
class="form-control stock-input"
id="exampleInputEmail1"
aria-describedby="emailHelp"
name="nm"
/>
<div id="symbol" class="form-text">Add stocks one at a time</div>
</div>
<div class="buttons">
<div class="add-button">
<button type="button" class="btn btn-success add-stock">Add</button>
</div>
<div class="submit-button">
<button type="submit" class="btn btn-primary submit-btn">
Submit
</button>
<div class="spinner-border my-spinner hidden" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
</form>
</div>
<div class="bottom-from">
<table class="table table-hover">
<thead>
<th>Symbol <span class="counter"></span></th>
</thead>
<tbody class="table-body">
</tbody>
</table>
<div class="alert alert-warning" role="alert">
It may take longer for multiple stocks
</div>
</div>
</div>
</div>
<script src="{{url_for('static', filename='script/technical.js')}}"
/></script>
</body>
</html>
Note that for the first two click events i have no problems whatsoever though i get this error when i click again
Uncaught DOMException: Index or size is negative or greater than the allowed amount
It seems like I'm trying to change the innerHTML of an item that is out of range but i honestly don't know what the actual problem is and how to fix it. Thank you for your help

Error in setting user roles in php using access column in mysql

I have a login/register website. both admin and users are in the same table in mysql.
My users table is below:
There is certain pages where only admins can visit. I have made an access column and put the values like in the image. I have the following php code for checking whether its admin or not
<?
include("config.php");
session_start();
$user_email=$_SESSION['email'];
$check_user="select * from users WHERE user_email='$user_email'";
$run=mysqli_query($dbcon,$check_user);
while($row = $run->fetch_assoc())
{
$user_name=$row['user_name'];
}?>
<div class="sing"><?php
if ($_SESSION['access'] != 'admin') {
header("Location: login.php");
}
else if (isset($_SESSION['email']) && $_SESSION['email'] == true) {
echo " &nbsp You logged in as " . $_SESSION['email'] ;
echo "<div style='float: right;'><a href='logout.php'>logout</a>&nbsp</div>";
}
else{}
?>
<!DOCTYPE html>
<html>
<head>
<title>Nurses Pulse </title>
<!--/tags -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/x-javascript">
addEventListener("load", function () {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);
}
</script>
<!--//tags -->
<link rel="icon" type="image/png" href="images/imageedit_2_5125240109.gif"/>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/appointment_style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/font-awesome.css" rel="stylesheet">
<!-- //for bootstrap working -->
<link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,600,600i,700" rel="stylesheet">
</head>
<body>
<!-- header -->
<div class="header" id="home">
<div class="content white">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<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>
<a class="navbar-brand" href="index.php">
<h1 style="color:#e50000"><span class="fa fa-heartbeat" aria-hidden="true"></span>Nurses Pulse </h1>
</a>
</div>
<!--/.navbar-header-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<nav>
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
Exams <b class="caret"></b>
<ul class="dropdown-menu">
<li>PROMETRIC</li>
<li class="divider"></li>
<li>HAAD</li>
<li class="divider"></li>
<li>MOH</li>
<li class="divider"></li>
</ul>
</li>
<li>About Us</li>
</ul>
</nav>
</div>
<!--/.navbar-collapse-->
<!--/.navbar-->
</div>
</nav>
</div>
</div>
<!-- banner -->
<!--//banner -->
<!-- about -->
<!-- emergency -->
<!-- //emergency -->
<!-- services -->
<div class="services">
<div class="container">
<h3 class="heading-agileinfo" style="color:#e50000"><span>Sorry! You Have Timed Out!</span></h3>
<div class="services-top-grids">
<div> </div><br>
<br>
<?php
$session_value=(isset($_SESSION['correct_score']))?$_SESSION['correct_score']:'';
$session_value2=(isset($_SESSION['not_correct_score']))?$_SESSION['not_correct_score']:'';
echo "<div class='div-left'> Number Of Correct Answers = " . $session_value . "</div>";
echo "<div class='div-left'> <br>Number Of Wrong Answers = " . $session_value2 . "</div>";
?>
</div>
<div class="services-bottom-grids">
<div class="clearfix"></div>
</div>
</div>
</div>
<!-- //services -->
<!-- Clients -->
<!-- //Clients -->
<!--/icons-->
<!--//icons-->
<!-- footer -->
<div class="footer_top_agile_w3ls">
<div class="container">
<div class="col-md-3 footer_grid">
<h3>About Us</h3>
<p>NursesPulse is for those who are preparing for the staff nurse entrance exam for abroad.
</p>
</div>
<div class="col-md-3 footer_grid">
<h3>Other Services</h3>
<ul class="footer_grid_list">
<li><i class="fa fa-angle-right" aria-hidden="true"></i>
<a href="exambooking.php" >Book Exam </a>
</li>
<li><i class="fa fa-angle-right" aria-hidden="true"></i>
Course Materials
</li>
<li><i class="fa fa-angle-right" aria-hidden="true"></i>
<a href="membership.php" >Membership </a>
</li>
<!-- <li><i class="fa fa-angle-right" aria-hidden="true"></i>
Nurses Pulse Demo.
</li>
<li><i class="fa fa-angle-right" aria-hidden="true"></i>
Nurses Pulse Demo.
</li> -->
</ul>
</div>
<div class="col-md-3 footer_grid">
<h3>Contact Info</h3>
<ul class="address">
<li><i class="fa fa-map-marker" aria-hidden="true"></i>Team Pulse, Kannur <span>Kerala.</span></li>
<li><i class="fa fa-envelope" aria-hidden="true"></i>nursespulse#gmail.com</li>
<li><i class="fa fa-phone" aria-hidden="true"></i>+91 95444 12311</li>
</ul>
</div>
<div class="col-md-3 footer_grid ">
<h3>Sign up for our Newsletter</h3>
<p>Get Started For Free</p>
<div class="footer_grid_right">
<form action="#" method="post">
<input type="email" name="Email" placeholder="Email Address..." required="">
<input type="submit" value="Submit">
</form>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="footer_wthree_agile">
<p>© 2018 Nurses Pulse. All rights reserved | Design by Bluroe Labs</p>
</div>
<!-- //footer -->
<!-- bootstrap-modal-pop-up -->
<div class="modal video-modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
Nurses Pulse
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<img src="images/g7.jpg" alt=" " class="img-responsive" />
<p></i></p>
</div>
</div>
</div>
</div>
<!-- //bootstrap-modal-pop-up -->
<!-- js -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script>
$('ul.dropdown-menu li').hover(function () {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function () {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
</script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</body>
</html>
The code is not working, it's redirecting me to login page even if its admin who logs in.
Can anyone help me?
Thanks in advance.

try this one
while($row = $run->fetch_assoc())
{
$user_name=$row['user_name'];
$_SESSION['access'] = $row['access']; //define here
}?>
<div class="sing"><?php
if ($_SESSION['access'] != 'admin') {
header("Location: login.php");
}

How to trigger function on data-toggle with Bootstrap Twitter?

Hello everyone I have list of items in one of the screens. Once user clicks on the item I want to hide that item show the other div container and trigger the function. Here is working example of what I have so far:
function appToggle() {
var codeVal = $(this).data(code);
console.log(codeVal);
}
<html lang="en">
<head>
<title>My Application</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="Bootstrap/Bootstrap_Confirmation/bootstrap-confirmation.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="main-container" class="container">
<div id="master_list" class="collapse in">
<fieldset>
<legend>Application</legend>
<div class="list-group">
<a href="#" class="list-group-item" data-toggle="collapse" data-target="#master_list,#master_table">
<span data-code="APP_USERS" class="glyphicon glyphicon-list"></span> Application Users
</a>
<a href="#" class="list-group-item" data-toggle="collapse" data-target="#master_list,#master_table">
<span data-code="APP_POS" class="glyphicon glyphicon-list"></span> Application Positions
</a>
</div>
</fieldset>
</div>
<div id="master_table" class="collapse">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#master_table,#master_list">
<span class="glyphicon glyphicon-plus-sign"></span> Go Back
</button>
</div>
</div>
Test Show/Hide container
</div>
</div>
</body>
</html>
As you can see in example above if user clicks on any item in the list new container will show and list will go off the screen. I would like once they click to trigger appToggle() function that will get code value for the current element. Is there a way to trigger this function automatically without setting function as inline element? If anyone know the way to achieve this please let me know.

Did you try doing that function as an onclick listener? e.g.
$('a.list-group-item').click(function() {
var codeVal = $(this).children('span').data('code');
console.log(codeVal);
});
<html lang="en">
<head>
<title>My Application</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="Bootstrap/Bootstrap_Confirmation/bootstrap-confirmation.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="main-container" class="container">
<div id="master_list" class="collapse in">
<fieldset>
<legend>Application</legend>
<div class="list-group">
<a href="#" class="list-group-item" data-toggle="collapse" data-target="#master_list,#master_table">
<span data-code="APP_USERS" class="glyphicon glyphicon-list"></span> Application Users
</a>
<a href="#" class="list-group-item" data-toggle="collapse" data-target="#master_list,#master_table">
<span data-code="APP_POS" class="glyphicon glyphicon-list"></span> Application Positions
</a>
</div>
</fieldset>
</div>
<div id="master_table" class="collapse">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#master_table,#master_list">
<span class="glyphicon glyphicon-plus-sign"></span> Go Back
</button>
</div>
</div>
Test Show/Hide container
</div>
</div>
</body>
</html>

Laravel,PHP - Error when returning my blade view

My master blade view wont display the search results from autocomplete form.Its just refreshing the page and stays the same .I used TypeAhead plugin in my master .My search form is in my master .Any ideas what can be the issue?
My routes:
Route::get('search',array('as'=>'search','uses'=>'AutoCompleteController#search'));
Route::get('autocomplete',array('as'=>'autocomplete','uses'=>'AutoCompleteController#autocomplete'));
My Controller:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Product;
class AutoCompleteController extends MainController {
public function search()
{
return view('master');
}
public function autocomplete(Request $request)
{
if( !empty(request('query'))){
$data = Product::select("title")
->where("title","LIKE","%{$request->input('query')}%")
->get();
dd('justrandom');
$dataJson =$data->toJson();
return view('master', compact('dataJson'));
}else{
return view ('master', ['dataJson' => false]);
}
}
}
My master blade:
<head>
<meta charset="UTF-8">
<title>#if (!empty($title) )
{{ $title }}
#else
MySite
#endif</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link href="{{ asset('css/style.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{ asset('carousel.css') }}" rel="stylesheet"/>
<script>var BASE_URL = "{{ url('')}}/";</script>
</head>
<header>
<!-- NAVBAR
================================================== -->
<body>
<div class="navbar-wrapper">
<div class="container-fluid">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{{ url('/')}}">MySite</a>
</div>
<div id="navbar" class="navbar-collapse collapse" >
<ul class="nav navbar-nav">
#if( !empty($menu))
#foreach($menu as $item)
<li>{{ $item['link'] }}</li>
#endforeach
#endif
<li>Shop</li>
<li>
<a href="{{ url('shop/checkout')}}">
<img width="20" src="{{ asset('images/shopping-cart.png')}}">
<div id="total-cart">
#if(! Cart::isEmpty())
{{Cart::getTotalQuantity()}}
#endif
</div>
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
#if(Session::has('user_id'))
<li>{{ Session::get('user_name') }}</li>
#if( Session::has('is_admin'))
<li>CMS DASHBOARD</li>
#endif
<li>Logout</li>
#else
<li>Sign In</li>
<li>Sign Up</li>
#endif
</ul>
<div class="row">
<div class="container">
<form method="GET" action="" class="navbar-form navbar-right">
<div class="input-group">
<input type="text" name="find" class="typeahead form-control" aria-label="Search here..." placeholder="Search here..." autocomplete="off" value="">
<div class="input-group-btn">
<button type="submit" class="btn btn-default" style="height: 34px; width: 40px" ><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
</nav>
</div>
</div>
</header> <br><br><br><br>
#if(!empty($dataJson))
#foreach(json_decode($dataJson, true) as $value)
{{ $value['record1']['record 2'] }}
#endforeach
#endif
<div class="container" >#yield('carousel')</div> <br><br>
<main>
<div class="container">
#include ('inc.sm')
#include ('inc.errors')
#yield('content')
</div>
</main>
<br><br><br>
<footer>
<div class="container">
<hr>
<div class="row">
<div class="col-md-12" >
<p class="text-center" style="font-size: 18px;" >MySite © {{ date('Y') }} </p>
</div>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
<script src="{{ asset('js/script.js') }}" type="text/javascript"></script>
<script type="text/javascript">
var path = "{{ route('autocomplete') }}";
$('input.typeahead').typeahead({
source: function (query, process) {
return $.get(path, { query: query }, function (data) {
return process(data);
});
}
});
</script>
My master blade view wont display the search results from autocomplete form.Its just refreshing the page and stays the same .I used TypeAhead plugin in my master .My search form is in my master .Any ideas what can be the issue?

You seem to have a syntax error, here:
#if(!empty($dataJson))
#foreach(json_decode($dataJson, true) as $value)
{{ $value['record1']['record 2'] }}
#endforeach
$endif
That $endif should surely be #endif ..?

Navigation toggle button in bootstrap 3 not dropping down (Javascript issue?)

Upon making the screen a smaller size, my navigation toggle button is not showing the navigation menu when I click on it. I have racked my brains to solve this and think JavaScript is not active. Despite this, I still cant make it work properly.
JQuery is working and has been placed before JavaScript.
I've tried the web link to JS but this does not seem to work.
I've tried moving the JS files in my folder about and this again doesn't seem to work.
Code is below,
<!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>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.navbar-brand {font-size:180%;}
.myImage {width:100%;
height:600px;
background-size:cover;}
.background {background-color:black;}
</style>
</head>
<body>
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<div class="navbar-brand"></div>
<!--Nav toggle button on mobile-->
<button class="navbar-toggle"
data-toggle="collapse"
datatarget=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home
<li class="">About
<li class="">Download
</ul>
<!--log in section-->
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="email"
placeholder="Email"
class="form-control">
</div>
<div class="form-group">
<input type="password"
placeholder="Password"
class="form-control">
</div>
<button type="button" class="btn btn-success">Log In</button>
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Thanks for your help.

You've made a typo on data-target:
<button class="navbar-toggle"
data-toggle="collapse"
datatarget=".navbar-collapse">
Instead it should be:
<button class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-collapse">

Categories