Develop Reference

How to target and display error message with data-error in JavaScript

I'de like to validate a form with data propriety data-error and data-error-visible. I want to display the error message only with JS and don't use anymore HTML codes to do it.
The current code I use is below and I left only the first input :
/******
*
FORM VALIDATION
*
******/
// DOM
const formData = document.querySelectorAll(".formData");
const form = document.getElementById("form");
const firstName = document.getElementById("firstName");
const lastName = document.getElementById("lastName");
const email = document.getElementById("email");
const birthdate = document.getElementById("birthdate");
const quantity = document.getElementById("quantity");
const tournament = document.getElementsByName("location");
const checkbox = document.getElementsByName("checkbox");
// form preventDefault + checkInputs function
form.addEventListener('submit', e => {
e.preventDefault();
});
/***********
*
DATA-ATTRIBUTE
*
************/
// set error message to "true"
const displayErrorMsg = (element, message) => {
const formData = element
formData.setAttribute("data-error", message)
formData.setAttribute("data-error-visible", true)
}
// Function for remove one error msg
const removeErrorMsg = (element) => {
const formData = element
formData.removeAttribute('data-error')
formData.removeAttribute('data-error-visible')
}
/***********
*
* VALIDATION FUNCTION
*
************/
function validate(formData) {
let isFormValid = true;
// Regex
const nameRegex = /[a-zA-Z]+/i;
// First name
if (firstName.value.match(nameRegex) || firstName.value.length < 2) {
isFormValid = false;
displayErrorMsg(firstName);
} else {
removeErrorMsg(firstName);
}
}
:root {
--font-default: "DM Sans", Arial, Helvetica, sans-serif;
--font-slab: var(--font-default);
--modal-duration: 0.8s;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Landing Page */
body {
margin: 0;
display: flex;
flex-direction: column;
font-family: var(--font-default);
font-size: 18px;
max-width: 1300px;
margin: 0 auto;
}
p {
margin-bottom: 0;
padding: 0.5vw;
}
img {
padding-right: 1rem;
}
.topnav {
overflow: hidden;
margin: 3.5%;
}
.header-logo {
float: left;
}
.main-navbar {
float: right;
}
.topnav a {
float: left;
display: block;
color: #000000;
text-align: center;
padding: 12px 12px;
margin: 5px;
text-decoration: none;
font-size: 20px;
font-family: Roboto, sans-serif;
}
.topnav a:hover {
background-color: #ff0000;
color: #ffffff;
border-radius: 15px;
}
.topnav a.active {
background-color: #ff0000;
color: #ffffff;
border-radius: 15px;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 768px) {
.topnav a {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 768px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
#media screen and (max-width: 540px) {
.topnav a {display: none;}
.topnav a.icon {
float: right;
display: block;
margin-top: -15px;
}
}
main {
font-size: 130%;
font-weight: bolder;
color: black;
padding-top: 0.5vw;
padding-left: 2vw;
padding-right: 2vw;
margin: 1px 20px 15px;
border-radius: 2rem;
text-align: justify;
}
.modal-btn {
font-size: 145%;
background: #fe142f;
display: flex;
margin: auto;
padding: 2em;
color: #fff;
padding: 0.75rem 2.5rem;
border-radius: 1rem;
cursor: pointer;
}
.modal-btn:hover {
background: #3876ac;
}
.footer {
margin: 20px;
padding: 10px;
font-family: var(--font-slab);
}
/* Modal form */
.button {
background: #fe142f;
margin-top: 0.5em;
padding: 1em;
color: #fff;
border-radius: 15px;
cursor: pointer;
font-size: 16px;
}
.button:hover {
background: #3876ac;
}
.smFont {
font-size: 16px;
}
.bground {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow: auto;
background-color: rgba(26, 39, 156, 0.4);
}
.content {
margin: 5% auto;
width: 100%;
max-width: 500px;
animation-name: modalopen;
animation-duration: var(--modal-duration);
background: #232323;
border-radius: 10px;
overflow: hidden;
position: relative;
color: #fff;
padding-top: 10px;
}
.modal-body {
padding: 15px 8%;
margin: 15px auto;
}
label {
font-family: var(--font-default);
font-size: 17px;
font-weight: normal;
display: inline-block;
margin-bottom: 11px;
}
input {
padding: 8px;
border: 0.8px solid #ccc;
outline: none;
}
.text-control {
margin: 0;
padding: 8px;
width: 100%;
border-radius: 8px;
font-size: 20px;
height: 48px;
}
.formData[data-error]::after {
content: attr(data-error);
font-size: 0.4em;
color: #e54858;
display: block;
margin-top: 7px;
margin-bottom: 7px;
text-align: right;
line-height: 0.3;
opacity: 0;
transition: 0.3s;
}
.formData[data-error-visible="true"]::after {
opacity: 1;
}
.formData[data-error-visible="true"] .text-control {
border: 2px solid #e54858;
}
/*
input[data-error]::after {
content: attr(data-error);
font-size: 0.4em;
color: red;
} */
.checkbox-label,
.checkbox2-label {
position: relative;
margin-left: 36px;
font-size: 12px;
font-weight: normal;
}
.checkbox-label .checkbox-icon,
.checkbox2-label .checkbox-icon {
display: block;
width: 20px;
height: 20px;
border: 2px solid #279e7a;
border-radius: 50%;
text-indent: 29px;
white-space: nowrap;
position: absolute;
left: -30px;
top: -1px;
transition: 0.3s;
}
.checkbox-label .checkbox-icon::after,
.checkbox2-label .checkbox-icon::after {
content: "";
width: 13px;
height: 13px;
background-color: #279e7a;
border-radius: 50%;
text-indent: 29px;
white-space: nowrap;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: 0.3s;
opacity: 0;
}
.checkbox-input {
display: none;
}
.checkbox-input:checked + .checkbox-label .checkbox-icon::after,
.checkbox-input:checked + .checkbox2-label .checkbox-icon::after {
opacity: 1;
}
.checkbox-input:checked + .checkbox2-label .checkbox-icon {
background: #279e7a;
}
.checkbox2-label .checkbox-icon {
border-radius: 4px;
border: 0;
background: #c4c4c4;
}
.checkbox2-label .checkbox-icon::after {
width: 7px;
height: 4px;
border-radius: 2px;
background: transparent;
border: 2px solid transparent;
border-bottom-color: #fff;
border-left-color: #fff;
transform: rotate(-55deg);
left: 21%;
top: 19%;
}
.close {
position: absolute;
right: 15px;
top: 15px;
width: 32px;
height: 32px;
opacity: 1;
cursor: pointer;
transform: scale(0.7);
}
.close:before,
.close:after {
position: absolute;
left: 15px;
content: " ";
height: 33px;
width: 3px;
background-color: #fff;
}
.close:before {
transform: rotate(45deg);
}
.close:after {
transform: rotate(-45deg);
}
.btn-submit,
.btn-signup {
background: #fe142f;
display: block;
margin: 0 auto;
border-radius: 7px;
font-size: 1rem;
padding: 12px 82px;
color: #fff;
cursor: pointer;
border: 0;
}
/* custom select styles */
.custom-select {
position: relative;
font-family: Arial;
font-size: 1.1rem;
font-weight: normal;
}
.custom-select select {
display: none;
}
.select-selected {
background-color: #fff;
}
/* Style the arrow inside the select element: */
.select-selected:after {
position: absolute;
content: "";
top: 10px;
right: 13px;
width: 11px;
height: 11px;
border: 3px solid transparent;
border-bottom-color: #f00;
border-left-color: #f00;
transform: rotate(-48deg);
border-radius: 5px 0 5px 0;
}
/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
transform: rotate(135deg);
top: 13px;
}
.select-items div,
.select-selected {
color: #000;
padding: 11px 16px;
border: 1px solid transparent;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
cursor: pointer;
border-radius: 8px;
height: 48px;
}
/* Style items (options): */
.select-items {
position: absolute;
background-color: #fff;
top: 89%;
left: 0;
right: 0;
z-index: 99;
}
/* Hide the items when the select box is closed: */
.select-hide {
display: none;
}
.select-items div:hover,
.same-as-selected {
background-color: rgba(0, 0, 0, 0.1);
}
/* custom select end */
.text-label {
font-weight: normal;
font-size: 16px;
}
.hero-section {
min-height: 93vh;
border-radius: 10px;
display: grid;
grid-template-columns: repeat(12, 1fr);
overflow: hidden;
box-shadow: 0 2px 7px 2px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
}
.hero-content {
padding: 51px 67px;
grid-column: span 4;
background: #232323;
color: #fff;
position: relative;
text-align: left;
min-width: 424px;
}
.hero-content::after {
content: "";
width: 100%;
height: 100%;
background: #232323;
position: absolute;
right: -80px;
top: 0;
}
.hero-content > * {
position: relative;
z-index: 1;
}
.hero-headline {
font-size: 6rem;
font-weight: normal;
white-space: nowrap;
}
.hero-text {
width: 146%;
font-weight: normal;
margin-top: 57px;
padding: 0;
}
.btn-signup {
outline: none;
text-transform: capitalize;
font-size: 1.3rem;
padding: 15px 23px;
margin: 0;
margin-top: 59px;
}
.hero-img {
grid-column: span 8;
}
.hero-img img {
width: 100%;
height: 100%;
display: block;
padding: 0;
}
.copyrights {
color: #fe142f;
padding: 0;
font-size: 1rem;
margin: 60px 0 30px;
font-weight: bolder;
}
.hero-section > .btn-signup {
display: none;
}
footer {
padding-left: 2vw;
padding-right: 2vw;
margin: 0 20px;
}
#media screen and (max-width: 800px) {
.hero-section {
display: block;
box-shadow: unset;
}
.hero-content {
background: #fff;
color: #000;
padding: 20px;
}
.hero-content::after {
content: unset;
}
.hero-content .btn-signup {
display: none;
}
.hero-headline {
font-size: 4.5rem;
white-space: normal;
}
.hero-text {
width: unset;
font-size: 1.5rem;
}
.hero-img img {
border-radius: 10px;
margin-top: 40px;
}
.hero-section > .btn-signup {
display: block;
margin: 32px auto 10px;
padding: 12px 35px;
}
.copyrights {
margin-top: 50px;
text-align: center;
}
}
#keyframes modalopen {
from {
opacity: 0;
transform: translateY(-150px);
}
to {
opacity: 1;
}
}
<form
id="form"
name="reserve"
action="index.html"
method="get"
>
<div class="formData">
<label for="firstName">Prénom</label><br>
<input
class="text-control"
type="text"
id="firstName"
name="first"
minlength="2"
required
/><br>
</div>
<input
class="btn-submit"
type="submit"
class="button"
value="C'est parti"
/>
</form>

