Bootstrap Modal - window darkens but no modal - javascript

I have a mustache.js template that contains an <a> which targets myModal like so:
<script id="profile-preview-template" type="text/template">
<div class="col-sm-3">
<a style="display:block" data-toggle="modal" data-target="#myModal">
<div class="profile-preview">
<img class="img-responsive img-circle center-block" width="200px" src="{{img_url}}" alt="Photo of {{first_name}} {{last_name}}" />
<h1>{{first_name}} {{last_name}}</h1>
<h2 class="text-muted">{{major}}</h2>
<h3 class="text-muted">Cohort {{cohort}}</h3>
</div>
</a>
</div>
</script>
Here is the modal:
<div id="myModal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close glyphicon glyphicon-remove" data-dismiss="modal"></button>
<h3 class="modal-title">BluLocker</h3>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-offset-2 col-sm-offset-2 col-xs-offset-1">
<img src="img/portfolio/blulocker1.jpg" alt="BluLocker" class="img-responsive">
</div>
</div>
</div>
<p>...</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
When the result is clicked it darkens the screen but no modal is displayed. I am led to believe that the modal is conflicting with something in the javascript because i cannot get a modal to work anywhere on the site directory.
here are my links to javascript:
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Mousctache.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.3/mustache.js"></script>
<!-- Custom JavaScript -->
<script src="js/custom.js"></script>
I also have a few inline script tags running JS
I need to get the modal to display upon clicking the <a> in the moustache.js template.
FYI here is the full HTML page starting at the <body> tag:
<body>
<div id="myModal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close glyphicon glyphicon-remove" data-dismiss="modal"></button>
<h3 class="modal-title">BluLocker</h3>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-offset-2 col-sm-offset-2 col-xs-offset-1">
<img src="img/portfolio/blulocker1.jpg" alt="BluLocker" class="img-responsive">
</div>
</div>
</div>
<p>...</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<!-- Navigation -->
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="img/EPG.jpg"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
APPLY
</li>
<li class="dropdown">
RESOURCES <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Calander
</li>
<li>
People
</li>
<li>
ETC
</li>
<li>
ETC
</li>
<li>
ETC
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<header class="intro-header" style="background-image: url('img/slidedeck/ex1.jpg')">
<div style="background: rgba(0,0,0, 0.5);">
<div class="container">
<div class="row">
<div class="site-heading">
<h1>NETWORK</h1>
<hr class="small">
<h2 class="subheading">The most valuable part of EPG is the people.</h2>
</div>
</div>
</div>
</div>
</header>
<div class="search-navbar">
<input type="search" name="search" id="search" placeholder=""/>
</div>
<div class="container">
<div id="profile-results" class="row">
</div>
</div>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<ul class="list-inline text-center">
<li>
<a href="" target="_blank">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
</a>
</li>
<li>
<a href="" target="_blank">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x"></i>
</span>
</a>
</li>
<li>
<a href="">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-youtube fa-stack-1x"></i>
</span>
</a>
</li>
</ul>
<p class="copyright text-muted">Copyright © Entrepreneurship for the Public Good 2015</p>
</div>
</div>
</div>
</footer>
</div>
Then I have a bunch of inline JavaScript and the closing </body>:
<script id="profile-preview-template" type="text/template">
<div class="col-sm-3">
<a style="display:block" data-toggle="modal" data-target="#myModal">
<div class="profile-preview">
<img class="img-responsive img-circle center-block" width="200px" src="{{img_url}}" alt="Photo of {{first_name}} {{last_name}}" />
<h1>{{first_name}} {{last_name}}</h1>
<h2 class="text-muted">{{major}}</h2>
<h3 class="text-muted">Cohort {{cohort}}</h3>
</div>
</a>
</div>
</script>
<script id="modal-template" type="text/template">
<div id="myModal">
<div class="contianer">
<div class="row">
<div class="col-sm-6">
<img width="300px" src="{{img_url}}" alt="Profile of {{first_name}} {{last_name}}" class=" img-circle img-responsive">
</div>
<div class="col-sm-6">
<h1>{{first_name}} {{last_name}}</h1>
<h2>{{major}}</h2>
<h3>{{cohort}}</h3>
<h4>{{home_town}}</h4>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-6">
<h1>About {{first_name}}</h1>
</div>
<div class="col-xs-6">
<h3>Status:{{status}}</h3>
</div>
</div>
<div class = "row">
<p>{{bio}}</p>
</div>
</div>
LinkedIn →
</div>
</script>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Mousctache.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.3/mustache.js"></script>
<!-- Custom JavaScript -->
<script src="js/custom.js"></script>
<script type="text/javascript">
$('#search').keyup(function() {
var searchField = $('#search').val();
var myExp = new RegExp(searchField, "i");
$.getJSON('/profiles.json', function(data){
var result =""
$.each(data.profiles, function(key, val){
var fullName = val.first_name + " " + val.last_name
var cohortNum = val.cohort.toString()
var cohortName = "cohort " + cohortNum
if ((val.first_name.search(myExp) != -1) ||
(val.last_name.search(myExp) != -1) ||
(val.major.search(myExp) != -1) ||
(fullName.search(myExp) != -1)||
(cohortNum.search(myExp) != -1)||
(cohortName.search(myExp) != -1)
){
var template = $('#profile-preview-template').html();
result += Mustache.render(template, val);
}
});
$('#profile-results').html(result);
});
});
</script>
</body>
And also FYI here is the custom.js file:
$(function(){
//Variables
var slideqty = $('#featured .item').length; //get the number of slides in the carousel deck
var wheight = $(window).height(); //get the height of the window
var randSlide = Math.floor(Math.random()*slideqty); //pick a random number from 0-slideqty
//makeIndicators
//Automatically make indicators on the carousel for each slide in the deck
for (var i=0; i < slideqty; i++) {
var insertText = '<li data-target="#featured" data-slide-to="' + i + '"';
if (i === 0) {
insertText += ' class="active" ';
}
insertText += '></li>';
$('#featured ol').append(insertText);
}
$('.carousel').carousel({
pause: false
}); // end of makeIndicator
//fullHeight
// set all elements with class "fullheight" to a height equal to height of viewport on load
$('.fullheight').css('height', wheight);
//resize the "fullheight" elements on screen resize
$(window).resize(function() {
wheight = $(window).height(); //get the height of the window
$('.fullheight').css('height', wheight); //set to window tallness
});
//adjust the interval of the carousel
$('.carousel').carousel({
interval: 10000 //changes the speed in miliseconds
})
//make images darker
$('.item img').each(function() {
$(this).wrap('<div class="tint"></div>'); //wraps the carousel images with a div of class "tint"
});
//animate the contents of the search bar
var txt = "Search by name, major, or cohort.";
var timeOut;
var txtLen = txt.length;
var char = 0;
$('#search').attr('placeholder', '|');
(function typeIt() {
var humanize = Math.round(Math.random() * (200 - 30)) + 30;
timeOut = setTimeout(function () {
char++;
var type = txt.substring(0, char);
$('#search').attr('placeholder', type + '|');
typeIt();
if (char == txtLen) {
$('#search').attr('placeholder', $('#search').attr('placeholder').slice(0, -1)) // remove the '|'
clearTimeout(timeOut);
}
}, humanize);
}()
);
//shuffle takes an array and shuffles it
function shuffle(o){ //v1.0
for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
};
//load 20 random profiles
function loadRand(){
$.getJSON('/profiles.json', function(data){
rand = ""
randProfiles = shuffle(data.profiles);
for (var i = 0; i < 20; i++) {
var template = $('#profile-preview-template').html();
rand += Mustache.render(template, randProfiles[i]);
}
$('#profile-results').html(rand);
});
};
loadRand(); //load random profiles on refresh
//if search is empty load 20 random profiles
$('#search').keyup(function() {
var searchField = $('#search').val();
if (searchField == ''){
loadRand();
}
});
}); //end of main function


