Develop Reference

Why does my page refresh when I press buttons?

This is the relevant code of my page :
HTML :
<button class="ajout-col"><i class="fas fa-columns"> Ajouter une colonne</i></button>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th></th>
<th>
<button class="btn"><i class="fas fa-trash remove-col"></i></button>
<button class="btn"><i class="fas fa-text-height text-col"></i></button>
<button class="btn"><i class="fas fa-sort-numeric-down nbr-col"></i></button>
<input type="text" class="form-control">
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<button class="btn"><i class="fas fa-trash remove-row"></i></button>
</td>
<td>
<input type="text" class="form-control">
</td>
</tr>
</tbody>
</table>
</div>
<button class="ajout-lig"><i class="fas fa-list-ul"> Ajouter une ligne</i></button>
Javascript :
$('body').on('click', '.remove-row', function() {
$(this).parents('tr').remove();
});
(Any button of the grid refreshes my page, I just put the remove-row one because it's the shortest code only for clarity purpose)
(Issue is located on the second tab, just fill info on the first tab to be able to access the second tab)
Any time I press a button from the grid, it refreshes my page
I searched on google and it appears I have to add "return false" or "e.preventDefault();" to fix the issue, and I tried, but it only fixes partially the issue
If I add any of those at the end of each .on('click'), it fixes the issue for Adding a column or a row
But deleting a row or a column is going to work 1 or 2 times, and then my page is going to refresh again... same for the other buttons (text and number buttons)
Thanks in advance for any help ! :)
// Code goes here
$(document).ready(function() {
// add row
$('body').on('click', '.ajout-lig', function() {
var tr = $(this).parents('.table-content').find('.table tbody tr:last');
if (tr.length > 0) {
var clone = tr.clone();
clone.find(':text').val('');
tr.after(clone);
} else {
var cols = $(this).closest('.table-content').find('th').length,
tr0 = $('<tr/>');
tr0.html('<td><button class="btn"><i class="fa fa-trash remove-row"></i></button></td><td> <input type="text" class="form-control"> </td>');
for (var i = 2; i < cols; i++) {
tr0.append('<td> static element </td>')
}
$(this).closest('.table-content').find('.table tbody').append(tr0);
}
});
// delete row
$('body').on('click', '.remove-row', function() {
$(this).parents('tr').remove();
});
// add column
$('body').on('click', '.ajout-col', function() {
$(this).parent().find('.table thead tr').append('<th><button class="btn"><i class="fas fa-trash remove-col"></i></button> <button class="btn"><i class="fas fa-text-height text-col"></i></button> <button class="btn"><i class="fas fa-sort-numeric-down nbr-col"></i></button> <input type="text" class="form-control pull-left" value=""></th>');
$(this).parent().find('.table tbody tr').append('<td><input type="text" class="form-control"></td>');
});
// change column type to text
$('body').on('click', '.text-col', function(event) {
let ndx = $(this).parent().index() + 1;
let inputsCol = $('.table tbody tr td:nth-child(' + ndx + ') input');
inputsCol.attr("type", "text");
});
// change column type to number
$('body').on('click', '.nbr-col', function(event) {
var filter = /^[0-9]*$/g;
var cond = false;
var min = prompt('Valeur minimum :');
while (cond == false) {
if (min.match(filter)) {
cond = true;
} else {
var min = prompt('Valeur minimum incorrect, réessayez :');
}
}
var cond = false;
var max = prompt('Valeur maximum :');
while (cond == false) {
if (max.match(filter)) {
cond = true;
} else {
var max = prompt('Valeur maximum incorrect, réessayez :');
}
}
let ndx = $(this).parent().index() + 1;
let inputsCol = $('.table tbody tr td:nth-child(' + ndx + ') input');
inputsCol.attr("type", "number").prop("min", min).prop("max", max);
//console.log("inputs modified, example:", inputsCol2[0])
});
// remove column
$('body').on('click', '.remove-col', function(event) {
// Get index of parent TD among its siblings (add one for nth-child)
var ndx = $(this).parent().index() + 1;
// Find all TD elements with the same index
$('th', event.delegateTarget).remove(':nth-child(' + ndx + ')');
$('td', event.delegateTarget).remove(':nth-child(' + ndx + ')');
});
});
$(document).ready(function(){
$('#btn_login_details').click(function(){
var error_date = '';
var error_titre = '';
var error_entreprise = '';
var error_conseiller = '';
var filter = /^([0-2][0-9]|(3)[0-1])(\/)(((0)[0-9])|((1)[0-2]))(\/)\d{4}$/;
if($.trim($('#titre').val()).length == 0)
{
error_titre = 'Titre requis !';
$('#error_titre').text(error_titre);
$('#titre').addClass('has-error');
}
else
{
error_titre = '';
$('#error_titre').text(error_titre);
$('#titre').removeClass('has-error');
}
if($.trim($('#entreprise').val()).length == 0)
{
error_entreprise = 'Nom de l\'entreprise requis !';
$('#error_entreprise').text(error_entreprise);
$('#entreprise').addClass('has-error');
}
else
{
error_entreprise = '';
$('#error_entreprise').text(error_entreprise);
$('#entreprise').removeClass('has-error');
}
if($.trim($('#conseiller').val()).length == 0)
{
error_conseiller = 'Nom du conseiller requis !';
$('#error_conseiller').text(error_conseiller);
$('#conseiller').addClass('has-error');
}
else
{
error_conseiller = '';
$('#error_conseiller').text(error_conseiller);
$('#conseiller').removeClass('has-error');
}
if($.trim($('#date').val()).length == 0)
{
error_date = 'Date requise !';
$('#error_date').text(error_date);
$('#date').addClass('has-error');
}
else
{
if (!filter.test($('#date').val()))
{
error_date = 'Date invalide';
$('#error_date').text(error_date);
$('#date').addClass('has-error');
}
else
{
error_date = '';
$('#error_date').text(error_date);
$('#date').removeClass('has-error');
}
}
if((error_titre != '') || (error_conseiller != '') || (error_entreprise != '') || (error_date != ''))
{
return false;
}
else
{
$('#list_login_details').removeClass('active active_tab1');
$('#list_login_details').removeAttr('href data-toggle');
$('#login_details').removeClass('active');
$('#list_login_details').addClass('inactive_tab1');
$('#list_personal_details').removeClass('inactive_tab1');
$('#list_personal_details').addClass('active_tab1 active');
$('#list_personal_details').attr('href', '#personal_details');
$('#list_personal_details').attr('data-toggle', 'tab');
$('#personal_details').addClass('active in');
}
});
$('#previous_btn_personal_details').click(function(){
$('#list_personal_details').removeClass('active active_tab1');
$('#list_personal_details').removeAttr('href data-toggle');
$('#personal_details').removeClass('active in');
$('#list_personal_details').addClass('inactive_tab1');
$('#list_login_details').removeClass('inactive_tab1');
$('#list_login_details').addClass('active_tab1 active');
$('#list_login_details').attr('href', '#login_details');
$('#list_login_details').attr('data-toggle', 'tab');
$('#login_details').addClass('active in');
});
$('#btn_gen_grille').click(function() {
// Générer la grille
// Ici
});
$('#btn_personal_details').click(function(){
$('#list_personal_details').removeClass('active active_tab1');
$('#list_personal_details').removeAttr('href data-toggle');
$('#personal_details').removeClass('active');
$('#list_personal_details').addClass('inactive_tab1');
$('#list_contact_details').removeClass('inactive_tab1');
$('#list_contact_details').addClass('active_tab1 active');
$('#list_contact_details').attr('href', '#contact_details');
$('#list_contact_details').attr('data-toggle', 'tab');
$('#contact_details').addClass('active in');
});
$('#previous_btn_contact_details').click(function(){
$('#list_contact_details').removeClass('active active_tab1');
$('#list_contact_details').removeAttr('href data-toggle');
$('#contact_details').removeClass('active in');
$('#list_contact_details').addClass('inactive_tab1');
$('#list_personal_details').removeClass('inactive_tab1');
$('#list_personal_details').addClass('active_tab1 active');
$('#list_personal_details').attr('href', '#personal_details');
$('#list_personal_details').attr('data-toggle', 'tab');
$('#personal_details').addClass('active in');
});
$('#btn_contact_details').click(function(){
var error_address = '';
var error_mobile_no = '';
var mobile_validation = /^\d{10}$/;
if($.trim($('#address').val()).length == 0)
{
error_address = 'Address is required';
$('#error_address').text(error_address);
$('#address').addClass('has-error');
}
else
{
error_address = '';
$('#error_address').text(error_address);
$('#address').removeClass('has-error');
}
if($.trim($('#mobile_no').val()).length == 0)
{
error_mobile_no = 'Mobile Number is required';
$('#error_mobile_no').text(error_mobile_no);
$('#mobile_no').addClass('has-error');
}
else
{
if (!mobile_validation.test($('#mobile_no').val()))
{
error_mobile_no = 'Invalid Mobile Number';
$('#error_mobile_no').text(error_mobile_no);
$('#mobile_no').addClass('has-error');
}
else
{
error_mobile_no = '';
$('#error_mobile_no').text(error_mobile_no);
$('#mobile_no').removeClass('has-error');
}
}
if(error_address != '' || error_mobile_no != '')
{
return false;
}
else
{
$('#btn_contact_details').attr("disabled", "disabled");
$(document).css('cursor', 'prgress');
$("#register_form").submit();
}
});
});
/* Style the header with a grey background and some padding */
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header {
overflow: hidden;
background-color: #f1f1f1;
padding: 20px 10px;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: dodgerblue;
color: white;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
.contenuaccueil {
text-align: center;
position : absolute;
width : 100%;
color : black;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.background
{
margin-top : 10%;
margin-bottom : 10%;
position:relative;
text-align: center;
}
.img
{
background-repeat: repeat-x;
width: 100%;
height: auto;
text-align: center;
}
footer {
text-align : center;
padding-top: 10px;
padding-bottom: 0px;
bottom:0;
width:100%;
color : #A5A5A5;
font-family : "Lato", sans-serif;
font-size : 15px;
font-weight : 400;
text-transform : uppercase;
text-decoration : none;
letter-spacing : 3px;
}
.box
{
width:800px;
margin:0 auto;
}
.active_tab1
{
background-color:#fff;
color:#333;
font-weight: 600;
}
.inactive_tab1
{
background-color: #f5f5f5;
color: #333;
cursor: not-allowed;
}
.has-error
{
border-color:#cc0000;
background-color:#ffff99;
}
/* Styles go here */
.table-content {
padding: 20px;
}
.form-control {
width: 90px;
}
/* Style buttons */
.ajout-lig,.ajout-col {
background-color: DodgerBlue; /* Blue background */
border: none; /* Remove borders */
color: white; /* White text */
padding: 12px 16px; /* Some padding */
font-size: 16px; /* Set a font size */
cursor: pointer; /* Mouse pointer on hover */
border-radius: 5px;
}
/* Darker background on mouse-over */
.ajout-lig:hover,.ajout-col:hover {
background-color: RoyalBlue;
}
<html>
<head>
<title>Innovatech</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/custom.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://kit.fontawesome.com/38b99a3f0e.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- Titre + Menu -->
<div class="header">
Innovatech
<div class="header-right">
Accueil
<a class="active" href="ajout.php">Nouveau</a>
Modifier
Mode d'emploi
</div>
</div>
<!-- Contenu du site web -->
<div class="contenu">
<br />
<div class="container box">
<br />
<h2 align="center">Ajout d'un nouvel audit</h2><br />
<?php echo $message; ?>
<form method="post" id="register_form">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active_tab1" style="border:1px solid #ccc" id="list_login_details">Informations à propos de l'entreprise</a>
</li>
<li class="nav-item">
<a class="nav-link inactive_tab1" id="list_personal_details" style="border:1px solid #ccc">Grille d'audit</a>
</li>
<li class="nav-item">
<a class="nav-link inactive_tab1" id="list_contact_details" style="border:1px solid #ccc">Génération des graphiques</a>
</li>
</ul>
<div class="tab-content" style="margin-top:16px;">
<div class="tab-pane active" id="login_details">
<div class="panel panel-default">
<div class="panel-heading">Informations à propos de l'entreprise</div>
<div class="panel-body">
<div class="form-group">
<label>Titre de l'audit</label>
<input type="text" name="titre" id="titre" class="form-control" />
<span id="error_titre" class="text-danger"></span>
</div>
<div class="form-group">
<label>Nom de l'entreprise</label>
<input type="text" name="entreprise" id="entreprise" class="form-control" />
<span id="error_entreprise" class="text-danger"></span>
</div>
<div class="form-group">
<label>Nom du conseiller</label>
<input type="text" name="conseiller" id="conseiller" class="form-control" />
<span id="error_conseiller" class="text-danger"></span>
</div>
<div class="form-group">
<label>Date de l'interview (jj/mm/aaaa)</label>
<input type="text" name="date" id="date" class="form-control" />
<span id="error_date" class="text-danger"></span>
</div>
<br />
<div align="center">
<button type="button" name="btn_login_details" id="btn_login_details" class="btn btn-info btn-lg">Suivant</button>
</div>
<br />
</div>
</div>
</div>
<div class="tab-pane fade" id="personal_details">
<div class="panel panel-default">
<div class="panel-heading">Grille d'audit</div>
<div class="panel-body">
<div class="table-content">
<button class="ajout-col"><i class="fas fa-columns"> Ajouter une colonne</i></button>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th></th>
<th>
<button class="btn"><i class="fas fa-trash remove-col"></i></button>
<button class="btn"><i class="fas fa-text-height text-col"></i></button>
<button class="btn"><i class="fas fa-sort-numeric-down nbr-col"></i></button>
<input type="text" class="form-control">
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<button class="btn"><i class="fas fa-trash remove-row"></i></button>
</td>
<td>
<input type="text" class="form-control">
</td>
</tr>
</tbody>
</table>
</div>
<button class="ajout-lig"><i class="fas fa-list-ul"> Ajouter une ligne</i></button>
</div>
<br />
<div align="center">
<button type="button" name="previous_btn_personal_details" id="previous_btn_personal_details" class="btn btn-default btn-lg">Précédent</button>
<button type="button" name="btn_personal_details" id="btn_personal_details" class="btn btn-info btn-lg">Suivant</button>
</div>
<br />
</div>
</div>
</div>
<!--A MODIFIER - PARTIE SUR LES GRAPHIQUES-->
<div class="tab-pane fade" id="contact_details">
<div class="panel panel-default">
<div class="panel-heading">Fill Contact Details</div>
<div class="panel-body">
<div class="form-group">
<label>Enter Address</label>
<textarea name="address" id="address" class="form-control"></textarea>
<span id="error_address" class="text-danger"></span>
</div>
<div class="form-group">
<label>Enter Mobile No.</label>
<input type="text" name="mobile_no" id="mobile_no" class="form-control" />
<span id="error_mobile_no" class="text-danger"></span>
</div>
<br />
<div align="center">
<button type="button" name="previous_btn_contact_details" id="previous_btn_contact_details" class="btn btn-default btn-lg">Précédent</button>
<button type="button" name="btn_contact_details" id="btn_contact_details" class="btn btn-success btn-lg">Enregistrer</button>
</div>
<br />
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<!-- Le pied de page -->
<footer>
<p>
Innovatech <?php echo date("Y");?> - All rights reserved
</p>
</footer>
<script src="jss/ajout.js"></script>
<script src="jss/gengrille.js"></script>
</body>
</html>

This happens because a button with no type attribute acts as type="submit" and also try to submit the form data to server and refresh the page finally. Please try to set the type to the buttons like type="button" for no page refreshes.
<button class="ajout-col" type="button">
<i class="fas fa-columns"> Ajouter une colonne</i>
</button>

Replace <button class="ajout-lig"><i class="fas fa-list-ul"> Ajouter une ligne</i></button>
to
<button class="ajout-lig" type="button"><i class="fas fa-list-ul"> Ajouter une ligne</i></button>
I think this problem is due to, these buttons are actually submitting the form. if we doesn't specify the button type, it will take as a submit type button

How could I add a border to make element look like a tree and keep it positioned correctly when resizing?

I am trying to step away from jsTree as this is not as much as configurable as having my own custom code. I am making use of Bootstrap to have a somewhat similar functionality as jsTree. I am also stepping away from jQuery (for now), because of debugging reasons.
//Event delegation
function BindEvent(parent, eventType, ele, func) {
var element = document.querySelector(parent);
element.addEventListener(eventType, function(event) {
var possibleTargets = element.querySelectorAll(ele);
var target = event.target;
for (var i = 0, l = possibleTargets.length; i < l; i++) {
var el = target;
var p = possibleTargets[i];
while (el && el !== element) {
if (el === p) {
return func.call(p, event);
}
el = el.parentNode;
}
}
});
}
//Add content after referenced element
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
//Custom function
function LoadSubOptions(ele) {
ele = ele.parentElement.parentElement;
let newEle = document.createElement("div");
newEle.classList.add("row", "flex");
//Generated HTML Content (currently hard coded):
newEle.innerHTML = "<div class='col-xs-1'><div class='tree-border'></div></div><div class='col-xs-11'><div class='row'><div class='col-xs-12'><button class='btn btn-default btn-block btn-lg'>Test</button></div></div></div>";
insertAfter(ele, newEle);
}
//Bind method(s) on button click(s)
BindEvent("#tree-replacement", "click", "button", function(e) {
LoadSubOptions(this);
});
#tree-replacement button {
margin-top: 5px;
}
.tree-border {
border-left: 1px dashed #000;
height: 100%;
margin-left: 15px;
}
.flex {
display: flex;
}
/*Probably not wise to use this method on Bootstrap's grid system: */
#tree-replacement .row.flex>[class*='col-'] {
display: flex;
flex-direction: column;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div id="tree-replacement">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default btn-block btn-lg">
Option 1
</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default btn-block btn-lg">
Option 2
</button>
</div>
</div>
<!--The generated html as example: -->
<!--<div class="row">
<div class="col-xs-1">
<div class="tree-border">
</div>
</div>
<div class="col-xs-11">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default btn-block btn-lg">
Option 2
</button>
</div>
</div>
</div>
</div>-->
</div>
</div>
JSFiddle
I added a border in a .column-*-1 to allow for some spacing for the border:
The spacing however, I find a bit too much. How could I address this problem? I would like to refrain from styling Bootstrap's grid system (meaning I preferably would not want to touch any styling behind .col-* and .row classes etc.) because this might break the responsiveness or anything else related to Bootstrap.
Edit:
I also noticed that when adding a lot of buttons by just clicking them, the layout of tree will start failing as well. (I am aware this is a different question, so if I need to post another question regarding this problem, please do let me know) Is there a way I could address this so that the element works correctly?

Add this little CSS
#tree-replacement .row.flex > .col-xs-11:nth-child(2):before {
content: ' ';
position: absolute;
left: calc(-100% / 11 + 30px);
top: 2em;
border-top: 1px dashed #000000;
width: calc(100% / 5 - 15px);
}
//Event delegation
function BindEvent(parent, eventType, ele, func) {
var element = document.querySelector(parent);
element.addEventListener(eventType, function(event) {
var possibleTargets = element.querySelectorAll(ele);
var target = event.target;
for (var i = 0, l = possibleTargets.length; i < l; i++) {
var el = target;
var p = possibleTargets[i];
while (el && el !== element) {
if (el === p) {
return func.call(p, event);
}
el = el.parentNode;
}
}
});
}
//Add content after referenced element
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
//Custom function
function LoadSubOptions(ele) {
ele = ele.parentElement.parentElement;
let newEle = document.createElement("div");
newEle.classList.add("row", "flex");
//Generated HTML Content (currently hard coded):
newEle.innerHTML = "<div class='col-xs-1'><div class='tree-border'></div></div><div class='col-xs-11'><div class='row'><div class='col-xs-12'><button class='btn btn-default btn-block btn-lg'>Test</button></div></div></div>";
insertAfter(ele, newEle);
}
//Bind method(s) on button click(s)
BindEvent("#tree-replacement", "click", "button", function(e) {
LoadSubOptions(this);
});
#tree-replacement button {
margin-top: 5px;
}
.tree-border {
border-left: 1px dashed #000;
height: 100%;
margin-left: 15px;
}
.flex {
display: flex;
}
/*Probably not wise to use this method on Bootstrap's grid system: */
#tree-replacement .row.flex>[class*='col-'] {
display: flex;
flex-direction: column;
}
#tree-replacement .row.flex > .col-xs-11:nth-child(2):before {
content: ' ';
position: absolute;
left: calc(-100% / 11 + 30px);
top: 2em;
border-top: 1px dashed #000000;
width: calc(100% / 5 - 15px);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div id="tree-replacement">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default btn-block btn-lg">
Option 1
</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default btn-block btn-lg">
Option 2
</button>
</div>
</div>
<!--The generated html as example: -->
<!--<div class="row">
<div class="col-xs-1">
<div class="tree-border">
</div>
</div>
<div class="col-xs-11">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default btn-block btn-lg">
Option 2
</button>
</div>
</div>
</div>
</div>-->
</div>
</div>