How to add in the array an element toggled as active?

In this page a bunch of buttons (anchor element) has it own number (id), I have to select them and put into an array when they are toggled as active.
I've already created an array, the id from buttons are adding and they are all being printed, but I can't use this class ".active" instead of my normal class "btn_reservas".
How can I add / remove in my array only the selected numbers?
var controller = (function () {
var ctrlAddItem = function (event) {
console.log("It worked, pressed id = " + event.target.id);
event.target.classList.toggle("active");
};
document.querySelectorAll(".btn_reservas").forEach(function () {
this.addEventListener("click", ctrlAddItem);
});
document.addEventListener("keypress", function (event) {
if (event.keyCode === 13 || event.which === 13) {
ctrlAddItem();
}
});
var sum = 0;
var x = document.getElementsByClassName("btn_reservas");
// var x = document.getElementsByClassName("btn_reservas.active");
var numbers = [];
for (i=0; i < x.length; i++){
x[i].id;
numbers.push(', ' + x[i].id);
}
numbers.forEach(myFunction);
function myFunction(item) {
sum += item;
document.getElementById("demo").innerHTML = sum;
}
})();
body {
background-color: #ffffff;
}
h1 {
color: #999999;
align-content: center;
padding-left: 400px;
}
#menu {
background-color: #4682b4;
padding: 3px;
}
#menu ul {
text-align: center;
padding-left: 20%;
list-style: none;
}
#menu ul li {
display: inline;
}
#menu ul li a {
color: #ffffff;
/* padding-left: 5%; */
margin: 50px;
background-color: #4682b4;
font-size: xx-large;
text-decoration: none;
}
#menu ul li a:hover {
background-color: #b0c4de;
}
#Promocoes {
display: flex;
flex-direction: row;
}
#Promocoes img {
align-content: center;
padding: 25px;
}
#item {
text-align: center;
border-radius: 10px;
margin: 20px;
background-color: rgba(9, 50, 99, 0.35);
}
#item p {
font-size: 14px;
}
#item button {
background-color: #ffffff;
padding: 10px;
border-radius: 5px;
cursor: pointer;
border: none;
font-weight: bold;
}
#item button:hover {
background-color: #b0c4de;
}
/* Sobre Nos */
#historia {
margin-left: 200px;
margin-right: 200px;
font-size: 20px;
}
#historia img {
padding-left: 100px;
align-self: center;
}
/* SORTEIO */
.legenda ul li{
list-style: none;
display: inline-block;
font-weight: bolder;
margin-right: 1%;
margin-top: 5px;
margin-bottom: 10px;
}
.disponivel {
cursor: default;
background-color: #ffffff;
border: 2px #a9a9a9 solid;
border-radius: 5px;
padding: 8px;
}
.reservados {
cursor: not-allowed;
background-color: lightgreen;
border: 2px green solid;
color: #ffffff;
border-radius: 5px;
padding: 8px;
}
.pagos {
cursor: not-allowed;
background-color: lightsalmon;
border: 2px indianred solid;
color: #ffffff;
border-radius: 5px;
padding: 8px;
}
.enviar {
background-color: #4682b4;
cursor: pointer;
color: #ffffff;
border: #4682b4 solid;
border-radius: 5px;
padding: 8px;
}
.lista_sorteio {
margin-left: 200px;
margin-right: 200px;
font-size: 20px;
}
.lista ul li {
display: inline;
}
.lista ul li a {
display: block;
border: 2px solid #bfc0bf;
border-radius: 50%;
width: 100%;
line-height: 40px;
max-width: 75px;
height: auto;
font-weight: 700;
text-decoration: none;
display: inline;
box-sizing: border-box;
padding: 20px;
font-family: sans-serif;
font-size: 13px;
color: #ffffff;
background-color:rgb(85, 161, 108);
border-color: #212529;
margin-right: 50px;
}
.btn {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.lista ul li a:hover {
color: #212529;
background-color: #ffffff;
font:bolder;
transition: all 600ms ease;
}
.lista ul li a.active {
background-color: #f90;
}
<div class="lista">
<ul >
<li>
001
</li>
<li>
002
</li>
<li>
003
</li>
<li>
004
</li>
<li>
005
</li>
<li>
006
</li>
<li>
007
</li>
<li>
008
</li>
<li>
009
</li>
</ul>
</div>
</div>
<hr>
<p>Get the sum of the numbers in the array.</p>
<p id="demo"></p>
<hr>
</body>
</html>

You can still refer to .btn_reservas.active you just have to use querySelectorAll instead of getElementsByClassName.
This will still calculate sum, but it doesn't worry about the array as it just looks for elements with .btn_reservas.active.
var controller = (function() {
function calcSum(){
toggled = document.querySelectorAll(".btn_reservas.active");
sel =[];
toggled.forEach(function(el){
sel.push(el.getAttribute("id"));
});
document.getElementById("demo").innerHTML = sel.join(", ");
}
var ctrlAddItem = function(event) {
console.log("It worked, pressed id = " + event.target.id);
event.target.classList.toggle("active");
calcSum();
};
document.querySelectorAll(".btn_reservas").forEach(function() {
this.addEventListener("click", ctrlAddItem);
});
document.addEventListener("keypress", function(event) {
if (event.keyCode === 13 || event.which === 13) {
ctrlAddItem();
}
});
})();
body {
background-color: #ffffff;
}
h1 {
color: #999999;
align-content: center;
padding-left: 400px;
}
#menu {
background-color: #4682b4;
padding: 3px;
}
#menu ul {
text-align: center;
padding-left: 20%;
list-style: none;
}
#menu ul li {
display: inline;
}
#menu ul li a {
color: #ffffff;
/* padding-left: 5%; */
margin: 50px;
background-color: #4682b4;
font-size: xx-large;
text-decoration: none;
}
#menu ul li a:hover {
background-color: #b0c4de;
}
#Promocoes {
display: flex;
flex-direction: row;
}
#Promocoes img {
align-content: center;
padding: 25px;
}
#item {
text-align: center;
border-radius: 10px;
margin: 20px;
background-color: rgba(9, 50, 99, 0.35);
}
#item p {
font-size: 14px;
}
#item button {
background-color: #ffffff;
padding: 10px;
border-radius: 5px;
cursor: pointer;
border: none;
font-weight: bold;
}
#item button:hover {
background-color: #b0c4de;
}
/* Sobre Nos */
#historia {
margin-left: 200px;
margin-right: 200px;
font-size: 20px;
}
#historia img {
padding-left: 100px;
align-self: center;
}
/* SORTEIO */
.legenda ul li {
list-style: none;
display: inline-block;
font-weight: bolder;
margin-right: 1%;
margin-top: 5px;
margin-bottom: 10px;
}
.disponivel {
cursor: default;
background-color: #ffffff;
border: 2px #a9a9a9 solid;
border-radius: 5px;
padding: 8px;
}
.reservados {
cursor: not-allowed;
background-color: lightgreen;
border: 2px green solid;
color: #ffffff;
border-radius: 5px;
padding: 8px;
}
.pagos {
cursor: not-allowed;
background-color: lightsalmon;
border: 2px indianred solid;
color: #ffffff;
border-radius: 5px;
padding: 8px;
}
.enviar {
background-color: #4682b4;
cursor: pointer;
color: #ffffff;
border: #4682b4 solid;
border-radius: 5px;
padding: 8px;
}
.lista_sorteio {
margin-left: 200px;
margin-right: 200px;
font-size: 20px;
}
.lista ul li {
display: inline;
}
.lista ul li a {
display: block;
border: 2px solid #bfc0bf;
border-radius: 50%;
width: 100%;
line-height: 40px;
max-width: 75px;
height: auto;
font-weight: 700;
text-decoration: none;
display: inline;
box-sizing: border-box;
padding: 20px;
font-family: sans-serif;
font-size: 13px;
color: #ffffff;
background-color: rgb(85, 161, 108);
border-color: #212529;
margin-right: 50px;
}
.btn {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.lista ul li a:hover {
color: #212529;
background-color: #ffffff;
font: bolder;
transition: all 600ms ease;
}
.lista ul li a.active {
background-color: #f90;
}
<div class="lista">
<ul>
<li>
001
</li>
<li>
002
</li>
<li>
003
</li>
<li>
004
</li>
<li>
005
</li>
<li>
006
</li>
<li>
007
</li>
<li>
008
</li>
<li>
009
</li>
</ul>
</div>
</div>
<hr>
<p>Get the sum of the numbers in the array.</p>
<p id="demo"></p>
<hr>
</body>
</html>

Getting JSON from URL and then display results in accordion using Javascript

I have created an accordion which I would like to populate using JSON from this link : http://design.propcom.co.uk/buildtest/accordion-data.json
Here is my html:
<div class="accordion js-accordion">
<div class="accordion__item js-accordion-item active">
<div class="accordion-header js-accordion-header"></div>
<div class="accordion-body js-accordion-body" >
<div class="accordion-body__contents" ></div>
</div><!-- end of accordion body -->
</div><!-- end of accordion item -->
<div class="accordion__item js-accordion-item ">
<div class="accordion-header js-accordion-header"></div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents"></div>
</div>
</div>
<div class="accordion__item js-accordion-item">
<div class="accordion-header js-accordion-header"></div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents"></div>
</div>
</div>
</div><!-- end of accordion -->
I am trying to populate the accordion-header js-accordion-header div with the "heading" data from the JSON file and accordion-body__contents with the "contents" data.
This is as far as I have got with the Javascript part:
$.ajax({
url: 'http://design.propcom.co.uk/buildtest/accordion-data.json',
type: 'GET',
dataType: 'JSON',
success: function (data) {
$.each(data.blocks, function(index, element) {
$(".accordion-header").append("<div>" + element.heading + "</div>");
$(".accordion-body__contents").append("<div>" + element.content + "</div>");
});
}
});
Any help would be greatly appreciated as I feel like I've hit a wall with my current efforts.

There are a few issues here:
We're a bit off when handling the AJAX results
Use the data.blocks property and while looping use the element variable.
As #Danny suggested we have extra AJAX properties
Remove the callback and data properties.
Lastly your html seems over complicated
After seeing the css from your demo site, I was able to include it and remove the JQueryUI thought. Now be sure to append the entire accordion__item element.
With these problems ironed out it should look similar to this:
$.ajax({
url: 'https://design.propcom.co.uk/buildtest/accordion-data.json',
type: 'GET',
dataType: 'JSON',
success: function (data) {
$.each(data.blocks, function(index, element) {
$(".accordion")
.append(`<div class="accordion__item js-accordion-item ">
<div class="accordion-header js-accordion-header">${element.heading}</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">${element.content}</div>
</div>
</div>`);
});
var accordion = (function(){
var $accordion = $('.js-accordion');
var $accordion_header = $accordion.find('.js-accordion-header');
var $accordion_item = $('.js-accordion-item');
// default settings
var settings = {
// animation speed
speed: 400,
// close all other accordion items if true
oneOpen: false
};
return {
// pass configurable object literal
init: function($settings) {
$accordion_header.on('click', function() {
accordion.toggle($(this));
});
$.extend(settings, $settings);
// ensure only one accordion is active if oneOpen is true
if(settings.oneOpen && $('.js-accordion-item.active').length > 1) {
$('.js-accordion-item.active:not(:first)').removeClass('active');
}
// reveal the active accordion bodies
$('.js-accordion-item.active').find('> .js-accordion-body').show();
},
toggle: function($this) {
if(settings.oneOpen && $this[0] != $this.closest('.js-accordion').find('> .js-accordion-item.active > .js-accordion-header')[0]) {
$this.closest('.js-accordion')
.find('> .js-accordion-item')
.removeClass('active')
.find('.js-accordion-body')
.slideUp()
}
// show/hide the clicked accordion item
$this.closest('.js-accordion-item').toggleClass('active');
$this.next().stop().slideToggle(settings.speed);
}
}
})();
$(document).ready(function(){accordion.init({ speed: 300, oneOpen: true });});
}
});
body {
font-size: 62.5%;
background: #ffffff;
font-family: 'Open Sans', sans-serif;
line-height: 2;
padding: 5em;
}
.accordion {
font-size: 1rem;
width: 30vw;
margin: 0 auto;
border-radius: 5px;
}
.accordion-header,
.accordion-body {
background: white;
}
.accordion-header {
padding: 1.5em 1.5em;
margin-bottom:6px;
box-shadow: 0px 4px #6F277D;
background: #9E38B0;
text-transform: uppercase;
color: white;
cursor: pointer;
font-size: .8em;
letter-spacing: .1em;
transition: all .3s;
}
.accordion-header:hover {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
position: relative;
z-index: 5;
}
.accordion-body {
background: #fcfcfc;
color: #3f3c3c;
display: none;
}
.accordion-body__contents {
padding: 1.5em 1.5em;
font-size: .85em;
}
.accordion__item.active:last-child .accordion-header {
border-radius: none;
}
.accordion:first-child > .accordion__item > .accordion-header {
border-bottom: 1px solid transparent;
}
.accordion__item > .accordion-header:after {
content: "\f3d0";
font-family: IonIcons;
font-size: 1.2em;
float: right;
position: relative;
top: -2px;
transition: .3s all;
transform: rotate(0deg);
}
.accordion__item.active > .accordion-header:after {
transform: rotate(-180deg);
}
.accordion__item.active .accordion-header {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
}
.accordion__item .accordion__item .accordion-header {
background: #f1f1f1;
color: black;
}
#media screen and (max-width: 1000px) {
body {
padding: 1em;
}
.accordion {
width: 100%;
}
}body {
font-size: 62.5%;
background: #ffffff;
font-family: 'Open Sans', sans-serif;
line-height: 2;
padding: 5em;
}
.accordion {
font-size: 1rem;
width: 30vw;
margin: 0 auto;
border-radius: 5px;
}
.accordion-header,
.accordion-body {
background: white;
}
.accordion-header {
padding: 1.5em 1.5em;
margin-bottom:6px;
box-shadow: 0px 4px #6F277D;
background: #9E38B0;
text-transform: uppercase;
color: white;
cursor: pointer;
font-size: .8em;
letter-spacing: .1em;
transition: all .3s;
}
.accordion-header:hover {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
position: relative;
z-index: 5;
}
.accordion-body {
background: #fcfcfc;
color: #3f3c3c;
display: none;
}
.accordion-body__contents {
padding: 1.5em 1.5em;
font-size: .85em;
}
.accordion__item.active:last-child .accordion-header {
border-radius: none;
}
.accordion:first-child > .accordion__item > .accordion-header {
border-bottom: 1px solid transparent;
}
.accordion__item > .accordion-header:after {
content: "\f3d0";
font-family: IonIcons;
font-size: 1.2em;
float: right;
position: relative;
top: -2px;
transition: .3s all;
transform: rotate(0deg);
}
.accordion__item.active > .accordion-header:after {
transform: rotate(-180deg);
}
.accordion__item.active .accordion-header {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
}
.accordion__item .accordion__item .accordion-header {
background: #f1f1f1;
color: black;
}
#media screen and (max-width: 1000px) {
body {
padding: 1em;
}
.accordion {
width: 100%;
}
}body {
font-size: 62.5%;
background: #ffffff;
font-family: 'Open Sans', sans-serif;
line-height: 2;
padding: 5em;
}
.accordion {
font-size: 1rem;
width: 30vw;
margin: 0 auto;
border-radius: 5px;
}
.accordion-header,
.accordion-body {
background: white;
}
.accordion-header {
padding: 1.5em 1.5em;
margin-bottom:6px;
box-shadow: 0px 4px #6F277D;
background: #9E38B0;
text-transform: uppercase;
color: white;
cursor: pointer;
font-size: .8em;
letter-spacing: .1em;
transition: all .3s;
}
.accordion-header:hover {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
position: relative;
z-index: 5;
}
.accordion-body {
background: #fcfcfc;
color: #3f3c3c;
display: none;
}
.accordion-body__contents {
padding: 1.5em 1.5em;
font-size: .85em;
}
.accordion__item.active:last-child .accordion-header {
border-radius: none;
}
.accordion:first-child > .accordion__item > .accordion-header {
border-bottom: 1px solid transparent;
}
.accordion__item > .accordion-header:after {
content: "\f3d0";
font-family: IonIcons;
font-size: 1.2em;
float: right;
position: relative;
top: -2px;
transition: .3s all;
transform: rotate(0deg);
}
.accordion__item.active > .accordion-header:after {
transform: rotate(-180deg);
}
.accordion__item.active .accordion-header {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
}
.accordion__item .accordion__item .accordion-header {
background: #f1f1f1;
color: black;
}
#media screen and (max-width: 1000px) {
body {
padding: 1em;
}
.accordion {
width: 100%;
}
}body {
font-size: 62.5%;
background: #ffffff;
font-family: 'Open Sans', sans-serif;
line-height: 2;
padding: 5em;
}
.accordion {
font-size: 1rem;
width: 30vw;
margin: 0 auto;
border-radius: 5px;
}
.accordion-header,
.accordion-body {
background: white;
}
.accordion-header {
padding: 1.5em 1.5em;
margin-bottom:6px;
box-shadow: 0px 4px #6F277D;
background: #9E38B0;
text-transform: uppercase;
color: white;
cursor: pointer;
font-size: .8em;
letter-spacing: .1em;
transition: all .3s;
}
.accordion-header:hover {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
position: relative;
z-index: 5;
}
.accordion-body {
background: #fcfcfc;
color: #3f3c3c;
display: none;
}
.accordion-body__contents {
padding: 1.5em 1.5em;
font-size: .85em;
}
.accordion__item.active:last-child .accordion-header {
border-radius: none;
}
.accordion:first-child > .accordion__item > .accordion-header {
border-bottom: 1px solid transparent;
}
.accordion__item > .accordion-header:after {
content: "\f3d0";
font-family: IonIcons;
font-size: 1.2em;
float: right;
position: relative;
top: -2px;
transition: .3s all;
transform: rotate(0deg);
}
.accordion__item.active > .accordion-header:after {
transform: rotate(-180deg);
}
.accordion__item.active .accordion-header {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
}
.accordion__item .accordion__item .accordion-header {
background: #f1f1f1;
color: black;
}
#media screen and (max-width: 1000px) {
body {
padding: 1em;
}
.accordion {
width: 100%;
}
}body {
font-size: 62.5%;
background: #ffffff;
font-family: 'Open Sans', sans-serif;
line-height: 2;
padding: 5em;
}
.accordion {
font-size: 1rem;
width: 30vw;
margin: 0 auto;
border-radius: 5px;
}
.accordion-header,
.accordion-body {
background: white;
}
.accordion-header {
padding: 1.5em 1.5em;
margin-bottom:6px;
box-shadow: 0px 4px #6F277D;
background: #9E38B0;
text-transform: uppercase;
color: white;
cursor: pointer;
font-size: .8em;
letter-spacing: .1em;
transition: all .3s;
}
.accordion-header:hover {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
position: relative;
z-index: 5;
}
.accordion-body {
background: #fcfcfc;
color: #3f3c3c;
display: none;
}
.accordion-body__contents {
padding: 1.5em 1.5em;
font-size: .85em;
}
.accordion__item.active:last-child .accordion-header {
border-radius: none;
}
.accordion:first-child > .accordion__item > .accordion-header {
border-bottom: 1px solid transparent;
}
.accordion__item > .accordion-header:after {
content: "\f3d0";
font-family: IonIcons;
font-size: 1.2em;
float: right;
position: relative;
top: -2px;
transition: .3s all;
transform: rotate(0deg);
}
.accordion__item.active > .accordion-header:after {
transform: rotate(-180deg);
}
.accordion__item.active .accordion-header {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
}
.accordion__item .accordion__item .accordion-header {
background: #f1f1f1;
color: black;
}
#media screen and (max-width: 1000px) {
body {
padding: 1em;
}
.accordion {
width: 100%;
}
}/* CSS Document */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion js-accordion">
</div>
After skimming your demo, I've included your CSS into my example.