Change id of your div from item1 to "myModal" as you are using data-target="#myModal" in your code.

Related

innerHTML property not working with owl carousel

I am fetching data from firestore database to create a product card so that I can display the product cards inside a carousel. Owl carousel to be specific. I am using the innerHTML property in javascript to add the product cards programmatically. The Owl carousel seems to not work when I do so but when I create the cards statically in html the carousel works. What could be the problem?
Code:
Html:
<div class="product-area most-popular section">
<div class="container">
<div class="row">
<div class="col-12">
<div class="section-title">
<h2>Hot Items</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="owl-carousel popular-slider" id="owlCarousel">
<!--product cards go here-->
</div>
</div>
</div>
</div>
</div>
Javascript:
var view2 = document.getElementById("owlCarousel");
db.collection("products").where("hot" , "==" , true)
.get().then((querySnapshot)=> {
querySnapshot.forEach((doc) => {
var image = doc.data().images[0];
var image2 = doc.data().images[1];
var title = doc.data().title;
var price = doc.data().pricing.toString();
var hot = doc.data().hot;
var discount = doc.data().discount;
var price = doc.data().pricing;
//product card creation
view2.innerHTML += `
<div class="single-product">
<div class="product-img">
<a href="product-details.html">
<img class="default-img" src="${image}" alt="#">
<img class="hover-img" src="${image2}" alt="#">
<span class="out-of-stock">Hot</span>
</a>
<div class="button-head">
<div class="product-action">
<a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i class=" ti-eye"></i><span>Quick Shop</span></a>
<a title="Wishlist" href="#"><i class=" ti-heart "></i><span>Add to Wishlist</span></a>
<a title="Compare" href="#"><i class="ti-bar-chart-alt"></i><span>Add to Compare</span></a>
</div>
<div class="product-action-2">
<a title="Add to cart" href="#">Add to cart</a>
</div>
</div>
</div>
<div class="product-content">
<h3>${title}</h3>
<div class="product-price">
<span>Ksh. ${price}</span>
</div>
</div>
</div>
`
});
});

I just had the same problem.
What you should do is initialize the OWL CAROUSEL after you add the template (inner html);
for example:
view.innerHtml = `<div> content </div`;
$('.owl-carousel').owlCarousel({
//here you can add the props or events
})
This worked for me! hope this could hel you :)

Modal will not open on click