Here I have used absolute positioning and increased height by 5px which kind of makes it touches the next div element.
Here is the Fiddle Link
and the Code Snippet:
//Event delegation
function BindEvent(parent, eventType, ele, func) {
var element = document.querySelector(parent);
element.addEventListener(eventType, function(event) {
var possibleTargets = element.querySelectorAll(ele);
var target = event.target;
for (var i = 0, l = possibleTargets.length; i < l; i++) {
var el = target;
var p = possibleTargets[i];
while (el && el !== element) {
if (el === p) {
return func.call(p, event);
}
el = el.parentNode;
}
}
});
}
//Add content after referenced element
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
//Custom function
function LoadSubOptions(ele) {
ele = ele.parentElement.parentElement;
let newEle = document.createElement("div");
newEle.classList.add("row", "flex");
//Generated HTML Content (currently hard coded):
newEle.innerHTML = "<div class='col-xs-1'><div class='tree-border'></div></div><div class='col-xs-11'><div class='row'><div class='col-xs-12'><button class='btn btn-default btn-block btn-lg'>Test</button></div></div></div>";
insertAfter(ele, newEle);
}
//Bind method(s) on button click(s)
BindEvent("#tree-replacement", "click", "button", function(e) {
LoadSubOptions(this);
});
#tree-replacement button {
margin-top: 5px;
}
.tree-border {
border-left: 1px dashed #000;
height: calc(100% + 5px);
margin-left: 20px;
position: absolute;
}
.flex {
position: relative;
display: flex;
}
.col-xs-11 .col-xs-12 {
padding-left: 0;
}
/*Probably not wise to use this method on Bootstrap's grid system: */
#tree-replacement .row.flex>[class*='col-'] {
display: flex;
flex-direction: column;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div id="tree-replacement">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default btn-block btn-lg">
Option 1
</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default btn-block btn-lg">
Option 2
</button>
</div>
</div>
<!--<div class="row">
<div class="col-xs-1">
<div class="tree-border">
</div>
</div>
<div class="col-xs-11">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default btn-block btn-lg">
Option 2
</button>
</div>
</div>
</div>
</div>-->
</div>
</div>

