Porto Template:Google map doesn't show up - javascript

i'm devolopping a website with JSF, and i'm struglling to implment the new PORTO TEMPLATE, now i'm at contact us page, it has a map in it which don't show up when i execute and i don't knwo why, and i'm a little weak in JS.
so please help me out !!
.xhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="vendor/jquery.gmap.js"></script>
<script>
/*
Map Settings
Find the Latitude and Longitude of your address:
- http://universimmedia.pagesperso-orange.fr/geo/loc.htm
- http://www.findlatitudeandlongitude.com/find-address-from-latitude-and-longitude/
*/
// Map Markers
var mapMarkers = [ {
address : "New York, NY 10017",
html : "<strong>New York Office</strong><br/>New York, NY 10017",
icon : {
image : "img/pin.png",
iconsize : [ 26, 46 ],
iconanchor : [ 12, 46 ]
},
popup : true
} ];
// Map Initial Location
var initLatitude = 40.75198;
var initLongitude = -73.96978;
// Map Extended Settings
var mapSettings = {
controls : {
panControl : true,
zoomControl : true,
mapTypeControl : true,
scaleControl : true,
streetViewControl : true,
overviewMapControl : true
},
scrollwheel : false,
markers : mapMarkers,
latitude : initLatitude,
longitude : initLongitude,
zoom : 16
};
var map = $("#googlemaps").gMap(mapSettings);
// Map Center At
var mapCenterAt = function(options, e) {
e.preventDefault();
$("#googlemaps").gMap("centerAt", options);
}
</script>
</h:head>
<h:body>
<ui:composition template="/WEB-INF/Publique/template.xhtml">
<ui:define name="title">Corporate Software : Nous Contactez </ui:define>
<ui:define name="content">
<div role="main" class="main">
<section class="page-top">
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="breadcrumb">
<li>Acceuil</li>
<li class="active">Nous Contactez</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>Nous Contactez</h2>
</div>
</div>
</div>
</section>
<!-- Google Maps -->
<div id="googlemaps" class="google-map hidden-xs"></div>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="alert alert-success hidden" id="contactSuccess">
<strong>Succés!</strong> Nous avons reçus votre message.
</div>
<div class="alert alert-danger hidden" id="contactError">
<strong>Erreure!</strong> Une Erreure c'est produite lors du
l'envois de votre message.
</div>
<h2 class="short">
Nous <strong>Contactez</strong>
</h2>
<h:form id="form1">
<div class="row">
<div class="form-group">
<div class="col-md-6">
<label>Nom Complet *</label>
<h:inputText type="text"
value="#{messageMBean.message.nomComplet}"
data-msg-required="Entrer votre nom s'il vous plait."
maxlength="100" class="form-control" name="name" id="name" />
</div>
<div class="col-md-6">
<label>Votre email *</label>
<h:inputText type="email"
value="#{messageMBean.message.email}"
data-msg-required="Entrer votre email s'il vous plait."
data-msg-email="Entrer un email valide s'il vous plait."
maxlength="100" class="form-control" name="email" id="email" />
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<label>Sujet *</label>
<h:inputText type="text"
value="#{messageMBean.message.objet}"
data-msg-required="Please enter the subject."
maxlength="100" class="form-control" name="subject"
id="subject" />
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<label>Message *</label>
<h:inputTextarea maxlength="5000"
value="#{messageMBean.message.textMessage}"
data-msg-required="Entrer votre message s'il vous plait."
rows="10" class="form-control" name="message" id="message" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h:commandButton value="Envoyer"
actionListener="#{messageMBean.save}"
class="btn btn-primary btn-lg">
<p:ajax update="form1" />
</h:commandButton>
</div>
</div>
</h:form>
</div>
<div class="col-md-6">
<h4 class="push-top">
Get in <strong>touch</strong>
</h4>
<p>
Si vous êtes interéssés par nos services, ou bien vous voulez
faire partie de notre equipe, ou vous avez n'import quelle
Question!! <strong>N'hesitez pas !</strong>
</p>
<hr />
<h4>
Notre <strong>Agence</strong>
</h4>
<ul class="list-unstyled">
<li><i class="icon icon-map-marker"></i> <strong>Addresse:</strong>
6 bis, rue Najib Mahfoud, Casablanca</li>
<li><i class="icon icon-phone"></i> <strong>TéléPhone:</strong>
0212 522 266 545/90</li>
<li><i class="icon icon-envelope"></i> <strong>Email:</strong>
Corporate#corporate.ma</li>
</ul>
<hr />
<h4>
<strong>Heurs</strong> de Travail
</h4>
<ul class="list-unstyled">
<li><i class="icon icon-time"></i> Lundi - Vendredi 9am to
5pm</li>
<li><i class="icon icon-time"></i> Samedi - 9am to 2pm</li>
<li><i class="icon icon-time"></i> Dimanche - Fermé</li>
</ul>
</div>
</div>
</div>
</div>
<section class="call-to-action featured footer">
<div class="container">
<div class="row">
<div class="center">
<h3>
Corporate Software, c'est <strong>tous</strong> ce dont vous avez
<strong>besoin</strong>! <a
href="http://themeforest.net/item/porto-responsive-html5-template/4106987"
target="_blank" class="btn btn-lg btn-primary"
data-appear-animation="bounceIn">Contactez Nous!</a> <span
class="arrow hlb" data-appear-animation="rotateInUpLeft"
style="top: -22px;"></span>
</h3>
</div>
</div>
</div>
</section>
</ui:define>
</ui:composition>
-----------EDITED-----------
I think i understand what happened but don't know how to undo it !!!
when xhtml is parsed to html any thing between <script> tags becomes in between comments <!-- --> i looked it up, it seems some kind of hacking countermeasure!!!, but i don't know how to disable it.
any ideas !!.
think you.