I am in a javascript beginner class and I am stuck with my homework. I went over it what feels like a million times but for some reason, I am missing something and I can't find it. Many thanks in advance!!! It is set up so that if the link has the data-reveal attribute and there is a modal element with the matching ID it will allow for that link to be clicked and the modal appears.
My HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, inital-scale=1.0, shrink-to-fit=no">
<meta name="description" content="description">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<title>London</title>
<link rel="stylesheet" type="text/css" href="styles/main.css">
<link rel="stylesheet" type="text/css" href="styles/london.css">
</head>
<!-- Head End -->
<body>
<header id="header" class="header">
<!-- Image Banner -->
<div id="logoWrapper" class="logoWrapper">
<img src="images/welcometoengland.png" class="logo" title="Welcome to England" alt="Welcome to England">
</div>
<section id="banner" class="banner">
<img src="images/banner/london_banner_1.png" class="banner__image" alt="banner">
</section>
<!-- Primary navigation -->
<nav id="nav" class="nav">
<ul class="nav__links nav__items">
<li class="nav__item">
Home
</li>
<li class="nav__item">
London
</li>
<li class="nav__item">
Daytrips
</li>
<li class="nav__item">
Cost
</li>
<li class="nav__item">
Stay
</li>
<li class="nav__item">
Travel
</li>
<li class="nav__item">
Shop
</li>
<li class="nav__item">
Contact Us
</li>
</ul>
</nav>
</header>
<!-- Header End -->
<main id="main" class="main">
<!--Left Content -->
<div id="main__content" class="main__content">
<div class="intro__wrapper">
<div class="intro__left">
<h4 id="attractionLinks__heading" class="attractionLinks__heading"></h4>
<ul id="attractionLinks__list" class="attractionLinks__list"></ul>
<p class="attractionLinks__instructions">If you have already visited some attractions or would like to add additional attractions, click the button below to update your preferences:</p>
<button id="attractionLinks__showForm" class="attractionLinks__showForm">Select Attractions</button>
</div>
<div class="intro__right">
<h3 class="intro__heading">Welcome to the Lodon Attractions page!</h3>
<p class="intro__text"> As a current memeber of the International Travel Club, you may select the attractions you would like to visit and we will keeo you updated with travel tips. When you click the London tab, you will only see links to attractions you would like to visit.</p>
<div class="form__inputWrapper">
<form class="form travelerForm" id="travelerForm" name="travelerForm">
<div class="form__inputWrapper">
<label for="fullName" class="form__label">Full Name:</label>
<input name="fullName" id="fullName" class="form__input" type="text" pattern="^[A-Za-z]+\s[A-Za-z]+$" placeholder="" required>
</div>
<div class="form__inputWrapper form__inputWrapper--checkboxes">
</div>
<!--Submit-->
<div class="form__inputWrapper form__inputWrapper--submit">
<input name="submitTraveler" id="submitTraveler" class="submit button" type="submit" value="Submit Form">
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Right Sidebar -->
<div id="main__sidebar" class="main__sidebar">
<!--London Clock-->
<div id="londonTime__wrapper" class="londonTime__wrapper">
<img class="londonTime__image" src="images/bigben.png" alt="Big Ben Clock">
<p id="londonTime" class="londonTime"></p>
</div>
<!--Attractions Select Wrapper-->
<div id="attractions" class="attractions">
<div class="attractions__instructionsWrapper">
<!--Attractions Instructions-->
<h2 class="attractions__heading">
Select an item from the list to display a picture and description of the attraction.
</h2>
</div>
<!--Attractions Select Wrapper-->
<div class="attractions__selectWrapper">
<select id="attractions__list" class="attractions__list">
</select>
</div>
<!--Attractions Display Wrapper-->
<div class="attractions__displayWrapper">
<div class="attractions__imageWrapper">
<img src="images/slideshow/placeholder.jpg" class="attractions__image" alt="Attractions">
</div>
</div>
<!--Attractions Text Wrapper-->
<div class="attractions__textWrapper">
<p class="attractions__text"></p>
</div>
</div>
<!--Attractions End-->
</div>
<section class="modals">
<!--Big Ben Modal-->
<div id="BigBen_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">Big Ben</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/BigBen.jpg" alt="Big Ben">
</div>
<div class="modal__textWrapper">
<p class="modal__text">Whenever you think of London, you probably think of Big Ben, as it is one of England's most recognized landmarks.</p>
<p class="modal__text">Here are some <em>Quick Facts</em> about Big Ben:</p>
<p class="modal__text">Description: Big Ben is not actually the clock tower. It is the largest of the five bells inside of the clock tower</p>
<p class="modal__text">Location: It is at the House of Parliament in Westminster, London</p>
<p class="modal__text">Constructed; Completed in 1856, it took 13 years to build. It is about 315 feet high and hs 400 steps to reach the top</p>
<p class="modal__text">Tourists: Bet you didn't know that foreign tourists are not allowed to climb the 400 steps to the top of the tower, but native Englanders can arrange a tour through a member of parliament or a Lord. Please note that it is not wheelchair accessible.</p>
<p class="modal__text">Cost: Free</p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--London Zoo Modal-->
<div id="LondonZoo_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">London Zoo</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/londonzoo.jpg" alt="London Zoo">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--St. Paul's Cathedral Modal-->
<div id="StPaulsCathedral_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">St. Paul's Cathedral</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/StPaulsCathedral.jpg" alt="St. Paul's Cathedral">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--Tower of London Modal-->
<div id="TowerofLondon_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">Tower of London</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/toweroflondon.jpg" alt="Tower of London">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--British Museum Modal-->
<div id="BritishMuseum_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">British Museum</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/BritishMusuem.jpg" alt="British Museum">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--London Eye Modal-->
<div id="LondonEye_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">London Eye</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/londoneye.jpeg" alt="London Eye">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--London Aquarium Modal-->
<div id="LondonAquarium_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">London Aquarium</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/London Aquarium.jpg" alt="London Aquarium">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--Westminster Abbey Modal-->
<div id="WestminsterAbbey_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">Westminster Abbey</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/WestminsterAbbey.jpg" alt="Westminster Abbey">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--Thames River Cruise Modal-->
<div id="ThamesRiverCruise_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">Thames River Cruise</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/ThamesRiverCruise.jpg" alt="Thames River Cruise">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--Wellington Arch Modal-->
<div id="WillingtonArch_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">Wellington Arch</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/WellingtonArch.jpg" alt="Wellington Arch">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--Harrods Modal-->
<div id="Harrods_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">Harrods</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/Harrods.jpg" alt="Harrods">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--Shopping Modal-->
<div id="Shopping_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">Shopping</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/Shopping.jpg" alt="Shopping">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
</section>
</main>
<!-- Main End -->
<footer id="footer" class="footer"></footer>
<!--Footer End -->
<script src="scripts/cookies.js"></script>
<script src="scripts/main.js"></script>
<script src="scripts/select_list.js"></script>
<script src="scripts/banner.js"></script>
<script src="scripts/london.js"></script>
<script>displayLondonTime();</script>
</body>
</html>
Here is my Javascript:
const LondonAttractions = {
LondonZoo: "London Zoo",
BigBen: "Big Ben",
StPaulsCathedral: "St. Paul's Cathedral",
TowerofLondon: "Tower of London",
BritishMuseum: "British Museum",
LodonEye:"London Eye",
LondonAquarium: "London Aquarium",
WestminsterAbbey: "Westminster Abbey",
ThamesRiverCruise: "Thames River Cruise",
WellingtonArch: "Willington Arch",
Harrods: "Harrods",
Shopping: "Shopping"
};
const travelerForm = document.getElementById('travelerForm');
const travelerFormCheckboxWrapper = document.querySelector('#travelerForm .form__inputWrapper--checkboxes');
const attractionLinksHeading = document.getElementById('attractionLinks__heading');
const attractionLinksList = document.getElementById('attractionLinks__list');
const attractionLinksButton = document.getElementById('attractionLinks__showForm');
function generateCheckboxes() {
//If all the required parts exist
if(travelerForm && travelerFormCheckboxWrapper){
//For each daytrip in daytripsInfo
for(let key in LondonAttractions){
let checkbox = `
<div class="form__checkboxWrapper">
<label for="${key}" class="form__label">${LondonAttractions[key]}</label>
<input id="${key}" name="${key}" class="form__input" type="checkbox" placeholder="">
</div>
`;
travelerFormCheckboxWrapper.insertAdjacentHTML('beforeend', checkbox);
}//End of Foor Loop
} //End of if statement
} //End of function
generateCheckboxes();
if(travelerForm) {
travelerForm.addEventListener('submit', function(event) {
// Prevent the form from submitting
event.preventDefault();
var numChecked = 0;
const checkboxes = document.querySelectorAll('#travelerForm [type="checkbox"]');
// Loop over checkboxes
for(let i = 0; i < checkboxes.length; i++) {
// Check if the checkbox is checked
if(checkboxes[i].checked === true) {
// Increment numChecked variable
numChecked++;
//Set a cookie using the checkbox name
Cookies.set(checkboxes[i].name, true, {expires: 7});
}
//If a checkbox is not selected
else{
//If a cookie exists for that checkbox
if(Cookies.get(checkboxes[i].name)) {
//Delet the Cookie
Cookies.remove(checkboxes[i].name);
}
//Note: An alternative would be to set the cookie value to 'false'
//Cookies.set(checkboxes[i].name, false, { expires: 7});
}
}
if(numChecked > 0 && travelerForm.checkValidity()) {
Cookies.set('travelerName', travelerForm.fullName.value, { expires: 7});
// Submit the form
travelerForm.submit();
// Reset numChecked variable
numChecked = 0;
}
else if(numChecked === 0) {
alert('You must select at least one London attraction!');
}
});
}
//If both the 'travelerName' cookie and the attraction links heading exist
if(Cookies.get('travelerName') && attractionLinksHeading){
attractionLinksHeading.textContent = `Attraction Links for ${Cookies.get('travelerName')}`;
} else if(attractionLinksHeading) {
attractionLinksHeading.textContent = "Attraction Links";
}
if(attractionLinksList && travelerForm) {
//Show form by default
var showForm = true;
//For each of our attractions
for(let key in LondonAttractions) {
//If the cookie name esists
if(Cookies.get(key)) {
//Create our list item and link
let item = `<li class="attractionLinks__item">
<p data-reveal="${key}_modal" aria-controls="${key}" aria-haspopup="true" class="attractionLinks__link" role="button" tabindex="0">${LondonAttractions[key]}</p>
</li>`;
//Add the list item and link to the list
attractionLinksList.insertAdjacentHTML('beforeend', item);
//They have already submitted their preferences, hide from for now
showForm = false;
}
}
if(showForm === false) {
//Add modifier class that will be used to hide the form
travelerForm.classList.add('--hide');
}
const attractionLinks = document.querySelectorAll('.attractionLinks__link');
if(attractionLinks.length > 0) {
//If at least one link exists
for(let i = 0; i < attractionLinks.length; i++) {
//Get link data-reveal attribute
let id = attractionLinks[i].dataset.reveal;
//If the link has the data-reveal attribute, and there is a modal element with that matching ID
if(id && document.getElementById(id)) {
let modal = document.getElementById(id);
let closeButton = modal.querySelector('.modal__close');
//Add click event listner to link
attractionLinks[i].addEventListener('click', function(event) {
//If the modal exists and it does not have the --reveal class
if(!modal.classList.contains('--reval')) {
modal.classList.add('--reval');
}
});
//If close button exists within modal
if(closeButton) {
//Add click event listner to close button
closeButton.addEventListener('click', function(event) {
//If the modal had the --reveal class
if(modal.classList.contains('--reveal')) {
//Remove it (hides the modal)
modal.classList.remove('--reveal');
}
});
}
}
}
}
}
//If the button and the form both exist
if(attractionLinksButton && travelerForm) {
attractionLinksButton.addEventListener('click', function(event) {
//Check if the traveler form has the --hide class
if(travelerForm.classList.contains('--hide')) {
//Remove the --hide class
travelerForm.classList.remove('--hide');
//Add the --show class
travelerForm.classList.add('--show');
}
});
}