Laravel 5.4 - Code for javascript screensaver in blade not running but have no error in console?

I have here a blade page on laravel 5.4 that allows users to input survey responses. The system should show a screensaver after being idle for a certain time ie. idle is 5mins. but the screensaver should disappear when somebody interact with the page. but the codes did not function. I've check the console but it has no error in google chrome. (newbie in javascript)
#php
use App\Bus;
use App\Bgcroute;
use App\Surveyquestion;
use App\User;
use Controller\UserController;
#endphp
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BGC Bus Survey Page</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cookie">
<link rel="stylesheet" href="assets/css/user.css">
<link rel="stylesheet" href="assets/css/Pretty-Footer.css">
<link rel="stylesheet" href="assets/css/Pretty-Header.css">
<link rel="stylesheet" href="assets/css/Hero-Technology.css">
<link rel="stylesheet" href="js-screensaver/screensaver.css">
<script src="js-screensaver/screensaver.js"></script>
<script src="sweetalert2.all.js"></script>
<script src="sweetalert2.min.js"></script>
<link rel="stylesheet" href="sweetalert2.min.js">
<style type="text/css">
.navbar {
margin-bottom: 0;
border-radius: 0;
background-color: #00FFFF;
color: #FFF;
padding: 1 0;
font-size: 1.2em;
border: 0;
}
.navbar-brand {
float: left;
min-height: 55px;
padding: 0 15px;
}
.img-logo{
width: 75px;
height: 60px;
}
.navbar-inverse .navbar-nav .active a, .navbar-inverse .navbar-nav .active a:focus, .navbar-inverse .navbar-nav .active a:hover {
color: #fff;
background-color: #53DFF0;
}
.navbar-inverse .nav-bar-nav li a {
color: #D5D5D5;
}
.avatar{
border-radius: 100%;
max-width: 100px;
clip: rect(10px,60px,50px,10px);
}
.startScreenSaver({
timeout: 5000,
width: 30,
height: 30,
exitTimeout: 1000,
});
</style>
<body>
<nav class="navbar navbar-inverse">
<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="#"><img class="img-logo" src="img/logo.png"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<form action="{{route('logout')}}" method="post">
{!!csrf_field()!!}
#if(!empty(Auth::user()->image))
<img src="{{ Auth::user()->image }}" class="avatar" alt="" width="60" height="60">
#else
<img src={{ url('uploads/avatar.png') }} class="avatar" alt="" width="60" height="60">
#endif
<b>Your Driver of the Day, {{ Auth::user()->name }}</b>
<button class="btn btn-danger">Log out</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Route/Bus Details
</button>
</form>
</ul>
</div>
</div>
</nav>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Select Your Desire Route</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="{{ route('surveysubmit') }}" >
<div class="form-group">
<h4>Select Bus</h4>
<select onchange="$('#busid').val(this.value);" class="form-control" >
#php
$display=''; $initbusid = '';
$buses = Bus::where(['archive'=>1])->orderBy('id')->get(['id','busplate']);
foreach($buses as $bus){
if(empty($initbusid)){$initbusid=$bus->id;}
$display .= '<option value='.$bus->id.'>'.$bus->busplate.'</option>';
}
echo $display;
#endphp
</select>
</div>
<div class="form-group">
<h4>Select Route</h4>
<select onchange="$('#routeid').val(this.value);" class="form-control" >
#php
$display2=''; $initrouteid = '';
$bgcroutes = Bgcroute::where(['routeloc'=>1,'archive'=>1])->orderBy('id')->get(['id','bgcbusroute']);
foreach($bgcroutes as $bgcroute){
if(empty($initrouteid)){$initrouteid=$bgcroute->id;}
$display2 .= '<option value='.$bgcroute->id.'>'.$bgcroute->bgcbusroute.'</option>';
}
echo $display2;
#endphp
</select>
</div>
<button type="button" class="btn btn-danger" data-dismiss="modal">Start Survey</button>
</form>
</div>
</div>
</div>
</div>
#php
$questions = Surveyquestion::where('status',1)->get(['squestions','id'])->first();
#endphp
<section class="testimonials"></section>
<div class="jumbotron visible-xs-block visible-sm-block visible-md-block visible-lg-block hero-technology">
<h2 class="bg-success hero-title">{{ $questions->squestions }}</h2>
<p class="visible-xs-block visible-sm-block visible-md-block visible-lg-block visible-xs-inline visible-sm-inline visible-md-inline visible-lg-inline visible-xs-inline-block visible-sm-inline-block visible-md-inline-block visible-lg-inline-block hidden-xs hidden-sm hidden-md hidden-lg hero-subtitle">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<p class="text-primary bg-warning">Help Us Serve You Better</p>
<p></p>
<p class="text-center bg-primary">Rate us. Choose a smiley that Corresponds to your riding experience</p>
<div>
<input type="hidden" name="driverid" id="driverid" value="{{ Auth::user()->id }}"/>
<input type="hidden" name="busid" id="busid" value="{{ $initbusid }}"/>
<input type="hidden" name="routeid" id="routeid" value="{{ $initrouteid }}"/>
<input type="hidden" name="questionid" id="questionid" value="{{ $questions->id }}"/>
<input type="hidden" name="responseid" id="responseid"/>
<table class="table">
<thead>
<tr>
<th class="info visible-xs-block visible-sm-block visible-md-block visible-lg-block visible-xs-inline visible-sm-inline visible-md-inline visible-lg-inline visible-xs-inline-block">
<img class="img-rounded" src="assets/img/person-clipart-silhouette-blue-14518-blue-man-design.png" height="100">
<img src="assets/img/inlove.gif" height="70" id="loveid">
<img src="assets/img/like.gif" height="90" id="likeid">
<img src="assets/img/facepalm.gif" height="70" id="faceid">
<img src="assets/img/cry.gif" height="70" id="cryid">
</th>
<th
class="danger visible-xs-block visible-sm-block visible-md-block visible-lg-block visible-xs-inline visible-sm-inline visible-md-inline visible-lg-inline visible-xs-inline-block">
<img class="img-rounded" src="assets/img/pink-female-symbol-190136.png" width="40" height="100">
<img src="assets/img/inlove.gif" height="70" id="loveid2">
<img src="assets/img/like.gif" height="90" id="likeid2">
<img src="assets/img/facepalm.gif" height="70" id="faceid2">
<img src="assets/img/cry.gif" height="70" id="cryid2">
</th>
</tr>
</thead>
<tbody>
<tr></tr>
<tr></tr>
</tbody>
<caption> </caption>
</table>
</div>
<p>For Comments/Feedback Email us at bgc#bgc.com</p>
</div>
<div class="container">
<div class="table-responsive">
<table class="table">
<thead>
<tr></tr>
</thead>
<tbody>
<tr></tr>
<tr></tr>
</tbody>
</table>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e){
});
function surveyvote(){
driverid = $('#driverid').val();
busid = $('#busid').val();
routeid = $('#routeid').val();
questionid = $('#questionid').val();
responseid = $('#responseid').val();
$.ajax({
"type":"get",
"url": "{{ route('surveyvoting') }}",
"data": '&driverid='+driverid+'&busid='+busid+'&routeid='+routeid+'&questionid='+questionid+'&responseid='+responseid,
"success":function(result){
// Do something you want!
swal({
title: 'Thank You!',
//text: 'I will close in 3 seconds.',
timer: 1000,
onOpen: () => {
swal.showLoading()
}
}).then((result) => {
if (
// Read more about handling dismissals
result.dismiss === swal.DismissReason.timer
) {
console.log('I was closed by the timer')
}
})
}
});
}
</script>
<script type="text/javascript">
var screenSaver = {};
function startScreenSaver(options) {
//* attach event listeners to exit screensaver
attachScreenSaverEventListeners();
if(!screenSaver.initiated) {
//* set screensaver options
screenSaver.options = {
timeout: options.timeout || 5000, //* default timer to start screensaver is 10 minutes
width: options.width || 25, //* default width is 25rem
height: options.height || 25, //* default height is 25rem
exitTimeout: options.exitTimeout || null, //* default timer to exit screensaver is disabled
}
//* create elements
var overlay = document.createElement("div");
overlay.setAttribute('class', 'screensaver-overlay');
document.body.appendChild(overlay);
var createBadge = document.createElement("div");
createBadge.setAttribute('id', 'saver-badge');
document.body.appendChild(createBadge);
createBadge.style.width = screenSaver.options.width + 'rem';
createBadge.style.height = screenSaver.options.height + 'rem';
}
document.getElementsByTagName("body")[0].classList.remove('screensaver');
screenSaver.initiated = true;
screenSaver.setTimeoutValue = screenSaver.options.timeout;
screenSaver.setTimeoutExit = screenSaver.options.timeoutExit;
screenSaver.setTimeout = null; //* clear timeout
screenSaver.inProgress = false;
screenSaver.timerStarted = false;
clearTimeout(screenSaver.setTimeout);
screenSaver.setTimeout = setTimeout(function() {
document.getElementsByTagName("body")[0].classList.add('screensaver');
screenSaver.inProgress = true;
var saverBadge = document.getElementById("saver-badge");
clearInterval(screenSaver.setInterval); //* clear badge display interval
screenSaver.setInterval = null;
//* get dimensions in em
var windowHeight = window.outerHeight / parseFloat(window.getComputedStyle(document.getElementsByTagName("body")[0], null).getPropertyValue('font-size'));
var windowWidth = window.outerWidth / parseFloat(window.getComputedStyle(document.getElementsByTagName("body")[0], null).getPropertyValue('font-size'));
screenSaver.setInterval = setInterval(function() {
if (screenSaver.inProgress === true) {
saverBadge.classList.remove('visible');
setTimeout(function() {
saverBadge.offsetWidth = saverBadge.offsetWidth;
saverBadge.classList.add('visible');
},1);
var saverTopValue = Math.floor(Math.random() * windowHeight) - screenSaver.options.width;
var saverLeftValue = Math.floor(Math.random() * windowWidth) - screenSaver.options.height;
if (saverTopValue <= 0) { //* make sure the badge doesn't go off the screen
saverTopValue = saverTopValue + 15;
}
if (saverLeftValue <= 0) {
saverLeftValue = saverLeftValue + 15;
}
saverBadge.style.top = saverTopValue + 'rem';
saverBadge.style.left = saverLeftValue + 'rem';
if(screenSaver.timerStarted === false && screenSaver.options.exitTimeout != null) {
startScreenSaverTimer();
}
}
}, 6000);
}, screenSaver.setTimeoutValue);
}
function startScreenSaverTimer() {
screenSaver.timerStarted = true;
setTimeout(function() {
stopScreenSaver();
}, screenSaver.setTimeoutExit);
}
function stopScreenSaver() {
startScreenSaver();
clearInterval(screenSaver.setInterval);
document.getElementsByTagName("body")[0].classList.remove('screensaver');
screenSaver.timerStarted = false;
}
function attachScreenSaverEventListeners() {
var events = ['touchstart', 'mousedown', 'mousemove', 'touchmove', 'keypress', 'scroll'];
var resetScreenSaver = function(e) {
if (screenSaver.inProgress) {
e.stopPropagation();
e.preventDefault();
}
clearTimeout(screenSaver.setTimeout);
clearInterval(screenSaver.setInterval);
document.getElementsByTagName("body")[0].classList.remove('screensaver');
startScreenSaver();
}
var checkClick = function(e) {
if (screenSaver.inProgress) {
startScreenSaver();
}
}
var bindEvents = function(eventName) {
document.addEventListener(eventName, screenSaver.initialize);
//* bind click as fallback for touchstart and mousedown
document.addEventListener('click', checkClick);
}
var unbindEvents = function(eventName) {
document.removeEventListener(eventName, screenSaver.initialize);
}
}
</script>
</body>
</html>
Here is the related files that I think that is related on the script or the javascript
css file screensaver.css
body.screensaver #saver-badge {
opacity: 0;
display: block;
position: absolute;
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12,Color='#444')";
filter: url(#drop-shadow);
-webkit-filter: drop-shadow(12px 12px 20px rgba(0,0,0,0.5));
filter: drop-shadow(12px 12px 20px rgba(0,0,0,0.5));
background: url(../img/vwd.png) center;
background-size: contain;
z-index: 1001;
}
body.screensaver #saver-badge.visible {
-webkit-animation: fadeBadge 6s;
-moz-animation: fadeBadge 6s;
-o-animation: fadeBadge 6s;
animation: fadeBadge 6s;
opacity: 1;
}
body.screensaver .screensaver-overlay {
background: #000;
opacity: .5;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 1000;
}
#saver-badge {
display: none;
}
#-webkit-keyframes fadeBadge {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-moz-keyframes fadeBadge {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-o-keyframes fadeBadge {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes fadeBadge {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
js file
screensaver.js
var screenSaver = {};
function startScreenSaver(options) {
//* attach event listeners to exit screensaver
attachScreenSaverEventListeners();
if(!screenSaver.initiated) {
//* set screensaver options
screenSaver.options = {
timeout: options.timeout || 60000, //* default timer to start screensaver is 10 minutes
width: options.width || 25, //* default width is 25rem
height: options.height || 25, //* default height is 25rem
exitTimeout: options.exitTimeout || null, //* default timer to exit screensaver is disabled
}
//* create elements
var overlay = document.createElement("div");
overlay.setAttribute('class', 'screensaver-overlay');
document.body.appendChild(overlay);
var createBadge = document.createElement("div");
createBadge.setAttribute('id', 'saver-badge');
document.body.appendChild(createBadge);
createBadge.style.width = screenSaver.options.width + 'rem';
createBadge.style.height = screenSaver.options.height + 'rem';
}
document.getElementsByTagName("body")[0].classList.remove('screensaver');
screenSaver.initiated = true;
screenSaver.setTimeoutValue = screenSaver.options.timeout;
screenSaver.setTimeoutExit = screenSaver.options.timeoutExit;
screenSaver.setTimeout = null; //* clear timeout
screenSaver.inProgress = false;
screenSaver.timerStarted = false;
clearTimeout(screenSaver.setTimeout);
screenSaver.setTimeout = setTimeout(function() {
document.getElementsByTagName("body")[0].classList.add('screensaver');
screenSaver.inProgress = true;
var saverBadge = document.getElementById("saver-badge");
clearInterval(screenSaver.setInterval); //* clear badge display interval
screenSaver.setInterval = null;
//* get dimensions in em
var windowHeight = window.outerHeight / parseFloat(window.getComputedStyle(document.getElementsByTagName("body")[0], null).getPropertyValue('font-size'));
var windowWidth = window.outerWidth / parseFloat(window.getComputedStyle(document.getElementsByTagName("body")[0], null).getPropertyValue('font-size'));
screenSaver.setInterval = setInterval(function() {
if (screenSaver.inProgress === true) {
saverBadge.classList.remove('visible');
setTimeout(function() {
saverBadge.offsetWidth = saverBadge.offsetWidth;
saverBadge.classList.add('visible');
},1);
var saverTopValue = Math.floor(Math.random() * windowHeight) - screenSaver.options.width;
var saverLeftValue = Math.floor(Math.random() * windowWidth) - screenSaver.options.height;
if (saverTopValue <= 0) { //* make sure the badge doesn't go off the screen
saverTopValue = saverTopValue + 15;
}
if (saverLeftValue <= 0) {
saverLeftValue = saverLeftValue + 15;
}
saverBadge.style.top = saverTopValue + 'rem';
saverBadge.style.left = saverLeftValue + 'rem';
if(screenSaver.timerStarted === false && screenSaver.options.exitTimeout != null) {
startScreenSaverTimer();
}
}
}, 6000);
}, screenSaver.setTimeoutValue);
}
function startScreenSaverTimer() {
screenSaver.timerStarted = true;
setTimeout(function() {
stopScreenSaver();
}, screenSaver.setTimeoutExit);
}
function stopScreenSaver() {
startScreenSaver();
clearInterval(screenSaver.setInterval);
document.getElementsByTagName("body")[0].classList.remove('screensaver');
screenSaver.timerStarted = false;
}
function attachScreenSaverEventListeners() {
var events = ['touchstart', 'mousedown', 'mousemove', 'touchmove', 'keypress', 'scroll'];
var resetScreenSaver = function(e) {
if (screenSaver.inProgress) {
e.stopPropagation();
e.preventDefault();
}
clearTimeout(screenSaver.setTimeout);
clearInterval(screenSaver.setInterval);
document.getElementsByTagName("body")[0].classList.remove('screensaver');
startScreenSaver();
}
var checkClick = function(e) {
if (screenSaver.inProgress) {
startScreenSaver();
}
}
var bindEvents = function(eventName) {
document.addEventListener(eventName, screenSaver.initialize);
//* bind click as fallback for touchstart and mousedown
document.addEventListener('click', checkClick);
}
var unbindEvents = function(eventName) {
document.removeEventListener(eventName, screenSaver.initialize);
}
for (var i=0;i<events.length;i++) {
bindEvents(events[i]);
}
}