I found the solution it's very easy,and i taught that ishould share it in case anyone needs it.
You create new javascript file in your project and copy the JS code in it instand of writing in the xhtml file.
Then include it in the xhtml with <script src="file.js"></script> in the head section and voila !!!
it's working!!!!

Related

Local Storage and Form in Jquery

I have a div (form) that appears when you click a button,
I need to be able with jquery stored the information of the form.
For technical reasons, I can not use PHP so I turned to localStorage which seems simple, but does not work very well with my code:
$(document).ready(function(){
var i = 5;
$('.addbox').click(function(){
$('.formdiv').removeClass('formdiv');
$('#formulaire').addClass('formdivdisplay');
});
$('#submit').click(function(){
var titre = $('#titleform').val();
var chemin = $('#chemin').val();
var name = $('#name').val();
var statue = $('#statue').val();
var side = $('#select').val();
localStorage.setItem('titre', titre);
localStorage.setItem('chemin', chemin);
localStorage.setItem('name', name);
localStorage.setItem('statue', statue);
localStorage.setItem('side', side);
i = i + 1;
});
function drawBox(){
var block = '<div class="boxindex'+ i +'"><h1 class="boxtitle animated fadeInUp delay-500ms">'+ localStorage.getItem('titre') +'</h1></div>';
localStorage.setItem('block', block);
$('.container').append(localStorage.getItem('block'));
}
});
HTML code:
<!DOCTYPE html>
<html lang="fr">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>Bienvenue sur SAKADO</title>
<!-- Styles -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="scripts/app.js"></script>
<link rel="stylesheet" href="styles/index.css">
<link rel="stylesheet" href="styles/nouvelleoutils.css">
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,700|Space+Mono&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<script defer src="https://friconix.com/cdn/friconix.js"></script>
</head>
<body>
<!--design-->
<div id="left"></div>
<div id="right"></div>
<div id="top">
<h1 class="h1 animated fadeInRight">SAKADO</h1>
<div class="divheader">
<a class="a1 active" href="home.html">Accueil</a>
<a class="a2" href="demande.html">Demandes</a>
<a class="a3" href="utilisation.html">Utilisation</a>
</div>
</div>
<div id="bottom">
<div class="addbox"><i class="fi-xwsuxl-plus-solid"></i></div>
</div>
<!--design-->
<div id="page">
<p class="tlegend">Les textes en <span class="Svert">Vert</span> sont les chemins d'accès, en <span class="Sorange">Orange</span> des informations importantes.</p>
<!--Box glossaire-->
<div class="container">
<div class="box">
<h1 class="boxtitle animated fadeInUp delay-500ms">Glossaire du CSG</h1>
<p class="Sbleu statue">Public</p>
<p class="Svert links "><a class="Svert">V:\Operations\GLOSSAIRE ver07-00 du 071212.pdf</a></p>
<a class="boxbtn" href="docs/GLOSSAIRE ver07-00 du 071212.pdf" target="_blank">Obtenir</a>
</div>
<!--Box Site Survey DDO-->
<div class="boxindex2">
<h1 class="boxtitle animated fadeInUp delay-500ms">Site Survey DDO</h1>
<p class="Srouge statue">Privée</p>
<p class="Svert links "><a class="Svert">G:\Prive\SDO-OP\08-Modèles\_Site Survey\site survey DDO presentation générale.pptx</a></p>
<a class="boxbtn" href="docs/site survey DDO presentation générale.pptx" target="_blank">Obtenir</a>
</div>
<!--OLC modele Galileo-->
<div class="boxindex3">
<h1 class="boxtitle animated fadeInUp delay-500ms">Modèle OLC Galileo</h1>
<p class="Srouge statue ">Privée</p>
<p class="Svert links "><a class="Svert">G:\Prive\SDO-OP\08-Modèles\_OLC modèle\OLC - VA244 GALILEO FOC-M8 1-3.docx</a></p>
<a class="boxbtn" href="docs/OLC - VA244 GALILEO FOC-M8 1-3.docx" target="_blank">Obtenir</a>
</div>
<!--Modele DM Galileo-->
<div class="boxindex4">
<h1 class="boxtitle animated fadeInUp delay-500ms">Modèle DM Galileo</h1>
<p class="Srouge statue ">Privée</p>
<p class="Svert links "><a class="Svert">G:\Prive\SDO-OP\08-Modèles\_DM et SC activities 2018\VA244_GALILEO FOC Daily-meeting OPS_OHB_2018-06-21.docx</a></p>
<a class="boxbtn" href="docs/VA244_GALILEO FOC Daily-meeting OPS_OHB_2018-06-21.docx" target="_blank">Obtenir</a>
</div>
<!--Modele M8 Galileo-->
<div class="boxindex5">
<h1 class="boxtitle animated fadeInUp delay-500ms">Modèle M8 Galileo</h1>
<p class="Srouge statue ">Privée</p>
<p class="Svert links "><a class="Svert">G:\Prive\SDO-OP\08-Modèles\_DM et SC activities 2018\VA244-GALILEO FOC M8 -- DM One.docx</a></p>
<a class="boxbtn" href="docs/VA244-GALILEO FOC M8 -- DM One.docx" target="_blank">Obtenir</a>
</div>
<!--Box "A INSERER"
<div class="boxindex6">
<h1 class="boxtitle animated fadeInUp delay-500ms">"À INSÉRER"</h1>
<p class="statue ">Privée / Public</p>
<p class="Svert links "><a class="Svert">\\</a></p>
<p class="Sorange impt "></p>
<a class="boxbtn" href="docs/" target="_blank">Obtenir</a>
</div>-->
</div>
</div>
<!--Formulaire-->
<div class="formdiv" id="formulaire">
<form>
<h1 id="h1form">Ajouts d'Outils</h1>
<label for="title">Titre de l'outil</label>:<input type="text" id="titleform" name="title"><br /><br />
<label for="title">Entrez le chemin du nouvelle Outil</label>:<input type="text" id="chemin" name="chemin"><br /><br />
<label for="title">Entrez le nom.lextension du fichier</label>:<input type="text" id="name" name="name"><br /><br />
<label for="title">Entrez le Statue de votre Outil</label>:<input type="text" id="statue" name="statue"><br /><br />
<label for="title">Affichage de l'Outil</label>:<select id="select" name="side" form="side">
<option value="droite">Droite</option>
<option value="gauche">Gauche</option>
</select><br /><br />
<input id="submit" type="submit" value="envoyer">
</form>
</div>
</body>
</html>
I wish that when the user clicks on validate local storage stock all this information and then bring up code html and css (later) with the data he just entered and that the html code obviously remains on the page indefinitely .
Thank you.