london.js -> Line 134 /* Problem */
If you add "--reveal" to the classList, that would make the class="initial --reveal"; //there is a space between initial and --reveal
Because on that line the css won't trigger
london.css -> line 82
To fix the problem:
//To solve the problem delete the line 134 from london.js and replace with
modal.className += '--reveal';

Deleting data on firebase with unique id as reference

I want to delete data on my website using a delete button. The data is displayed into a "#table_body" with a button that is created in a javascript. My idea here is that every line of data has a delete button under it. My problem is how to delete the data based on the unique id/reference id by pressing the delete button.
I have tried naming the ".child('123').remove();" instead of ".child(key).remove();" and it works. however it only deletes the data based on the 123 id. I want it to delete the data with the unique id.
Here is the Javascript code:
var rootRef = firebase.database().ref().child("User");
rootRef.on("child_added", snap => {
var name = snap.child("name").val();
var add = snap.child("address").val();
var contact = snap.child("contact").val();
$("#table_body").append("<tr><td>" + name + "</td><td>" + add + "</td><td>" + contact + "</td><td>");
$("#table_body").append('<button id="1" onClick="reply_click(this.id)">Delete</button></td></tr>');
});
function reply_click(clicked_id){
firebase.database().ref("User").child(key).remove();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
<link rel="icon" type="image/png" href="../assets/img/favicon.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>
Happy Paws
</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
<!-- Fonts and icons -->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<!-- CSS Files -->
<link href="../assets/css/material-dashboard.css?v=2.1.0" rel="stylesheet" />
<!-- CSS Just for demo purpose, don't include it in your project -->
<link href="../assets/demo/demo.css" rel="stylesheet" />
</head>
<div class="wrapper ">
<div class="sidebar" data-color="green" data-background-color="black" data-image="../assets/img/sidebar-2.jpg">
<!--
Tip 1: You can change the color of the sidebar using: data-color="purple | azure | green | orange | danger"
Tip 2: you can also add an image using data-image tag
-->
<div class="logo">
<a class="simple-text logo-normal">
HAPPY PAWS
</a>
</div>
<div class="sidebar-wrapper">
<ul class="nav">
<li class="nav-item active ">
<a class="nav-link" href="./dashboard.html">
<i class="material-icons">dashboard</i>
<p>Dashboard</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./user.html">
<i class="material-icons">person</i>
<p>Account</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./tables.html">
<i class="material-icons">content_paste</i>
<p>User List</p>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="javscript:void(0)" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">library_books</i>
<span class="notification">Pet Article</span>
<p class="d-lg-none d-md-block">
Some Actions
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="./typography.html"><p style="color:green;">Articles</p></a>
<a class="dropdown-item" href="./add-article.html"><p style="color:green;">Add Article</p></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="javscript:void(0)" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">shopping_cart</i>
<span class="notification">Products</span>
<p class="d-lg-none d-md-block">
Some Actions
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="./accessories.html"><p style="color:green;">Accessories</p></a>
<a class="dropdown-item" href="./clothes.html"><p style="color:green;">Clothes</p></a>
<a class="dropdown-item" href="./food.html"><p style="color:green;">Food</p></a>
<a class="dropdown-item" href="./hygiene.html"><p style="color:green;">Hygiene</p></a>
<a class="dropdown-item" href="./toys.html"><p style="color:green;">Toys</p></a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="javscript:void(0)" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">pets</i>
<span class="notification">Pet Adoption</span>
<p class="d-lg-none d-md-block">
Some Actions
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="./icons.html"><p style="color:green;">Dog</p></a>
<a class="dropdown-item" href="./cat.html"><p style="color:green;">Cat</p></a>
</div>
</li>
<li class="nav-item ">
<a class="nav-link" href="./login.html">
<i class="material-icons">logout</i>
<p>logout</p>
</a>
</li>
<!-- <li class="nav-item active-pro ">
<a class="nav-link" href="./upgrade.html">
<i class="material-icons">unarchive</i>
<p>Upgrade to PRO</p>
</a>
</li> -->
</ul>
</div>
</div>
<div class="main-panel">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top " id="navigation-example">
<div class="container-fluid">
<div class="navbar-wrapper">
<a class="navbar-brand" href="javascript:void(0)">Dashboard</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation" data-target="#navigation-example">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
</button>
<div class="collapse navbar-collapse justify-content-end">
<form class="navbar-form">
<div class="input-group no-border">
<input type="text" id="Search1" value="" class="form-control" placeholder="Search...">
<button type="submit" id="Search2" class="btn btn-default btn-round btn-just-icon">
<i class="material-icons">search</i>
<div class="ripple-container"></div>
</button>
</div>
</form>
</div>
</nav>
<!-- End Navbar -->
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
<a href="#">
<div class="card card-stats">
<div class="card-header card-header-warning card-header-icon">
<div class="card-icon">
<i class="material-icons">face</i>
</div>
<p class="card-category">New Users</p>
<h3 class="card-title">
<small></small>
</h3>
</div>
<div class="card-footer">
<div class="stats">
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
<a href="reports.html">
<div class="card card-stats">
<div class="card-header card-header-success card-header-icon">
<div class="card-icon">
<i class="material-icons">report_problem</i>
</div>
<p class="card-link" href="./dashboard.html">
<p class="card-category" >Reports</p>
<h3 class="card-title"></h3>
</div>
<div class="card-footer">
<div class="stats">
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
<a href=".">
<div class="card card-stats">
<div class="card-header card-header-danger card-header-icon">
<div class="card-icon">
<i class="material-icons">pets</i>
</div>
<p class="card-category">New Pet for Adoption</p>
<h3 class="card-title"></h3>
</div>
<div class="card-footer">
<div class="stats">
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
<a href="#">
<div class="card card-stats">
<div class="card-header card-header-info card-header-icon">
<div class="card-icon">
<i class="material-icons">add_shopping_cart</i>
</div>
<p class="card-category" href="./dashboard.html">New Product</p>
<h3 class="card-title"></h3>
</div>
<div class="card-footer">
<div class="stats">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12">
<a href="#">
<div class="card">
<div class="card-header card bg-success text-white">
<h4 class="card-title">Account List</h4>
</div>
<div class="card-body table-responsive">
<table class="table table-hover">
<thead class="text-warning">
<th>Name</th>
<th>Address</th>
<th>Contact</th>
<th>Delete</th>
</thead>
<tbody id="table_body">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="https://www.gstatic.com/firebasejs/5.5.8/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyBHzWLC1UCPrwI0lTsWdmTQWlles05unb0",
authDomain: "happy-paws-6f139.firebaseapp.com",
databaseURL: "https://happy-paws-6f139.firebaseio.com",
projectId: "happy-paws-6f139",
storageBucket: "happy-paws-6f139.appspot.com",
messagingSenderId: "53124089069"
};
firebase.initializeApp(config);
</script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="accountview.js"></script>
<script src="firebase.js"></script>
<script src="login.js"></script>
<div class="fixed-plugin">
<div class="dropdown show-dropdown">
<a href="#" data-toggle="dropdown">
<i class="fa fa-cog fa-2x"> </i>
</a>
<ul class="dropdown-menu">
<li class="header-title"> Sidebar Filters</li>
<li class="adjustments-line">
<a href="javascript:void(0)" class="switch-trigger active-color">
<div class="badge-colors ml-auto mr-auto">
<span class="badge filter badge-purple active" data-color="purple"></span>
<span class="badge filter badge-azure" data-color="azure"></span>
<span class="badge filter badge-green" data-color="green"></span>
<span class="badge filter badge-warning" data-color="orange"></span>
<span class="badge filter badge-danger" data-color="danger"></span>
</div>
<div class="clearfix"></div>
</a>
</li>
<li class="header-title">Images</li>
<li>
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="../assets/img/sidebar-1.jpg" alt="">
</a>
</li>
<li class="active">
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="../assets/img/sidebar-2.jpg" alt="">
</a>
</li>
<li>
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="../assets/img/sidebar-3.jpg" alt="">
</a>
</li>
<li>
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="../assets/img/sidebar-4.jpg" alt="">
</a>
</li>
<!-- Core JS Files -->
<script src="../assets/js/core/jquery.min.js"></script>
<script src="../assets/js/core/popper.min.js"></script>
<script src="../assets/js/core/bootstrap-material-design.min.js"></script>
<script src="https://unpkg.com/default-passive-events"></script>
<script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<!-- Google Maps Plugin -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
<!-- Chartist JS -->
<script src="../assets/js/plugins/chartist.min.js"></script>
<!-- Notifications Plugin -->
<script src="../assets/js/plugins/bootstrap-notify.js"></script>
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
<script src="../assets/js/material-dashboard.js?v=2.1.0"></script>
<!-- Material Dashboard DEMO methods, don't include it in your project! -->
<script src="../assets/demo/demo.js"></script>
<script>
$(document).ready(function() {
$().ready(function() {
$sidebar = $('.sidebar');
$sidebar_img_container = $sidebar.find('.sidebar-background');
$full_page = $('.full-page');
$sidebar_responsive = $('body > .navbar-collapse');
window_width = $(window).width();
$('.fixed-plugin a').click(function(event) {
// Alex if we click on switch, stop propagation of the event, so the dropdown will not be hide, otherwise we set the section active
if ($(this).hasClass('switch-trigger')) {
if (event.stopPropagation) {
event.stopPropagation();
} else if (window.event) {
window.event.cancelBubble = true;
}
}
});
$('.fixed-plugin .active-color span').click(function() {
$full_page_background = $('.full-page-background');
$(this).siblings().removeClass('active');
$(this).addClass('active');
var new_color = $(this).data('color');
if ($sidebar.length != 0) {
$sidebar.attr('data-color', new_color);
}
if ($full_page.length != 0) {
$full_page.attr('filter-color', new_color);
}
if ($sidebar_responsive.length != 0) {
$sidebar_responsive.attr('data-color', new_color);
}
});
$('.fixed-plugin .background-color .badge').click(function() {
$(this).siblings().removeClass('active');
$(this).addClass('active');
var new_color = $(this).data('background-color');
if ($sidebar.length != 0) {
$sidebar.attr('data-background-color', new_color);
}
});
$('.fixed-plugin .img-holder').click(function() {
$full_page_background = $('.full-page-background');
$(this).parent('li').siblings().removeClass('active');
$(this).parent('li').addClass('active');
var new_image = $(this).find("img").attr('src');
if ($sidebar_img_container.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
$sidebar_img_container.fadeOut('fast', function() {
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
$sidebar_img_container.fadeIn('fast');
});
}
if ($full_page_background.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
$full_page_background.fadeOut('fast', function() {
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
$full_page_background.fadeIn('fast');
});
}
if ($('.switch-sidebar-image input:checked').length == 0) {
var new_image = $('.fixed-plugin li.active .img-holder').find("img").attr('src');
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
}
if ($sidebar_responsive.length != 0) {
$sidebar_responsive.css('background-image', 'url("' + new_image + '")');
}
});
$('.switch-sidebar-image input').change(function() {
$full_page_background = $('.full-page-background');
$input = $(this);
if ($input.is(':checked')) {
if ($sidebar_img_container.length != 0) {
$sidebar_img_container.fadeIn('fast');
$sidebar.attr('data-image', '#');
}
if ($full_page_background.length != 0) {
$full_page_background.fadeIn('fast');
$full_page.attr('data-image', '#');
}
background_image = true;
} else {
if ($sidebar_img_container.length != 0) {
$sidebar.removeAttr('data-image');
$sidebar_img_container.fadeOut('fast');
}
if ($full_page_background.length != 0) {
$full_page.removeAttr('data-image', '#');
$full_page_background.fadeOut('fast');
}
background_image = false;
}
});
$('.switch-sidebar-mini input').change(function() {
$body = $('body');
$input = $(this);
if (md.misc.sidebar_mini_active == true) {
$('body').removeClass('sidebar-mini');
md.misc.sidebar_mini_active = false;
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar();
} else {
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar('destroy');
setTimeout(function() {
$('body').addClass('sidebar-mini');
md.misc.sidebar_mini_active = true;
}, 300);
}
// we simulate the window Resize so the charts will get updated in realtime.
var simulateWindowResize = setInterval(function() {
window.dispatchEvent(new Event('resize'));
}, 180);
// we stop the simulation of Window Resize after the animations are completed
setTimeout(function() {
clearInterval(simulateWindowResize);
}, 1000);
});
});
});
</script>
<script>
$(document).ready(function() {
// Javascript method's body can be found in assets/js/demos.js
md.initDashboardPageCharts();
});
</script>
</body>
</html>