Insert values at cursor pointer and how to assign to ng-model - Angularjs

I am able to insert values at cursor pointer but unable to assign the textarea value to ng-model.
app.directive('myText', ['$rootScope', function($rootScope) {
return {
link: function(scope, element, attrs) {
$rootScope.$on('add', function(e, val) {
var domElement = element[0];
if (document.selection) {
domElement.focus();
var sel = document.selection.createRange();
sel.text = val;
domElement.focus();
} else if (domElement.selectionStart || domElement.selectionStart === 0) {
var startPos = domElement.selectionStart;
var endPos = domElement.selectionEnd;
var scrollTop = domElement.scrollTop;
domElement.value = domElement.value.substring(0, startPos) + val + domElement.value.substring(endPos, domElement.value.length);
domElement.focus();
domElement.selectionStart = startPos + val.length;
domElement.selectionEnd = startPos + val.length;
domElement.scrollTop = scrollTop;
} else {
domElement.value += val;
domElement.focus();
}
});
}
}
}]);
$scope.insertValue = function(value, type) {
$rootScope.$broadcast('add', value);
//$scope.model.userApprovalMessage = $scope.model.userApprovalMessage + " " + value;
$scope.model.userApprovalMsgLength = 300 - parseFloat($scope.model.userApprovalMessage.length);
};
<div class="btn-group" style="float: left; margin-left: 5px;">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ng-class="model.webPageSkin3">Insert Tag</button>
<ul class="action-dropdown dropdown-menu ">
<li ng-click="insertValue('$Name')"><a>$Name</a></li>
<li ng-click="insertValue('$Groupz')"><a>$Groupz</a></li>
</ul>
</div> <br>
<br>
<div class="row">
<textarea class="compose-msg-area form-control compose-textarea" style="border: 1px solid #ddd; white-space: pre-wrap; margin-left: 20px;" ng-model="model.userApprovalMessage" placeholder="Text Message" maxlength="300" ng-change="userApprovalMessageLength(model.userApprovalMessage)"
my-text="">
</textarea>
</div>
<div class="row">
<div class="col-sm-3"><input type="text" class="form-control" numbers-only disabled style="border: 1px solid #ddd; width: 40px; background-color: #fff; padding: 5px; height: 30px; margin-top: -20px; font-weight: 600; margin-left: 5px;" ng-model="model.userApprovalMsgLength">
<label class="pull-right text-left1" for="street">text left</label>
</div>
</div>
I need to display the $scope.model.userApprovalMessage length. When I try to insert $Name at cursor pointer. I am able to add but the model value is not changing.