Can't get AJAX POST request formatted correctly

No matter what I do, I keep getting 500 (Internal Server Errors) when attempting to perform a POST to https://rates.tradelanes.us/bankaccount/record/create. I believe its the format of my data, but when I compare what my output is to others trying the same thing--my data format is identical; others are not getting the 500 error, so it must be how my data is formatted. The only documentation I have with the API is https://rates.tradelanes.us/bankaccount/help/api--so not much more to go on.
Here is the error I'm getting.. If you wanted to see what a sample record looks like:
{"Id":1,"Memo":"Sample Record","Amount":10.00,"TransactionDate":"\/Date(1503500694627)\/","Account":1,"Transaction":0}
Here is my code:
$(document).ready(function() {
var table_records = $("#table_records").dataTable({
"processing": true,
"ajax": {
"url": "https://rates.tradelanes.us/bankaccount/records",
dataSrc: ""
},
"columns": [{
"data": "Id"
}, {
"data": "Memo"
}, {
"data": "Amount"
}, {
"data": "TransactionDate"
}, {
"data": "Account"
}, {
"data": "Transaction"
}]
});
//Show popup for creating new record
function show_lightbox() {
$(".lightbox_bg").show();
$(".lightbox_container").show();
}
//Hide popup for creating new record
function hide_lightbox() {
$(".lightbox_bg").hide();
$(".lightbox_container").hide();
}
//Clicking the "Close" button or outside of the lightbox should close the lightbox
$(document).on("click", ".lightbox_bg", function() {
hide_lightbox();
});
$(document).on("click", ".lightbox_close", function() {
hide_lightbox();
});
//Handle clicking the "Create" button
$(document).on("click", "#createButton", function(e) {
e.preventDefault();
$(".lightbox_content h2").text("Create record");
$("#form_create button").text("Create record");
$("#form_create").attr("class", "form add");
$("#form_create").attr("data-id", "");
$("#form_create .field_container").removeClass("valid").removeClass("error");
$("#form_create #id").val("");
$("#form_create #memo").val("");
$("#form_create #amount").val("");
$("#form_create #transactiondate").val("");
$("#form_create #account").val("");
$("#form_create #transaction").val("");
show_lightbox();
});
function getFormData($form) {
var unindexed_array = $form.serializeArray();
var indexed_array = {};
$.map(unindexed_array, function(n, i) {
indexed_array[n['name']] = n['value'];
});
return indexed_array;
}
//Handle form submission
$(document).on("submit", "#form_create.add", function(e) {
e.preventDefault();
hide_lightbox();
var $form = $("#form_create");
var form_data = getFormData($form);
console.log(form_data);
var req = $.ajax({
url: "https://rates.tradelanes.us/bankaccount/record/create",
cache: false,
data: form_data,
dataType: "application/json",
contentType: "application/json; charset=utf-8",
type: "post"
});
req.done(function(out) {
if (out.result == "success") {
table_records.api().ajax.reload(function() {
alert("Record added successfully");
}, true);
} else {
alert("Record failed to be created");
}
});
req.fail(function(jqXHR, textStatus, errorThrown) {
console.log(jqXHR.statusText);
console.log(textStatus);
console.log(errorThrown);
});
});
});
html {
font-size: 14px;
overflow-y: scroll;
overflow-x: auto;
}
body {
background-color: #ddd;
font-family: Arial, Helvetica, sans-serif;
font-size: 1rem;
text-align: left;
color: #666;
}
/* General -------------------------------------------------------------------------------------- */
* {
padding: 0;
border: 0;
outline: 0;
margin: 0;
}
h1,
h2 {
font-weight: normal;
font-size: 1rem;
}
a {
cursor: pointer;
-webkit-transition: all 0.2s ease 0s;
-moz-transition: all 0.2s ease 0s;
-o-transition: all 0.2s ease 0s;
transition: all 0.2s ease 0s;
}
ul {
list-style-type: none;
}
table {
border-collapse: collapse;
}
table th,
table td {
font-weight: normal;
text-align: left;
vertical-align: middle;
}
label {
cursor: pointer;
}
input,
button,
select {
background-color: transparent;
font-family: 'Oxygen', Arial, Helvetica, sans-serif;
font-size: 1rem;
color: #666;
}
button,
select {
cursor: pointer;
}
button {
-webkit-transition: all 0.2s ease 0s;
-moz-transition: all 0.2s ease 0s;
-o-transition: all 0.2s ease 0s;
transition: all 0.2s ease 0s;
}
select {
-webkit-appearance: none;
}
input[type=text],
input[type=number],
input[type=email],
input[type=url],
input[type=password],
input[type=date],
input[type=search],
input[type=tel] {
-webkit-appearance: none;
}
input[type=number] {
-moz-appearance: textfield;
}
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input::-webkit-outer-spin-button {
-webkit-appearance: none;
}
input[type=search] {
-webkit-appearance: none;
-webkit-border-radius: 0;
}
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
display: none;
}
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
/* Page container ------------------------------------------------------------------------------- */
#page_container {
width: 980px;
padding: 40px 5px 55px 5px;
margin: 0 auto 0 auto;
}
/* Header --------------------------------------------------------------------------------------- */
h1 {
font-weight: 700;
font-size: 2.2rem;
color: black;
font-family: monospace;
margin: 0 0 25px 0;
}
button.button {
height: 35px;
display: inline-block;
background-color: #999;
font-weight: 700;
text-transform: uppercase;
color: #fff;
padding: 0 15px 0 15px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin: 0 0 25px 0;
}
button.button:hover,
button.button:active {
background-color: #333;
}
/* Datatable ------------------------------------------------------------------------------------ */
.dataTables_wrapper {
position: relative;
padding: 50px 0 50px 0;
}
.dataTables_length {
width: auto;
height: 30px;
position: absolute;
top: 0;
left: 0;
padding: 0 110px 0 0;
}
.dataTables_length label {
line-height: 30px;
margin: 0;
}
.dataTables_length select {
width: 100px;
height: 30px;
position: absolute;
top: 0;
right: 0;
background-color: #fff;
color: #666;
padding: 0 50px 0 10px;
border: 1px solid #ccc;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin: 0;
}
.dataTables_length:after {
width: 30px;
height: 30px;
position: absolute;
top: 0;
right: 0;
background-color: #999;
font-family: 'FontAwesome', Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 1.2rem;
line-height: 30px;
text-align: center;
color: #fff;
content: '\f107';
pointer-events: none;
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.dataTables_length select::-ms-expand {
display: none;
}
.dataTables_filter {
position: absolute;
top: 0;
right: 0;
}
.dataTables_filter label {
line-height: 30px;
}
.dataTables_filter input {
width: 200px;
height: 30px;
display: inline-block;
background-color: #fff;
line-height: 30px;
color: #666;
padding: 0 0 0 10px;
border: 1px solid #ccc;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin: 0 0 0 10px;
}
.dataTables_filter input:focus {
background-color: #ffd;
}
.dataTables_paginate {
position: absolute;
bottom: 0;
left: 0;
}
.dataTables_paginate a {
width: 30px;
height: 30px;
float: left;
background-color: #999;
font-weight: normal;
line-height: 29px;
text-align: center;
color: #fff;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin: 0 10px 0 0;
}
.dataTables_paginate a.current,
.dataTables_paginate a:hover,
.dataTables_paginate a:active,
.dataTables_paginate a:focus {
background-color: #333;
}
.dataTables_paginate a.previous,
.dataTables_paginate a.next {
font-family: 'FontAwesome', Arial, Helvetica, sans-serif;
font-size: 1.2rem;
line-height: 30px;
}
.dataTables_paginate a.previous:before {
content: '\f104';
}
.dataTables_paginate a.next:before {
content: '\f105';
}
.dataTables_info {
position: absolute;
bottom: 0;
right: 0;
line-height: 30px;
}
table.datatable {
width: 100% !important;
line-height: 1.4rem;
}
table.datatable th,
table.datatable td {
background-color: #fff;
padding: 5px 10px 5px 10px;
border: 1px solid #ccc;
}
table.datatable thead th {
background-color: #999;
font-weight: bold;
text-transform: uppercase;
white-space: nowrap;
color: #fff;
padding-top: 7px;
padding-bottom: 8px;
}
table.datatable thead th.sorting,
table.datatable thead th.sorting_desc,
table.datatable thead th.sorting_asc {
cursor: pointer;
}
table.datatable thead th.sorting:active,
table.datatable thead th.sorting_desc:active,
table.datatable thead th.sorting_asc:active {
background-color: #333;
}
table.datatable tbody tr:nth-child(even) td {
background-color: #eee;
}
table.datatable tbody tr:hover th,
table.datatable tbody tr:hover td {
background-color: #ffd;
}
table.datatable tbody tr:hover td.dataTables_empty {
background-color: #fff;
}
table.datatable tbody td.company_name {
width: 100%;
}
table.datatable tbody td.integer {
text-align: right;
white-space: nowrap;
}
table.datatable tbody td.nowrap {
white-space: nowrap;
}
table.datatable tbody td.functions .function_buttons {
width: 70px;
height: 30px;
margin: 0 auto 0 auto;
}
table.datatable tbody td.functions .function_buttons li {
float: left;
padding: 0 10px 0 0;
}
table.datatable tbody td.functions .function_buttons li.function_delete {
padding: 0;
}
table.datatable tbody td.functions .function_buttons a {
width: 30px;
height: 30px;
display: inline-block;
background-color: #999;
font-family: 'FontAwesome', Arial, Helvetica, sans-serif;
font-weight: normal;
line-height: 29px;
text-align: center;
color: #fff;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
table.datatable tbody td.functions .function_buttons .function_edit a:before {
font-size: 1.1rem;
content: "\f040";
}
table.datatable tbody td.functions .function_buttons .function_delete a:before {
font-size: 1.2rem;
line-height: 30px;
content: "\f1f8";
}
table.datatable tbody td.functions .function_buttons a:hover,
table.datatable tbody td.functions .function_buttons a:active,
table.datatable tbody td.functions .function_buttons a:focus {
background-color: #333;
}
table.datatable tbody td.functions .function_buttons span {
display: none;
}
/* Lightbox ------------------------------------------------------------------------------------- */
.lightbox_bg {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background-color: #333;
background-color: rgba(0, 0, 0, 0.85);
cursor: pointer;
}
.lightbox_container {
display: none;
width: 80%;
height: 90%;
position: fixed;
top: 5%;
left: 10%;
z-index: 200;
background-color: #fff;
color: #666;
overflow-y: scroll;
overflow-x: auto;
padding: 50px 0 0 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.lightbox_close {
width: 35px;
height: 35px;
position: absolute;
top: 45px;
right: 45px;
font-family: 'FontAwesome', Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 20px;
line-height: 35px;
text-align: center;
color: #f70;
cursor: pointer;
border: 2px solid #f70;
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-radius: 35px;
}
.lightbox_close:before {
content: '\f00d';
}
.lightbox_close:hover {
color: #333;
border-color: #333;
}
.lightbox_content {
width: 642px;
padding: 0 50px 0 50px;
}
.lightbox_content h2 {
font-weight: 700;
font-size: 2rem;
line-height: 2rem;
color: #f70;
margin: 0 0 25px 0;
}
.lightbox_content .input_container {
width: 600px;
margin: 0 0 10px 0;
}
.lightbox_content .input_container:after {
clear: both;
height: 0;
display: block;
font-size: 0;
line-height: 0;
content: ' ';
}
.lightbox_content .input_container label {
width: 200px;
float: left;
font-size: 1rem;
line-height: 32px;
}
.lightbox_content .input_container label span.required {
font-weight: bold;
color: #f70;
}
.lightbox_content .input_container .field_container {
width: 400px;
float: right;
position: relative;
}
.lightbox_content .input_container .field_container label.error {
width: 400px;
display: block;
background-color: #fff1e6;
line-height: 1.4rem;
color: #333;
padding: 5px 0 6px 10px;
border: 1px solid #f70;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin: 0 0 5px 0;
}
.lightbox_content .input_container .field_container label.error.valid {
display: none !important;
}
.lightbox_content .input_container .field_container input {
width: 400px;
height: 32px;
background-color: #f9f9f9;
line-height: 30px;
color: #666;
padding: 0 0 0 10px;
border: 1px solid #ccc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.lightbox_content .input_container .field_container input:focus {
background-color: #ffd;
color: #000;
}
.lightbox_content .input_container .field_container.error:after,
.lightbox_content .input_container .field_container.valid:after {
width: 32px;
height: 32px;
position: absolute;
bottom: 0;
right: -42px;
font-family: 'FontAwesome', Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 20px;
line-height: 32px;
text-align: center;
}
.lightbox_content .input_container .field_container.error:after {
content: '\f00d';
color: #c00;
}
.lightbox_content .input_container .field_container.valid:after {
content: '\f00c';
color: #090;
}
.lightbox_content .button_container {
width: 600px;
height: 35px;
text-align: right;
padding: 15px 0 50px 0;
}
.lightbox_content .button_container button {
height: 35px;
display: inline-block;
background-color: #999;
font-weight: 700;
text-transform: uppercase;
color: #fff;
padding: 0 15px 0 15px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.lightbox_content .button_container button:hover {
background-color: #333;
color: #fff;
}
/* Message / noscript --------------------------------------------------------------------------- */
#message_container,
#noscript_container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #333;
text-align: center;
color: #fff;
}
#message_container {
display: none;
}
#message,
#noscript {
width: 980px;
line-height: 20px;
padding: 10px 5px 10px 6px;
margin: 0 auto 0 auto;
}
#message p,
#noscript p {
display: inline-block;
position: relative;
padding: 0 0 0 28px;
}
#message p:before,
#noscript p:before {
width: 20px;
height: 20px;
position: absolute;
top: 0;
left: 0;
background-color: #f70;
font-family: 'FontAwesome', Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 12px;
line-height: 20px;
text-align: center;
color: #fff;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
#message.success p:before,
#noscript.success p:before {
content: '\f00c';
}
#message.error p:before,
#noscript.error p:before {
content: '\f00d';
}
/* Loading message ------------------------------------------------------------------------------ */
#loading_container {
width: 100%;
height: 100%;
display: none;
position: fixed;
top: 0;
left: 0;
background-color: #333;
background-color: rgba(0, 0, 0, 0.85);
text-align: center;
}
#loading_container2 {
width: 100%;
height: 100%;
display: table;
}
#loading_container3 {
display: table-cell;
vertical-align: middle;
}
#loading_container4 {
width: 350px;
height: 250px;
position: relative;
background-color: #fff;
font-size: 1.4rem;
line-height: 1.4rem;
color: #666;
padding: 165px 0 0 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin: 0 auto 0 auto;
}
#loading_container4:before {
width: 100%;
position: absolute;
top: 80px;
left: 0;
font-family: 'FontAwesome', Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 4rem;
line-height: 4rem;
text-align: center;
color: #f70;
content: '\f013';
-webkit-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
#keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<body>
<div id="header">
<h1>Bank CRUD</h1>
<button type="button" class="button" id="createButton">Create record</button>
</div>
<div id="tableDiv">
<table class="datatable" id="table_records">
<thead>
<tr>
<th>Id</th>
<th>Memo</th>
<th>Amount</th>
<th>Transaction Date</th>
<th>Account</th>
<th>Transaction</th>
<th>Functions</th>
</tr>
</thead>
</table>
</div>
<div class="lightbox_bg"></div>
<div class="lightbox_container">
<div class="lightbox_close"></div>
<div class="lightbox_content">
<h2>Create record</h2>
<form class="form add" id="form_create" data-id="" novalidate>
<div class="input_container">
<label for="id">Id: </label>
<div class="field_container">
<input type="number" id="id" min="0" class="text" name='"Id"' value="" required>
</div>
</div>
<div class="input_container">
<label for="memo">Memo: </label>
<div class="field_container">
<input type="text" id="memo" class="text" name='"Memo"' value="" required>
</div>
</div>
<div class="input_container">
<label for="amount">Amount: </label>
<div class="field_container">
<input type="number" id="amount" min="0" class="text" name='"Amount"' value="" required>
</div>
</div>
<div class="input_container">
<label for="transactiondate">Transaction Date: </label>
<div class="field_container">
<input type="text" id="transactiondate" class="text" name='"TransactionDate"' value="" required>
</div>
</div>
<div class="input_container">
<label for="account">Account: </label>
<div class="field_container">
<input type="number" id="account" min="0" class="text" name='"Account"' value="" required>
</div>
</div>
<div class="input_container">
<label for="transaction">Transaction: </label>
<div class="field_container">
<input type="number" id="transaction" min="0" class="text" name='"Transaction"' value="" required>
</div>
</div>
<div class="button_container">
<button type="submit">Create record</button>
</div>
</form>
</div>
</div>
</body>