To get the key, you can do the following:
rootRef.on("child_added", snap => {
var key = snap.key;
var name = snap.child("name").val();
var add = snap.child("address").val();
var contact = snap.child("contact").val();
$("#table_body").append("<tr><td>" + name + "</td><td>" + add + "</td><td>" + contact + "</td><td>");
$("#table_body").append('<button id="1" onClick="reply_click(' + key + ')">Delete</button></td></tr>');
});
function reply_click(clicked_id){
firebase.database().ref("User").child(clicked_id).remove();
}
The snap.key will be able to retrieve the unique id in the database.
From the docs:
key
The key (last part of the path) of the location of this DataSnapshot.

How to edit html file from an another one

I want to select element with sidebar id in downloader.html from an another html document (settings.html).
downloader.html
<body>
<div class="ui visible left vertical thin sidebar menu" id='sidebar'>
<div class='item'>
<img class='ui medium image' src='./../../resources/images/logo_256x256.png'>
</div>
<a class="item" id='dashboard_btn'>
<i class="desktop icon"></i>
Dashboard
</a>
<a class="item" id='statistics_btn'>
<i class="area chart icon"></i>
Statistics
</a>
<a class="item" id='settings_btn'>
<i class="settings icon"></i>
Settings
</a>
</div>
<div class='dimmed pusher'>
<button class="ui icon button" id='sidebar_btn'>
<i class="angle double left icon" id='sidebar_btn_icon'></i>
</button>
<div id='content'>
<!-- All content goes here. -->
</div>
</div>
<script>
$(document).ready(function () {
$('#sidebar_btn').on('click', function () {
$('#sidebar').sidebar('toggle');
$('#sidebar_btn_icon').toggleClass('right');
});
$("#dashboard_btn").on("click", function () {
$("#content").load("./items/dashboard/dashboard.html");
});
$("#statistics_btn").on("click", function () {
$("#content").load("./items/statistics/statistics.html");
});
$("#settings_btn").on("click", function () {
$("#content").load("./items/settings/settings.html");
});
});
</script>
settings.html
<body>
<div class='center'>
<h2 class="ui icon header">
<i class="settings icon"></i>
<div class="content">
Settings
<div class="sub header">Sample text.</div>
</div>
</h2>
<div class='center child'>
<div class="ui toggle checkbox">
<input name="public" type="checkbox">
<label>Dark theme.</label>
</div>
</div>
</div>
<script>
//Select 'sidebar' element from downloader.html using jquery
</script>
Please, do not pay attention to mixed ' with " in html code. It is my fault and it will be fixed before app release.