WYSIYG Editor won't fit inside Modal

I'm using bootstrap to make a website and then I surfed the net for a WYSIWYG editor that's compatible with Bootstrap and I found one here that I really like. So I tried to incorporate it into my modal window but it doesn't quite work as it's supposed to.
When I press the Activity Description tab, it looks like this:
It's like it ignores the boundaries of the Modal completely.
I don't quite understand this behaviour. The styling:
#editor {
max-height: 250px;
height: 150px;
background-color: white;
border-collapse: separate;
border: 1px solid rgb(204, 204, 204);
padding: 4px;
/*box-sizing: content-box; */
-webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
border-top-right-radius: 3px; border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px; border-top-left-radius: 3px;
overflow: scroll;
outline: none;
}
div[data-role="editor-toolbar"] {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.dropdown-menu a {
cursor: pointer;
}
The Javascript:
/* http://github.com/mindmup/bootstrap-wysiwyg */
/*global jQuery, $, FileReader*/
/*jslint browser:true*/
(function ($) {
'use strict';
var readFileIntoDataUrl = function (fileInfo) {
var loader = $.Deferred(),
fReader = new FileReader();
fReader.onload = function (e) {
loader.resolve(e.target.result);
};
fReader.onerror = loader.reject;
fReader.onprogress = loader.notify;
fReader.readAsDataURL(fileInfo);
return loader.promise();
};
$.fn.cleanHtml = function () {
var html = $(this).html();
return html && html.replace(/(<br>|\s|<div><br><\/div>| )*$/, '');
};
$.fn.wysiwyg = function (userOptions) {
var editor = this,
selectedRange,
options,
toolbarBtnSelector,
updateToolbar = function () {
if (options.activeToolbarClass) {
$(options.toolbarSelector).find(toolbarBtnSelector).each(function () {
var command = $(this).data(options.commandRole);
if (document.queryCommandState(command)) {
$(this).addClass(options.activeToolbarClass);
} else {
$(this).removeClass(options.activeToolbarClass);
}
});
}
},
execCommand = function (commandWithArgs, valueArg) {
var commandArr = commandWithArgs.split(' '),
command = commandArr.shift(),
args = commandArr.join(' ') + (valueArg || '');
document.execCommand(command, 0, args);
updateToolbar();
},
bindHotkeys = function (hotKeys) {
$.each(hotKeys, function (hotkey, command) {
editor.keydown(hotkey, function (e) {
if (editor.attr('contenteditable') && editor.is(':visible')) {
e.preventDefault();
e.stopPropagation();
execCommand(command);
}
}).keyup(hotkey, function (e) {
if (editor.attr('contenteditable') && editor.is(':visible')) {
e.preventDefault();
e.stopPropagation();
}
});
});
},
getCurrentRange = function () {
var sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
return sel.getRangeAt(0);
}
},
saveSelection = function () {
selectedRange = getCurrentRange();
},
restoreSelection = function () {
var selection = window.getSelection();
if (selectedRange) {
try {
selection.removeAllRanges();
} catch (ex) {
document.body.createTextRange().select();
document.selection.empty();
}
selection.addRange(selectedRange);
}
},
insertFiles = function (files) {
editor.focus();
$.each(files, function (idx, fileInfo) {
if (/^image\//.test(fileInfo.type)) {
$.when(readFileIntoDataUrl(fileInfo)).done(function (dataUrl) {
execCommand('insertimage', dataUrl);
}).fail(function (e) {
options.fileUploadError("file-reader", e);
});
} else {
options.fileUploadError("unsupported-file-type", fileInfo.type);
}
});
},
markSelection = function (input, color) {
restoreSelection();
if (document.queryCommandSupported('hiliteColor')) {
document.execCommand('hiliteColor', 0, color || 'transparent');
}
saveSelection();
input.data(options.selectionMarker, color);
},
bindToolbar = function (toolbar, options) {
toolbar.find(toolbarBtnSelector).click(function () {
restoreSelection();
editor.focus();
execCommand($(this).data(options.commandRole));
saveSelection();
});
toolbar.find('[data-toggle=dropdown]').click(restoreSelection);
toolbar.find('input[type=text][data-' + options.commandRole + ']').on('webkitspeechchange change', function () {
var newValue = this.value; /* ugly but prevents fake double-calls due to selection restoration */
this.value = '';
restoreSelection();
if (newValue) {
editor.focus();
execCommand($(this).data(options.commandRole), newValue);
}
saveSelection();
}).on('focus', function () {
var input = $(this);
if (!input.data(options.selectionMarker)) {
markSelection(input, options.selectionColor);
input.focus();
}
}).on('blur', function () {
var input = $(this);
if (input.data(options.selectionMarker)) {
markSelection(input, false);
}
});
toolbar.find('input[type=file][data-' + options.commandRole + ']').change(function () {
restoreSelection();
if (this.type === 'file' && this.files && this.files.length > 0) {
insertFiles(this.files);
}
saveSelection();
this.value = '';
});
},
initFileDrops = function () {
editor.on('dragenter dragover', false)
.on('drop', function (e) {
var dataTransfer = e.originalEvent.dataTransfer;
e.stopPropagation();
e.preventDefault();
if (dataTransfer && dataTransfer.files && dataTransfer.files.length > 0) {
insertFiles(dataTransfer.files);
}
});
};
options = $.extend({}, $.fn.wysiwyg.defaults, userOptions);
toolbarBtnSelector = 'a[data-' + options.commandRole + '],button[data-' + options.commandRole + '],input[type=button][data-' + options.commandRole + ']';
bindHotkeys(options.hotKeys);
if (options.dragAndDropImages) {
initFileDrops();
}
bindToolbar($(options.toolbarSelector), options);
editor.attr('contenteditable', true)
.on('mouseup keyup mouseout', function () {
saveSelection();
updateToolbar();
});
$(window).bind('touchend', function (e) {
var isInside = (editor.is(e.target) || editor.has(e.target).length > 0),
currentRange = getCurrentRange(),
clear = currentRange && (currentRange.startContainer === currentRange.endContainer && currentRange.startOffset === currentRange.endOffset);
if (!clear || isInside) {
saveSelection();
updateToolbar();
}
});
return this;
};
$.fn.wysiwyg.defaults = {
hotKeys: {
'ctrl+b meta+b': 'bold',
'ctrl+i meta+i': 'italic',
'ctrl+u meta+u': 'underline',
'ctrl+z meta+z': 'undo',
'ctrl+y meta+y meta+shift+z': 'redo',
'ctrl+l meta+l': 'justifyleft',
'ctrl+r meta+r': 'justifyright',
'ctrl+e meta+e': 'justifycenter',
'ctrl+j meta+j': 'justifyfull',
'shift+tab': 'outdent',
'tab': 'indent'
},
toolbarSelector: '[data-role=editor-toolbar]',
commandRole: 'edit',
activeToolbarClass: 'btn-info',
selectionMarker: 'edit-focus-marker',
selectionColor: 'darkgrey',
dragAndDropImages: true,
fileUploadError: function (reason, detail) { console.log("File upload error", reason, detail); }
};
}(window.jQuery));
The HTML:
<div class="form-group">
<!-- WYSIWYG Editor Start -->
<div class="form-control">
<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" title data-original-title="Font">
<span class="fa fa-font">A</span>
<b class="caret"></b>
</a>
<ul class="dropdown-menu" id="font-dropdown">
<li>
<a data-edit="fontName Serif" style="font-family:'Serif'">Serif</a>
</li>
<!-- other fonts...omitted to short the amount of text to read -->
</ul>
</div>
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown"
title="" data-original-title="Font Size">
<span class="fa fa-text-height"></span> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a data-edit="fontSize 5"><font size="5">Huge</font></a>
</li>
<li>
<a data-edit="fontSize 3"><font size="3">Normal</font></a>
</li>
<li>
<a data-edit="fontSize 1"><font size="1">Small</font></a>
</li>
</ul>
</div>
<div class="btn-group">
<a class="btn" data-edit="bold" title="" data-original-title="Bold (Ctrl/Cmd+B)"><span class="fa fa-bold"></span></a>
<a class="btn" data-edit="italic" title="" data-original-title="Italic (Ctrl/Cmd+I)"><span class="fa fa-italic"></span></a>
<a class="btn" data-edit="strikethrough" title="" data-original-title="Strikethrough"><span class="fa fa-strikethrough"></span></a>
<a class="btn" data-edit="underline" title="" data-original-title="Underline (Ctrl/Cmd+U)"><span class="fa fa-underline"></span></a>
</div>
<div class="btn-group">
<a class="btn" data-edit="insertunorderedlist" title="" data-original-title="Bullet list"><span class="fa fa-list"></span></a>
<a class="btn" data-edit="insertorderedlist" title="" data-original-title="Number list"><span class="fa fa-list-ol"></span></a>
<!-- TODO: Find an Indent Left Icon -->
<a class="btn" data-edit="outdent" title="" data-original-title="Reduce indent (Shift+Tab)"><span class="fa fa-arrow-left"></span></a>
<a class="btn" data-edit="indent" title="" data-original-title="Indent (Tab)"><span class="fa fa-indent"></span></a>
</div>
<div class="btn-group">
<a class="btn btn-info" data-edit="justifyleft" title="" data-original-title="Align Left (Ctrl/Cmd+L)"><span class="fa fa-align-left"></span></a>
<a class="btn" data-edit="justifycenter" title="" data-original-title="Center (Ctrl/Cmd+E)"><span class="fa fa-align-center"></span></a>
<a class="btn" data-edit="justifyright" title="" data-original-title="Align Right (Ctrl/Cmd+R)"><span class="fa fa-align-right"></span></a>
<a class="btn" data-edit="justifyfull" title="" data-original-title="Justify (Ctrl/Cmd+J)"><span class="fa fa-align-justify"></span></a>
</div>
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" title="" data-original-title="Hyperlink"><span class="fa fa-link"></span></a>
<div class="dropdown-menu input-append">
<input class="span2" placeholder="URL" type="text" data-edit="createLink">
<button class="btn" type="button">Add</button>
</div>
<a class="btn" data-edit="unlink" title="" data-original-title="Remove Hyperlink"><span class="fa fa-cut"></span></a>
</div>
<div class="btn-group">
<a class="btn" title="" id="pictureBtn" data-original-title="Insert picture (or just drag & drop)"><span class="fa fa-picture-o"></span></a>
<input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" style="opacity: 0; position: absolute; top: 0px; left: 0px; width: 37px; height: 30px;">
</div>
<div class="btn-group">
<a class="btn" data-edit="undo" title="" data-original-title="Undo (Ctrl/Cmd+Z)"><span class="fa fa-undo"></span></a>
<a class="btn" data-edit="redo" title="" data-original-title="Redo (Ctrl/Cmd+Y)"><span class="fa fa-repeat"></span></a>
</div>
</div>
<div id="editor" contenteditable="true"></div>
</div>
<!-- WYSIWYG Editor End -->
</div>
EDIT
I fixed the overflow problem where it appears on the wrong tab. It appears that the HTML had an "active" class on both the Activity Abstract and Description tabs.

Okay I fixed it myself. I switched out this element:
<div class="form-control">
For this:
<div class="form-group">