How do have my page fill the username and password on an external site?

I am trying to make an HTML page, that when users access, it will take them to a 3rd party external site (I have no control over), and fill in the username and password fields, and log them in.
This is the source of the external site, which I got from my browser.
<!DOCTYPE html>
<html><head>
<title>Omitted | Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
var areActiveModsSelected = false;
var areInactiveModsSelected = false;
function SetActiveSelection()
{
var checkboxes = document.ActiveMods.getElementsByClassName("ModSelection");
areActiveModsSelected = !areActiveModsSelected;
SetSelection(checkboxes, areActiveModsSelected);
}
function SetInactiveSelection()
{
var checkboxes = document.InactiveMods.getElementsByClassName("ModSelection");
areInactiveModsSelected = !areInactiveModsSelected;
SetSelection(checkboxes, areInactiveModsSelected);
}
function SetSelection(checkboxes, isSelected)
{
for(var i=0, n=checkboxes.length;i<n;i++)
{
checkboxes[i].checked = isSelected;
}
}
function checkSavegame()
{
var e = document.getElementById("savegame");
if (e != null) {
var savegame = e.options[e.selectedIndex].text;
var isEmpty = isEmptySavegame(savegame);
document.getElementById("mapSelector").disabled = !isEmpty;
document.getElementById("difficultySelector").disabled = !isEmpty;
}
}
function isEmptySavegame(value)
{
var ret = value.match(/SAVEGAME \d\d* - Empty/g) || value.match(/SPIELSTAND \d\d* - Leer/g) || value.match(/SAUVEGARDE \d\d* - Vide/g);
return ret != null;
}
window.onload = function()
{
checkSavegame();
}
</script>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/monitor.css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<script type="text/javascript" src="js/all.js"></script>
</head>
<body>
<div class="white-bg clearfix">
<header class="main-header" role="banner" data-module="sticky">
<div class="header-bar clearfix"> <div class = "row column"> <div class = "top-bar-right"> <ul class = "menu float-left"><li><a target="_newTwitter" href="https://twitter.com/url"><span class="icon icon-twitter"></span></a></li><li><a target="_newFacebook" href="https://www.facebook.com/giants.farming.simulator"><span class="icon icon-facebook"></span></a></li><li><a target="_newYoutube" href="http://www.youtube.com/user/giantssoftware"><span class="icon icon-youtube"></span></a></li><li><a target="_newGoogleolus" href="https://plus.google.com/109211762279175256996"><span class="icon icon-google"></span></a></li> </ul>
<ul class="dropdown menu float-right"><li class="is-dropdown-submenu-parent is-down-arrow menu-flags"><img src="img/icons/flag-en.png" alt="lang"><ul class="menu submenu is-dropdown-submenu first-sub vertical"><li><img style="border:1px solid #000;" src="img/icons/flag-en.png" alt="English"><span class="country">English</span> <span>(en)</span></li><li><img style="border:1px solid #000;" src="img/icons/flag-de.png" alt="Deutsch"><span class="country">Deutsch</span> <span>(de)</span></li><li><img style="border:1px solid #000;" src="img/icons/flag-fr.png" alt="Francais"><span class="country">Francais</span> <span>(fr)</span></li></ul></li></ul> </div>
</div>
</div>
<div class="top-bar"> <div class="row column"> <div class="top-bar-left"> <img src="img/logo.png"> </div> <div class="top-bar-right"> <ul class="menu float-left"> <li><span>HOME</span></li>
<li><span>SAVEGAMES</span></li>
<li><span>MODS</span></li>
<li><span>JOURNAL</span></li>
<li><div class="status-indicator online"><span>ONLINE</span></div></li></ul></div></div></div></header><section class="content-wrap"><div class="row"> <div class="medium-8 columns">
<img src="template/gsfs.png"><br/><br/><h2>Login to server</h2>
<p>Please enter your login credentials</p>
<div class="row column">
<form name="input" action="index.html?lang=en" method="POST"><div class="table2"><div class="row column table-even"><div class="medium-3 columns column-label">Username</div><div class="medium-9 columns"><input type="text" name="username" value=""></div></div><div class="row column table-odd"><div class="medium-3 columns column-label">Password</div><div class="medium-9 columns"><input type="password" name="password" value=""></div></div><div class="row column table-even text-right">
<input class="button button-form-submit" name="login" type="submit" value="Login"></div></div></form><br />
<h2>Dedicated Server Mobile App (Free)</h2><div><a class="itunesbadge" href="https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1135922781&mt=8" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/images/badges/en-us/badge_appstore-lrg.svg) no-repeat;width:135px;height:40px;background-position: center;"></a><a class="googleplaybadge" href="https://play.google.com/store/apps/details?id=com.giantssoftware.fs17_dedi_app" style="margin-left: 5px; display:inline-block;overflow:hidden;background:url(https://play.google.com/intl/en_us/badges/images/apps/en-play-badge-border.png) no-repeat;width:141px;height:40px;background-size: cover;background-position-x: -4px;background-position-y: -3px;"></a></div></div>
</div>
<div class="medium-4 columns">
<div class="social-wrapper">
<div class="social-header clearfix">
<div class="title-wrap clearfix" style="line-height: 62px;">
<i class="icon icon-twitter"></i><span>Twitter</span>
</div>
Follow
</div>
<!-- Load from cache: ../cached/fs17_dedi_twitter_cache_farmingsim_4.json-->
<div class="social-news-block">
<p>RT hi: Come and meet us at E3 at booth West Hall #4512 to learn more about Farming Simulator 19, the next game in the successf…</p>
<span class="post-date">about 1 hour ago</span>
</div>
<div class="social-news-block">
<p>Are you are bale stacking champion? Are you at #blank ? Then show us your skills. The… <a target="_blank" href="blank">nothing</a></p>
<span class="post-date">4 days ago</span>
</div>
<div class="social-news-block">
<span class="post-date">11 days ago</span>
</div>
<div class="social-news-block">
<p>RT #url: We are glad to announce our plans for further expansion by moving to bigger office spaces for our two existing studios…</p>
<span class="post-date">12 days ago</span>
</div>
</div>
</div>
</div>
</section>
<div class="partners clearfix text-center"> <div class="row"> <div class="columns">
<img style="vertical-align:text-top;" src="template/image_11.gif" /> </div> </div> </div> <footer class="main-footer clearfix">
<div class="row">
<div class="medium-8 columns">
<div class="copyright"><img class="copyright__logo" src="img/logos/footer-logo.png"><div>© 2016 GIANTS Software GmbH Alle Rechte vorbehalten.<br>Alle anderen Warenzeichen sind das Eigentum ihrer jeweiligen Besitzer.</div></div> </div>
<div class="medium-4 small-12 columns">
<ul class="menu menu-footer float-right">
<li>7.0.5.0</li>
</ul>
</div>
</div>
</footer>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/frontend.js"></script>
<script>$(document).foundation();</script>
</div>
</body>
</html>
I tried this, but it simply redirects to the page without filling any of the fields.
<DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script>
window.onload = function() {
document.getElementById('loginForm').submit();
};
</script>
</head>
<body>
<form id="loginForm" action="URL of site" method="POST">
<input type=hidden name="username" value="moo"/>
<input type=hidden name="password" value="boo"/>
</form>
</body>
</html>
What is wrong with my code, and how can I achieve my goal?
Thank you.