The answer was to apparently remove all of the settings for the AJAX request. Who would have guessed?
So it should look like the following:
var req = $.ajax({
url: "https://rates.tradelanes.us/bankaccount/record/create",
dataType: "json",
data: form_data,
type: "POST"
});

You have to be sure that you are getting the form .
let form = $('.whatever').find('form');
and then pass the data as the serialized form
form.serialize()
var req = $.ajax({
url: "https://rates.tradelanes.us/bankaccount/record/create",
cache: false,
data: form.serialize(),
dataType: "application/json",
contentType: "application/json; charset=utf-8",
type: "post"
});
req.done(function(out) {
if (out.result == "success") {
table_records.api().ajax.reload(function() {
alert("Record added successfully");
}, true);
} else {
alert("Record failed to be created");
}
});

I can't get rid of this gap above HTML5 video (On mobile devices)

HTML
<div class="NavAlignLeft">Site Name</div>
<div class="NavAlignRight">
<!-- Change this to an include later -->
<ul class="topnav" id="myTopnav">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="icon">
☰
</li>
</ul>
</div>
<div style="clear:both;"></div>
</div>
<!-- Video test -->
<div id="video_overlays">
<div class="abovethefold">
<h1 class="blog-title"><?php bloginfo( 'name' ); ?></h1>
<?php $description = get_bloginfo( 'description', 'display' ); ?>
<?php if($description) { ?><p class="blog-description"><?php echo $description ?></p><?php } ?>
<p class="button">
<a class="blue-button" href="#cta">Call to Action</a></p>
</div></div>
<div class="homepage-hero-module">
<div class="video-container">
<div class="filter"></div>
<video autoplay loop class="fillWidth">
<source src="http://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/Busy-People/MP4/Busy-People.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
<source src="http://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/Busy-People/WEBM/Busy-People.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
<img src="http://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/Busy-People/Snapshot/Busy-People.jpg" title="Your browser does not support the <video> tag">
</video>
<div class="poster hidden">
<img src="http://scott.ewarena.com//blog/wp-content/themes/bootstrapstarter/Busy-People/Snapshots/Busy-People.jpg" alt="">
</div>
</div>
</div></div>
CSS:
body {
background-color: #e2e2e2;
margin: 0px;
}
h1, .h1,
h2, .h2,
h4, .h4,
h5, .h5,
h6, .h6 {
margin-top: 0;
font-family: 'Vollkorn', serif;
font-style: oblique;
font-weight: normal;
color: #2e2e2e;
}
h3, .h3 {
font-family: 'Vollkorn', serif;
font-weight: bold;
font-size: 30px;
color: #fff;
}
.NavAlignLeft {
font-family: 'Vollkorn', serif;
/*font-style: oblique;*/
font-weight: bold;
font-size: 22px;
color: #fff;
float: left;
padding-left: 40px;
}
.NavAlignLeft:hover {
font-family: 'Vollkorn', serif;
text-decoration: none;
}
.NavAlignRight {
font-family: 'Vollkorn', serif;
font-weight: bold;
font-size: 22px;
color: #fff;
float: right;
padding-right: 40px;
}
.NavAlignLeft, .NavAlignRight {
/*{ width: 50%; Commenting this out made the nav align completely to the right.*/
display: inline-block;
}
a, .a,
a:visited, .a:visited,
a:active, .a:active {
font-family: 'Vollkorn';
font-style: none; color: #e2e2e2; text-decoration: none;
}
a:hover, .a:hover {
font-family: 'Vollkorn';
font-style: none; color: #fff; text-decoration: none;
}
/*
* Override Bootstrap's default container.
*/
/*#media (min-width: 1200px) {
.container {
width: 100%; padding: 0; margin: 0; vertical-align: middle;
}
} .container2 { width: 100%; padding: 0; margin: 0; }
Nothing changed */
/*
* Masthead for nav
*/
#blog-masthead {
background-color: #2e2e2e;
height: 40px;
width: 100%;
line-height: 40px;
/*z-index: 2;
/*vertical-align: middle;
padding-bottom: 0px;
padding-left: 10px;
padding-right: 10px; Nothing Changed */
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.41);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.41);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.41);
border-bottom: 1px solid #1a1a1a;
}
.abovethefold {
background-color: transparent;
/*background-image: url("https://static1.squarespace.com/static/518d3dc6e4b00ba5bf4a06b0/t/586e223e197aea98191b014e/1483612772641/photodune-17121963-coffee-shop-owner-standing-at-the-counter-l.jpg"); */
/*height: 250px;
width: 100%;
/*padding-top: 100px;*/
/*vertical-align: middle;
justify-content:center;
align-content:center;
}
.overlay {
background:#2e2e2e;
opacity:40%;
height: 250px;
width: 100%Nothing changed.*/
}
/* Nav links */
.blog-nav-item {
/*position: relative;
display: inline-block;
padding: 5px;
color: #2e2e2e; nothing changed*/
}
.blog-nav-item:hover,
.blog-nav-item:focus {
color: #fff;
text-decoration: none;
}
/* Active state gets a caret at the bottom */
.blog-nav .active {
color: #fff;
}
.blog-nav .active:after {
/*position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
content: " ";
border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent; Nothing Changed*/
}
.menu-menu-1-container {
/*width: 100%;
vertical-align: middle;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 10px;
padding-right: 10px; Nothing changed*/}
/*
* Blog name and description
*/
.blog-header {
padding-top: 20px;
padding-bottom: 20px;
}
.blog-title {
margin-top: 0px;
margin-bottom: 0;
line-height: 80px;
margin-top: 100px;
font-size: 60px;
text-align:center;
font-weight: normal;
color: #fff;
}
.blog-description {
font-size: 30px;
font-style: 'Open Sans';
font-weight: bold;
text-align: center;
color: #2e2e2e;
}
.blog-main {
font-size: 18px;
line-height: 1.5; nothing changed
}
/* Buttons */
.green-button,.green-button:link,.green-button:visited,.blue-button,.blue-button:link,.red-button,.red-button:link,.purple-button,.purple-button:link,.teal-button,.teal-button:link,.orange-button,.orange-button:link,.grey-button,.grey-button:link,.grey-button:visited,.lt-grey-button,.lt-grey-button:link,.lt-grey-button:visited,.shop_table .actions .button,.oldernewer a:link,.oldernewer a:visited,.woocommerce-message .button,#place_order,html body div .quiz-submit, input.course-start {
display: block;
border: 0;
border-radius:1em;
-webkit-border-radius:border-radius:.8em;
text-align: center;
font-size: 20px !important;
padding: 10px 20px;
width: 180px;
}
p.button {
text-align: center;
}
p.button:hover {
text-align: center;
text-decoration: none;
}
p.button a {
margin:0 auto;
font-family: 'Vollkorn', serif;
font-style: none;
text-decoration: none;
}
.blue-button,.blue-button:link,.blue-button:visited {
background: #2f75c5;
color: #f8f8f8 !important;
text-decoration: none;
}
.blue-button:hover {
background: #3584de;
cursor: pointer;
text-decoration: none;
}
.blue-button:active {
background: #2966ab;
font-style: none;}
/* Sidebar modules for boxing content */
/* Sidebars arent being used
.sidebar-module {
padding: 15px;
margin: 0 -15px 15px;
}
.sidebar-module-inset {
padding: 15px;
background-color: #f5f5f5;
border-radius: 4px;
}
.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child {
margin-bottom: 0;
}
*/
/* Pagination */
.pager {
/*margin-bottom: 60px;
text-align: left;nothing changed*/
}
.pager > li > a {
/* width: 140px;
padding: 10px 20px;
text-align: center;
border-radius: 0px;
list-style: none; nothing changed*/
}
/*
* Blog posts
*/
.blog-post {
margin:50px 50px 0;
}
.blog-post-title {
margin-bottom: 5px;
font-size: 40px; color: #2e2e2e;
}
.subtitle {
font-size: 1.2em;
font-family: 'Vollkorn';
color: #2e2e2e;
}
.blog-post-meta {
margin-bottom: 20px;
color: #999;
}
/*
* Footer
*/
.blog-footer {
padding: 40px 0;
color: #999;
text-align: center;
background-color: #2e2e2e;
border-top: 1px solid #1a1a1a;
-webkit-box-shadow: 2px -5px 5px 0px rgba(0,0,0,0.41);
-moz-box-shadow: 2px -5px 5px 0px rgba(0,0,0,0.41);
box-shadow: 2px -5px 5px 0px rgba(0,0,0,0.41);
}
.blog-footer p:last-child {
margin-bottom: 0;
}
/*** lyrathemes - custom styling ***/
.page_item {
list-style: none;
font-size: 22px;
text-decoration: none;
}
.page_item:hover {
list-style: none;
text-decoration: none;
}
ul.blog-nav {
/*list-style: none;*/
}
/* Nav links */
.menu-item a{
position: relative;
/*display: inline-block; keep this commented out - moved navigation vertically.*/
padding: 10px;
color: #e2e2e2;
}
.menu-item a:hover,
.menu-item a:focus {
color: #fff;
text-decoration: none;
}
/* Active state gets a caret at the bottom */
.menu-item.current-menu-item a{
color: #fff;
}
.menu-item.current-menu-item a:after {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
/*content: " ";*/
/* border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent;*/
-webkit-box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.41);
-moz-box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.41);
box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.41);
}
/*Not using side bars
.sidebar-module ul {
list-style: none;
padding-left: 0;
}*/
/* Video CSS */
.homepage-hero-module {
border-right: none;
border-left: none;
position: relative;
width: auto;
height: 400px;
}
.no-video .video-container video,
.touch .video-container video {
display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
display: block !important;
}
.video-container {
position: absolute;
bottom: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
/*background: #000;*/
}
.video-container .poster img {
width: 100%;
bottom: 0;
position: absolute;
}
.video-container .filter {
/*z-index: 100;*/
position: absolute;
background: rgba(0, 0, 0, 0.4);
width: 100%;
}
.video-container video {
position: absolute;
/*z-index: 0;*/
bottom: 0;
}
.video-container video.fillWidth {
width: 100%;
}
#video_overlays {
position:absolute;
float:left;
width:100%;
height:400px%;
background-color:transparent;
z-index:1;
}
/* Content Table Styles */
#green-table {
background-color: #ebf2e6;
width: 50%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: center;
margin: auto;
margin-top:30px;
margin-bottom: 30px;
border: 1px solid #d6e8c5;
border-radius:.8em;
}
#dark-table {
background-color: #2e2e2e;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: center;
margin-top:30px;
margin-bottom: 30px;
}
#light-table {
background-color: #e2e2e2;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: center;
margin-top:30px;
margin-bottom: 30px;
}
#dark-narrow-table {
background-color: #2e2e2e;
/*background-image: url("https://static1.squarespace.com/static/518d3dc6e4b00ba5bf4a06b0/t/586e223e197aea98191b014e/1483612772641/photodune-17121963-coffee-shop-owner-standing-at-the-counter-l.jpg"); */
width: 50%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: center;
margin-top:30px;
margin-bottom: 30px;
margin: auto;
border-radius:.8em;
}
/*Heading Styles*/
#light-table-head-style {
font-family: 'Droid Serif';
font-size: 45px;
color: #2e2e2e;
}
#dark-table-head-style {
font-family: 'Droid Serif';
font-size: 45px;
color: #e2e2e2;
}
#green-table-head-style {
font-family: 'Droid Serif';
font-size: 45px;
color: #2e2e2e;
}
#dark-narrow-table-head-style{
font-family: 'Droid Serif';
font-size: 45px;
color: #e2e2e2;
}
/*Content Paragraph Styles*/
#light-table-paragraph {
font-family: 'Droid Serif';
font-size: 22px;
color: #2e2e2e;
text-align: left;
}
#dark-table-paragraph {
font-family: 'Droid Serif';
font-size: 22px;
color: #e2e2e2;
}
#dark-narrow-table-paragraph {
font-family: 'Droid Serif';
font-size: 22px;
color: #e2e2e2;
}
#green-table-paragraph {
font-family: 'Droid Serif';
font-size: 22px;
color: #2e2e2e;
text-align: left;
}
/* Hamburger Test */
/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #2e2e2e;
}
/* Float the list items side by side */
ul.topnav li {float: left;
height: 40px;
}
/* Style the links inside the list items */
ul.topnav li a {
display: inline-block;
color: #e2e2e2;
text-align: center;
padding: 0px 10px 0px 0px;
text-decoration: none;
transition: 0.3s;
font-family: 'Vollkorn', serif;
font-weight: bold;
font-size: 22px;
color: #e2e2e2;
}
/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #3b3b3b;}
/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}
/* Hamburger mobile test */
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
#media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
#media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
/* Fixing Mobile Div Problem */
#media only screen and (max-device-width: 680px) {
#green-table {
width: 95%;
}
#dark-narrow-table {
width: 95%;
}
.NavAlignRight {
padding-right: 2px;
}
.NavAlignLeft {
padding-left: 2px;
JS:
//jQuery is required to run this code
$( document ).ready(function() {
scaleVideoContainer();
initBannerVideoSize('.video-container .poster img');
initBannerVideoSize('.video-container .filter');
initBannerVideoSize('.video-container video');
$(window).on('resize', function() {
scaleVideoContainer();
scaleBannerVideoSize('.video-container .poster img');
scaleBannerVideoSize('.video-container .filter');
scaleBannerVideoSize('.video-container video');
});
});
function scaleVideoContainer() {
var height = $(window).height() + 5;
var unitHeight = parseInt(height) + 'px';
$('.homepage-hero-module').css('height',unitHeight);
}
function initBannerVideoSize(element){
$(element).each(function(){
$(this).data('height', $(this).height());
$(this).data('width', $(this).width());
});
scaleBannerVideoSize(element);
}
function scaleBannerVideoSize(element){
var windowWidth = $(window).width(),
windowHeight = $(window).height() + 5,
videoWidth,
videoHeight;
console.log(windowHeight);
$(element).each(function(){
var videoAspectRatio = $(this).data('height')/$(this).data('width');
$(this).width(windowWidth);
if(windowWidth < 1000){
videoHeight = windowHeight;
videoWidth = videoHeight / videoAspectRatio;
$(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'});
$(this).width(videoWidth).height(videoHeight);
}
$('.homepage-hero-module .video-container video').addClass('fadeIn animated');
});
}
So it loooks absolutely fine when it's displayed on my website http://scott.ewarena.com/blog but when viewed on a mobile device there's a gap along the top, underneath the top bar, before the video, that shouldn't be there.
I can't find out what the issue is at all, I've been trying for two days.
Sorry my code is so clunky. I'm new at this and aware it needs cleaning up a bit.
Any help will be MUCH appreciated!
Thanks!
Scott

Having looked at your code in Chrome Dev Tools I noticed that you have the following defined in your style-sheet:
.video-container video {
position: absolute;
z-index: 0;
bottom: 0;
}
If you remove bottom: 0; you wont have this problem!
Basically, you're forcing the video to be at the bottom most point in it's container, creating a gap when the view-port is smart-phone sized.