You can use .load() with hash set within "settings.html"
$("#element").load("downloader.html #sidebar")

jQuery ajax call not working on firefox

[SOLVED] I had to change the button tag to any other tag like < a > tag to call the function. Such as:
<a class="btn btn-success btn-block" id="bagadd" onclick="return all_check('add', '<?php echo $product_id;?>');"><i class="fa fa-cart-plus"></i> Add To Bag</a>
[Problem]
In my project, am sending out data from a JavaScript to PHP script using an Ajax call. I tried to look for an answer on Stackoverflow, but not success therefor I made a question.
This code is working properly on my chrome browser, but it fails when I try it out in Firefox.
product-detail.php
function all_check(action, productid){
var product_id = productid;
var serial = document.getElementById("showserial").value;
var size = document.getElementById("showsize").value;
var qty = document.getElementById("quantity").value;
var queryString = "";
if(action != "") {
switch(action) {
case "add":
queryString = 'action='+action+'&code='+ product_id+'&serial='+serial+'&quantity='+qty+'&size='+size;
alert(queryString);
break;
case "empty":
queryString = 'action='+action;
break;
}
}
$.ajax({
url: "ajax_action.php",
type: "POST",
dataType:"json",
data: queryString
}).done(function(data){ //on Ajax success
alert("success");
$("#cartcount").html(data.items); //total items in cart-info element
console.log("bla bla bla");
});
}
Here is the button which called this function:
<button class="btn btn-success btn-block" id="bagadd" onclick="return all_check('add', '<?php echo $product_id;?>');"> Add To Bag</button>
On button click, all_check function is called. But on Firefox, ajax call does not work.I checked it by using alert and console inside done function. I cleared cache repeatedly. But it did not work.
Anyone please kindly help me on this problem.
EDIT 1 My firefox version is 54.0 (32-bit).
I am using Google CDN for jQuery :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
EDIT 2
Complete rendered html from firefox:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<!-- Bootstrap -->
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/bootstrap/css/bootstrap-select.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
function all_check(action, productid){ // from 262 line
var product_id = productid;
if(document.getElementById("showsize").value==""){
alert("Please Select size");
return false;
}
else if(document.getElementById("quantity").value==""){
alert("Please Select Quantity");
document.getElementById("quantity").focus();
return false;
}
else{
var qtyid = +document.getElementById("quantity").value;
typeof(qtyid);
var available = +document.getElementById("showavailable").value;
typeof(available);
if(qtyid > available ){
alert("Sorry, Available Quantity is "+ available);
return false;
}
}
console.log("button clicked");
var serial = document.getElementById("showserial").value;
var size = document.getElementById("showsize").value;
var qty = document.getElementById("quantity").value;
var queryString = "";
if(action != "") {
switch(action) {
case "add":
queryString = 'action='+action+'&code='+ product_id+'&serial='+serial+'&quantity='+qty+'&size='+size;
alert(queryString);
break;
case "empty":
queryString = 'action='+action;
break;
}
}
$.ajax({ //make ajax request to cart_process.php
url: "ajax_action.php",
type: "POST",
dataType:"json", //expect json value from server
data: queryString
}).done(function(data){ //on Ajax success
alert("success");
$("#cartcount").html(data.items);
console.log("bla bla bla");
});
}
function get_availble(serial)
{
document.getElementById('showserial').value = serial;
var size_n_available = document.getElementById('product_size').value;
document.getElementById('showsize').value = size_n_available.substring(0,2) ;
document.getElementById('showavailable').value = size_n_available.substring(2) ;
alert(document.getElementById('showavailable').value);
}
</script>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-3 hidden-xs">
<img src="assets/images/logo.png" class="img-responsive" alt="">
</div>
<div class="col-md-7 col-sm-6">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div id="custom-search-input">
<div class="input-group col-md-12">
<input type="text" class="form-control input-sm" placeholder="Search" />
<span class="input-group-btn">
<button class="btn btn-info btn-sm" type="button">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<nav class="navbar navbar-default navbar-static">
<div class="container">
<div class="row">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php"><img src="assets/images/logo.png" class="img-responsive" alt="" width="75"></a>
</div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><i class="fa fa-home"></i></li>
<li class="dropdown">
Category <span class="caret"></span>
<ul class="dropdown-menu dropdown-cart dropdown-content" role="menu">
<li class="">Tote bags</li>
<li class="">Mugs</li>
<li class="">T-shirts</li>
<li class="">Throw Pillow</li>
<li class="">Notebooks</li>
<li class="">Art print</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>About Us</li>
<li>Help</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> <span class="glyphicon glyphicon-shopping-cart"></span>
Items <span id="cartcount">
</span>
<span class="caret"></span></a>
<div id="shopping_cart_results"></div>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row top-left-message" style="background:#fff">
</div>
</div>
<div class="col-md-1 col-md-offset-2 collapse navbar-collapse js-navbar-collapse">
Artist
</div>
<div class="col-md-1 collapse navbar-collapse js-navbar-collapse">
Home Junction
</div>
</div>
</div>
</div>
<div class="container">
<div class="row" style="margin-top:15px;">
<div class="col-md-5 col-sm-6">
<div id="view-thumb">
<img id="theImg" class="my-foto img-responsive" src="productimage/bigtea-baggin-mugs.jpg" data-large="productimage/bigtea-baggin-mugs.jpg" title="">
</div>
</div>
<div class="col-md-7 col-sm-6">
<div class="productHeader container-fluid">
<div class="row">
<div class="col-sm-8">
<h2>Tea baggin Mug</h2>
</div>
<div class="col-sm-4">
<p style="padding-top: 26px; padding-right:10px; font-family: Helvetica; color:#999; font-size:17px;" class="pull-right">Tk 300</p>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<form action="" method="post">
<div class="form-group">
<select id="product_size" name="product_size" class="form-control" onchange="get_availble(258)" required>
<option value="-1">Select Size</option>
<option value="125">11 oz</option>
<option value="135">15 oz</option>
</select>
<input class="form-control" id="showsize" name="showsize" placeholder="show size" type="text">
<input class="form-control" id="showavailable" name="showavailable" placeholder="show Quantity" type="text">
<input class="form-control" id="showserial" name="showserial" placeholder="show serial" type="text">
</div>
<div class="form-group">
<input class="form-control" id="quantity" name="quantity" placeholder="Enter Quantity" type="text">
</div>
<button class="btn btn-success btn-block" id="bagadd" onclick="return all_check('add', '06020010');"><i class="fa fa-cart-plus"></i> Add To Bag</button>
<input class="btn btn-success btn-block" id="forsubmit" type="hidden">
</form>
</div>
</div>
</div>
<div class="row" style="margin-bottom:10px;">
<div class="col-md-12">
<div class="title">
<h2>Recently viewed</h2>
</div>
<div class="multiple-items recent_view">
<div class="col-md-2 col-sm-6 col-xs-12">
<img src="assets/images/product/because-sloths-1yv-mugs.jpg" class="img-responsive">
</div>
<div class="col-md-2 col-sm-6 col-xs-12">
<img src="assets/images/product/good-morning-i-see-the-assassins-have-failed-mugs.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/bootstrap/js/bootstrap-select.js"></script>
<script src="assets/js/zoomsl-3.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script src="assets/js/singleCartDelete.js"></script>
<script>
$(document).ready(function(){
$('.multiple-items').slick({
infinite: true,
slidesToShow: 6,
slidesToScroll: 1,
autoplay: true,
});
$('#thumb-group a').on({
'click': function(){
var imgSrc = $(this).attr('data-src');
$('#theImg').attr('src',imgSrc);
$('#theImg').attr('data-large',imgSrc);
}
});
if(!$.fn.imagezoomsl){
$('.msg').show();
return;
}
else $('.msg').hide();
$('.my-foto').imagezoomsl({
zoomrange: [1, 12],
zoomstart: 4,
innerzoom: true,
magnifierborder: "none"
});
});
</script> <script type="text/javascript" src="assets/js/plugin.js"></script>
This is the ajax_action.php file:
<?php
session_start();
include("connection.php");
if(!empty($_POST["action"])) {
switch($_POST["action"]) {
case "add":
if(!empty($_POST["quantity"])) {
$productid = mysqli_fetch_row(mysqli_query($con, "SELECT ProductID,ProductName,Price,SerialNo FROM product_info where SerialNo='".$_POST["serial"]."'"));
$product_image = mysqli_fetch_row(mysqli_query($con, "SELECT ImageID, ProductID,BigImage,MidImage,SmallImage,SerialNo FROM product_image
WHERE ProductID='".$productid[0]."' AND SerialNo='".$_POST["serial"]."'"));
$idx = $_POST["serial"].$_POST["size"];
$itemArray = array($idx=>array(
'name'=>$productid[1],
'code'=>$_POST["serial"],
'image'=>$product_image[4],
'quantity'=>$_POST["quantity"],
'price'=>$productid[2],
'size'=>$_POST["size"]
)
);
if(!empty($_SESSION["cart_item"])) {
$_SESSION["cart_item"] = array_merge($_SESSION["cart_item"],$itemArray);
} else {
$_SESSION["cart_item"] = $itemArray;
}
}
break;
case "empty":
unset($_SESSION["cart_item"]);
break;
}
$total_items = count($_SESSION["cart_item"]); //count total items
die(json_encode(array('items'=>$total_items))); //output json
}
?>

Categories