Login with reCAPTCHA check doesn't work

This is my PHP code, I'm trying to make a system which only login when the username and password are correct and when the captcha is validated. But now the is issue. The code I've writen will always login even when the captcha is not validated.
<?php
if (!isset($_SESSION)) { session_start(); }
if (isset($_SESSION['login']) && $_SESSION['login'] === true && isset($_SESSION['userid']) && $_SESSION['userid'] != "") {
header('location: loggedin.php');
exit();
}
include "connect.php";
include "functions.php";
$error = "";
if (isset($_POST['login']) || isset($_POST['username']) || isset($_POST['password']) || isset($_POST['g-recaptcha-response'])) {
$username = $_POST['username'];
$password = $_POST['password'];
$captcha= $_POST['g-recaptcha-response'];
if (checkUsername($username) === false) {
$error = "Onjuiste inlogpoging";
}
if (checkPassword($password) === false) {
$error = "Onjuiste inlogpoging";
}
if(!$captcha){
$error = "Please check the the captcha form.";
}
$secure_username = bin2hex(htmlspecialchars($username));
$secure_password = bin2hex(htmlspecialchars($password));
$q_checklogin = mysqli_query($conn, "SELECT id FROM users WHERE username = UNHEX('$secure_username') AND password = UNHEX('$secure_password')");
if (mysqli_num_rows($q_checklogin) === 1) {
$r_checklogin = mysqli_fetch_assoc($q_checklogin);
$_SESSION['userid'] = $r_checklogin['id'];
$_SESSION['login'] = true;
header('location: loggedin.php');
} else {
$error = "Onjuiste inlogpoging";
}
}
?>
This is my HTML code for anyone who needs it.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/stylesheet.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script src="js/java.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login</title>
<style>
.error {
color: darkred;
font-weight: bold;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">SBRM National Bank</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Particulier</li>
<li>Persoonlijk</li>
<li>Privé</li>
<li>Zakelijk</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Registeren</li>
<li class="active"><span class="glyphicon glyphicon-log-in"></span> Inloggen</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid hero-slide">
<div class="row">
<div id="myCarousel" class="carousel slide " data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/login.jpg" alt="Ad">
<div class="carousel-caption">
<h3 class="caption">Inloggen</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container padding-top-10">
<div class="panel col-md-6">
<div class="panel-heading "><h5>Inloggen</h5></div>
<div class="panel-body">
<form action="login.php" method="post">
<label for="username" class="control-label">Gebruikersnaam:</label>
<div class="row ">
<div class="col-md-12">
<input type="text" class="form-control" id="username" placeholder="Gebruikersnaam" name="username" value="<?php if (isset($_POST['username'])) { echo $_POST['username']; } ?>" required/>
</div>
</div>
<label for="password" class="control-label">Wachtwoord:</label>
<div class="row ">
<div class="col-md-12">
<input type="password" class="form-control" id="password" placeholder="Wachtwoord" name="password" value="<?php if (isset($_POST['password'])) { echo $_POST['password']; } ?>" required/>
</div>
<!-- Alleen nodig bij registratie, maar je kan hier wel een pincode als extra beveiliging van maken gezien het normaal om geld gaat
<div class="col-md-6">
<input type="password" class="form-control" id="password" placeholder="Herhaal Wachtwoord" name="rpassword" required/>
</div>
-->
<div class="row">
<div class="col-md-8 padding-top-10 ">
<div class="g-recaptcha" data-sitekey="6LcCsBoTAAAAAK72uzyJSrgWwD8xuF6jFIfgFaHX"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2 padding-top-10">
<input type="submit" name="login" class="btn btn-succes" value="Login">
</div>
</div>
<?php if ($error !== "") { ?>
<div class="row ">
<div class="col-md-12 error">
<?php echo $error; ?>
</div>
</div>
<?php } ?>
<div class="row">
<div class="col-md-12 padding-top-10">
<p class="pleft">Door op <b>login</b> te klikken, gaat u akkoord met de <a class="algemeen" href="#" data-toggle="modal" data-target="#t_and_c_m">Algemene Voorwaarden</a> opgesteld door deze site.</p>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" id="t_and_c_m" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Algemene Voorwaarden</h4>
</div>
<div class="modal-body">
<p>Deze algemene voorwaarden zijn tot stand gekomen in overleg
tussen de Nederlandse Vereniging van Banken en de Consumentenbond
in het kader van de Coördinatiegroep Zelfreguleringsoverleg
van de Sociaal-Economische Raad en treden in werking
per 1 november 2009. Over overige (product)voorwaarden die
van toepassing kunnen zijn heeft geen overleg plaatsgevonden.
De Consumentenbond behoudt zich het recht tot collectieve
actie voor met betrekking tot dergelijke voorwaarden.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Ik ga akkoord</button>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-sm-3">
<h6>Copyright © 2016</h6>
<ul class="list-unstyled">
<li class="boss">Sander Bakker</li>
<li class="unstyled">Bob Lansbergen</li>
<li class="unstyled">Ronald van den Heuvel</li>
<li class="unstyled">Max Donck</li>
</ul>
</div>
<div class="col-sm-3">
<h6>Over Ons</h6>
<p id="pfont">Dit is een website ontworpen om een banksysteem te simuleren met PHP en mySQL</p>
</div>
<div class="col-sm-2">
<h6>Navigatie</h6>
<ul class="list-unstyled">
<li class="unstyled">Home</li>
<li class="unstyled">Particulier</li>
<li class="unstyled">Persoonlijk</li>
<li class="unstyled">Privé</li>
<li class="unstyled">Zakelijk</li>
</uL>
</div>
<div class="col-sm-2">
<h6>Contact</h6>
<ul class="list-unstyled">
<li class="unstyled">Google +</li>
<li class="unstyled">Facebook</li>
<li class="unstyled">Twitter</li>
<li class="unstyled">YouTube</li>
</uL>
</div>
</div>
</div>
</footer>
</body>
</head>
</html>
You only save the error to $error variable, but you still let the script run the query. You need to add another condition before making the query:
if( empty($error) ) {
$secure_username = bin2hex(htmlspecialchars($username));
$secure_password = bin2hex(htmlspecialchars($password));
$q_checklogin = mysqli_query($conn, "SELECT id FROM users WHERE username = UNHEX('$secure_username') AND password = UNHEX('$secure_password')");
if (mysqli_num_rows($q_checklogin) === 1) {
$r_checklogin = mysqli_fetch_assoc($q_checklogin);
$_SESSION['userid'] = $r_checklogin['id'];
$_SESSION['login'] = true;
header('location: loggedin.php');
} else {
$error = "Onjuiste inlogpoging";
}
}
BTW, I don't know where you're actually showing the $error, but this is not relevant for the question itself.
And addition to my answer, to check the session status, you can also use:
if( session_status() !== PHP_SESSION_ACTIVE ) { session_start(); }
Instead of
if (!isset($_SESSION)) { session_start(); }

Gritter css/js seems to be causing IE 8 to revert to compatibility mode

I have a problem in my application in IE 8 as shown below when receiving an ajax response from form submission and then displaying gritter. The error goes away if I don't include the gritter stylesheet OR do not use gritter in my javascript. This does NOT happen in IE 8 compatibility mode or IE 9 and above
Here is working example that you can see the error for yourself:
http://blastohosting.com/ie_error_8_gritter_error/
Sorry that there are no styles, I pulled out the code form an application and boiled it down the simplest I could make it in order to reproduce problem.
The message is "A problem displaying blastohosting.com caused Internet Explorer to refresh the webpage using compatibility view"
http://blastohosting.com/ie_error_8_gritter_error/
Here is the source code of the page:
<?php
if (isset($_POST['first_name']))
{
sleep(1);
echo json_encode(array('test' => 'test'));
die();
}
?>
<!DOCTYPE html>
<html>
<head>
<title>PHP Point Of Sale, Inc -- Powered By PHP Point Of Sale</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" rev="stylesheet" href="css/jquery.gritter.css?14.0" media="all" />
<script type="text/javascript">
var SITE_URL= "index.php";
</script>
<script src="js/jquery.js?14.0" type="text/javascript" language="javascript" charset="UTF-8"></script>
<script src="js/jquery.gritter.js?14.0" type="text/javascript" language="javascript" charset="UTF-8"></script>
<script src="js/jquery.validate.js?14.0" type="text/javascript" language="javascript" charset="UTF-8"></script>
<script src="js/jquery.form.js?14.0" type="text/javascript" language="javascript" charset="UTF-8"></script>
<script type="text/javascript">
COMMON_SUCCESS = "Success";
COMMON_ERROR = "Error";
$.ajaxSetup ({
cache: false,
headers: { "cache-control": "no-cache" }
});
$(document).ready(function()
{
//Ajax submit current location
$("#employee_current_location_id").change(function()
{
$("#form_set_employee_current_location_id").ajaxSubmit(function()
{
window.location.reload(true);
});
});
});
</script>
<style type="text/css">
html {
overflow: auto;
}
</style>
</head>
<body data-color="grey" class="flat">
<div id="wrapper">
<div id="header" class="hidden-print">
<h1><img src="img/header_logo.png" class="hidden-print" alt=""/></h1>
<a id="menu-trigger" href="#"><i class="fa fa-th-list fa fa-2x"></i></a>
</div>
<div id="user-nav" class="hidden-print">
<ul class="btn-group ">
<li class="btn hidden-phone" ><a title="" href="index.php/login/switch_user" data-toggle="modal" data-target="#myModal" ><i class="icon fa fa-user fa-2x"></i> <span class="text"> Welcome <b> John Doe! </b></span></a></li>
<li class="btn hidden-phone disabled" >
<a title="" href="" onclick="return false;"><i class="icon fa fa-clock-o fa-2x"></i> <span class="text">
03:32 pm 01/12/2014 </span></a>
</li>
<li class="btn "><i class="icon fa fa-cog"></i><span class="text">Settings</span></li>
<li class="btn ">
<i class="icon fa fa-share-alt "></i><span class="text">Logout</span> </li>
</ul>
</div>
<div id="sidebar" class="hidden-print">
<ul>
<li ><i class="icon fa fa-dashboard"></i> <span>Dashboard</span></li>
<li class="active"><i class="fa fa-group"></i><span>Customers</span></li>
<li ><i class="fa fa-table"></i><span>Items</span></li>
<li ><i class="fa fa-inbox"></i><span>Item Kits</span></li>
<li ><i class="fa fa-download"></i><span>Suppliers</span></li>
<li ><i class="fa fa-bar-chart-o"></i><span>Reports</span></li>
<li ><i class="fa fa-cloud-download"></i><span>Receivings</span></li>
<li ><i class="fa fa-shopping-cart"></i><span>Sales</span></li>
<li ><i class="fa fa-user"></i><span>Employees</span></li>
<li ><i class="fa fa-credit-card"></i><span>Gift Cards</span></li>
<li ><i class="fa fa-cogs"></i><span>Store Config</span></li>
<li ><i class="fa fa-home"></i><span>Locations</span></li>
</ul>
</div>
<div id="content">
<div class="modal fade" id="myModal"></div>
<div id="content-header" class="hidden-print">
<h1 > <i class="fa fa-pencil"></i> New Customer </h1>
</div>
<div id="breadcrumb" class="hidden-print">
<i class="fa fa-home"></i> Dashboard<a title="Go to customers" class=" tip-bottom" href="index.php/customers">Customers</a> <a class="current" href="index.php/customers/view">View</a> </div>
<div class="row" id="form">
<div class="col-md-12">
Fields in red are required <div class="widget-box">
<div class="widget-title">
<span class="icon">
<i class="fa fa-align-justify"></i>
</span>
<h5>Customer Information</h5>
</div>
<div class="widget-content ">
<form action="" method="post" accept-charset="utf-8" id="customer_form" class="form-horizontal" enctype="multipart/form-data"> <div class="row">
<div class="col-md-7">
<div class="form-group">
<label for="first_name" class="required col-sm-3 col-md-3 col-lg-2 control-label ">First Name:</label> <div class="col-sm-9 col-md-9 col-lg-10">
<input type="text" name="first_name" value="" class="form-control" id="first_name" /> </div>
</div>
<div class="form-group">
<label for="last_name" class="required col-sm-3 col-md-3 col-lg-2 control-label ">Last Name:</label> <div class="col-sm-9 col-md-9 col-lg-10">
<input type="text" name="last_name" value="" class="form-control" id="last_name" /> </div>
</div>
<div class="form-group">
<label for="email" class="col-sm-3 col-md-3 col-lg-2 control-label not_required">E-Mail:</label> <div class="col-sm-9 col-md-9 col-lg-10">
<input type="text" name="email" value="" class="form-control" id="email" /> </div>
</div>
<input type="hidden" name="sale" value="0" />
<div class="form-actions">
<input type="submit" name="submitf" value="Submit" id="submitf" class=" btn btn-primary" /> </div>
</div>
</div>
</div>
</div>
</div>
</form>
<script type='text/javascript'>
//validation and submit handling
$(document).ready(function()
{
setTimeout(function(){$(":input:visible:first","#customer_form").focus();},100);
var submitting = false;
$('#customer_form').validate({
submitHandler:function(form)
{
doCustomerSubmit(form);
},
rules:
{
first_name: "required",
last_name: "required",
email: "email"
},
errorClass: "text-danger",
errorElement: "span",
highlight:function(element, errorClass, validClass) {
$(element).parents('.form-group').removeClass('has-success').addClass('has-error');
},
unhighlight: function(element, errorClass, validClass) {
$(element).parents('.form-group').removeClass('has-error').addClass('has-success');
},
messages:
{
account_number:
{
remote: "Account number already exists" },
first_name: "The first name is a required field.",
last_name: "The last name is a required field",
email: "The e-mail address is not in the proper format" }
});
});
var submitting = false;
function doCustomerSubmit(form)
{
if (submitting) return;
submitting = true;
$(form).ajaxSubmit({
success:function(response)
{
submitting = false;
$.gritter.add({
title: 'Success',
text: 'MESSAGE',
image: false,
sticky: false,
class_name: 'gritter-item-success'
});
},
resetForm: true,
dataType:'json'
});
}
</script>
</body>
</html>
As Leng stated, I was missing a couple a couple of </div>'s and that was causing the problem.

bootstrap accordion not working properly

i am trying to develop bootstrap accordion and it works fine in jsfiddle
But when i tried in my web app its not working.I have attached the screenshot how it looks.As you can see in the screenshot there are no errors in the console.i am including following in my jsp page
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">
<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
Even I had replaced <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> in place of <script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script> but no luck.Please tell me what else do i need?
Following is the full code
<%# page import="java.sql.*" %>
<%# page import="DB.*" %>
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>send sms</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">
<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
</head>
<body>
<div class="tabbable" id="myTabs">
<ul class="nav nav-tabs">
<li class="active">Send Message</li>
<li>Users</li>
<li>Group Message</li>
<li>Sign Out</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<div class="btn-group-vertical pull-right" data-toggle="buttons-radio">
<%
DataBaseConnection db=new DataBaseConnection();
Connection con=db.connet();
PreparedStatement pt=con.prepareStatement("select * from registerSmsUsers");
ResultSet rs=pt.executeQuery();int i=1;
while(rs.next())
{%>
<button type="button" class="btn btn-primary btn-block" id="<%=rs.getString("mobile")%>"><%=rs.getString("name")%></button>
<%i++;}
%></div>
<div class="container">
<div class="row">
<div class="span12">
<h3>Send SMS to Individual number</h3>
<form class="form-signin" action="#" method="post" onsubmit="return false;">
<div class="row">
<div class="span3">
Enter Number to send:
</div>
<div class="span3">
<!-- <input type="text" name="toNumber" id="number" maxlength="13" placeholder="Enter 10 digits number to send" value="+22" rel="popover"/> -->
<!--<input type="text" name="toNumber" id="number" maxlength="13" placeholder="Enter 10 digits number to send" value="+2222" rel="popover" data-trigger="hover" data-delay='{"show":"10", "hide":"3000"}'/>-->
<input type="text" name="toNumber" id="number" maxlength="13" placeholder="Enter 10 digits number to send" value="+2222" rel="popover" data-trigger="hover" />
</div>
<!--<div class="span6">
<div class="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
Please enter 10 digit mobile number prefixed by country code eg +911234567890<hr />
</div>
</div>-->
</div>
<div class="row">
<div class="span3">
Enter Message to send:
</div>
<div class="span3"> <div id="datetimepicker" class="input-append date">
<input style="display:none" type="text" name="body" maxlength="160" placeholder="Enter message to send" class=".dtext" id="body" data-trigger="hover"/>
<input type="text" id="txt" style="display:none"/>
<textarea rows="9" cols="50" class="darea1" id="darea"></textarea><span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
</div>
<!--<div class="span6">
<div class="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
The text of the message you want to send, limited to 160 characters.
</div>
</div>-->
</div>
<div class="row">
<div class="span3">
</div>
<div class="span9">
<button class="btn" type="submit" id="openAlert" >Send</button>
</div>
</div>
</form>
</div>
</div>
<div id="le-alert" class="alert alert-warn alert-block fade">
<button href="#" type="button" class="close">×</button>
<h4>Successful</h4>
<p>Message sent successfully</p>
</div>
</div>
</div>
<!-- 2nd tab strats -->
<div class="tab-pane" id="tab2">
<form class="well span9" action="insertNew" method="post">
<div class="row">
<div class="span3">
<label>Name</label>
<input type="text" id="fields" class="span4" placeholder="Your full Name" name="username" required>
</div>
<div class="span3">
<label>Email Address</label>
<input type="email" id="fields1" class="span4" placeholder="Your email address" name="email" required>
</div>
<div class="span3">
<label>Mobile</label>
<input type="tel" id="fields2" class="span4" placeholder="+756762462182" name="mobile" maxLength="13" required >
</div>
</div>
<input type="button" id="btn1" class="btn btn-lg btn-primary" value="Add">
</form>
<input type="button" id="btn2" class="btn btn-lg btn-primary" value="Group">
<!-- accordion strats-->
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
records
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
<table border="1" id="mytable" class="table"/>
<tr>
<th>Add</th>
<th>Username</th>
<th>EmailId</th>
<th>Mobile No</th>
</tr>
</table> </div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
groups here </div>
</div>
</div>
</div>
<!-- accordion ends-->
<!--<table border="1" id="mytable" class="table"/>
<tr>
<th>Add</th>
<th>Username</th>
<th>EmailId</th>
<th>Mobile No</th>
</tr>
</table>-->
</div>
<!-- 2nd tab ends -->
<div class="tab-pane" id="tab3">
<p>para in section 3</p>
</div>
</div>
</div>
<script>
$(function() {
$("#datetimepicker").datetimepicker({
format: "'dd/MM/yyyy hh:mm:ss'",
linkField: "#txt",
linkFormat: "yyyy-mm-dd hh:ii",
autoclose: true,
});
jQuery('#datetimepicker').datetimepicker().on('changeDate', function(ev){
$(".darea1").val($( ".darea1" ).val()+$( "#txt" ).val());
});
});
</script>
<script>
$('#tabAll').click(function(){
$('#tabAll').addClass('active');
$('.tab-pane').each(function(i,t){
$('#myTabs li').removeClass('active');
$(this).addClass('active');
});
});
$('body').on('click', '.btn', function(){
if(this.id=='openAlert')
{$('#number').val('');}else{$('#number').val(this.id);}
});
</script>
<script >
$(document).ready(function(){
$("#signout").click(function() {
window.location.replace("logout.jsp");
});
//next line
var val=0;
$(document).ready(function(){
$('#btn1').click(function(){
if($(".span4").val()!="")
{
$("#mytable").append('<tr id="mytr'+val+'"></tr>');
$("#mytr"+val).append('<td class=\"cb\"><input type=\"checkbox\" value=\"yes\" name="mytr'+val+'" checked ></td>');
$(".span4").each(function () {
$("#mytr"+val).append("<td >"+$(this).val()+"</td>");
});
val++;
}
else
{
alert("please fill the form completely");
}
});
$('#btn2').click(function(){
var creat_group=confirm("Do you want to creat a group??");
if(val>1){
alert(creat_group);
}
});
});
//
$('#openAlert').click(function(){
var number = $('#number').val(); // If its a text input could use .text()
var msg = $('#darea').val(); //If its a text input could use .text()
alert(msg);
$.ajax(
{
type: "POST",
url: "messageSending.jsp", //Your full URL goes here
data: { toNumber: number, body: msg},
success: function(data, textStatus, jqXHR){
alert(data);
},
error: function(jqXHR){
alert(jqXHR.responseStatus);
}
});
});
});
</script>
<script>
$(function ()
{ $("#number").popover({title: 'Enter Mobile Number',content: "Please enter 10 digit mobile number prefixed by country code eg +911234567890"});
});
$(function ()
{ $("#body").popover({title: 'Message Body',content: "Maximum 160 characters allowed"});
});
</script>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript"
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
</script>
</body>
</html>
Head
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript">
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js" type="text/javascript">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" type="text/css" rel="stylesheet">
HTML
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/fzN4K/15/
Jquery 1.9.1 : http://jsfiddle.net/fzN4K/16/

Categories