I can't seem to figure out why bootstrap's modal window isn't popping up.
I've looking into other similar questions and I still can't get it to work.
I've tried the process of elimination and try to eliminate all my scripts (except the bootstrap script) and it still won't open. Same with my CSS files. I also had inputted manual code for a modal window (before I incorporated bootstrap) so I was worried that the id="modal" from other modals would interfere. I deleted those too and nothing worked.
Here is my codepen, I've commented the sections the modal window code starts: https://codepen.io/eylenkim/pen/KKwMPLm
HTML:
<!--
-- fix other <a> tags // fix navigation
--fix "exit" for contact pop up (mobile)
-- center the Contact dialog box on viewport in mobile
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Art By Eylen | Shop</title>
<meta name="description" content="Browse Eylen's art portfolio to view work created with 35mm photography, blockprinting, and acrylic.">
<meta name="author" content="Eylen Kim">
<!-- data-src
––––––––––––––––––––––––––––––––––––––––––––––––––- -->
<link href="subpage-stylesheet.css" rel=stylesheet type="text/css">
<link href="StyleSheet.css" rel=stylesheet type="text/css">
<link href="skeleton.css" rel=stylesheet type="text/css">
<link href="otherCss/normalize.css" rel="stylesheet" type="text/css">
<link href="otherCss/font-awesome.css" rel=stylesheet type="text/css">
<link href="bootstrap-4.3.1-dist/css/bootstrap.css" rel=stylesheet type="text/css">
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" type="text/css">
<!-- Mobile Meta
––––––––––––––––––––––––––––––––––––––––––––––––––-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Favicon
––––––––––––––––––––––––––––––––––––––––––––––––––-->
<link rel="icon" type="image/png" href="photo/favicon1.png" />
</head>
<!-- Menu // Hamburger Bar
––––––––––––––––––––––––––––––––––––––––––––––––––-->
<nav class="navigation">
<a href="#" class="menu-icon">
<i class="fa fa-bars"></i>
</a>
<ul class="main-navigation" role="navigation">
<div id="nav-x" class="menu-icon">⨯</div>
<li>
<div href="index.html">
Home</a>
</li>
<li>
<div href="portfolio.html">
Portfolio</a>
</li>
<li>
<div class="trigger" style="height: 100%;padding: 10px 0 10px 10px;">
About Me
<div class="modal">
<div class="modal-content" style="height: 95%; max-height: 600px;padding: 2rem 4.6rem;">
<span class="close-button">×</span>
<h3>
Hello,<br>I'm Eylen!
</h3>
<img id="about-me-pic" src="photo/meee.JPG">
<p style="font-size: .75em; height: 44.3%; padding-top: 15px;">This art website is my passion project. I have coded my own platform to showcase & sell my art. What a treat to have you here on this site!<br><br> The mediums I work with: 35mm film photography, acrylic (canvas & glass), polymer clay (earrings), and printmaking.
<br><br>
In my free time I like petting my cat, tickling some gnarly tunes on the bass/electric guitar, coding, playing video games, and doing art stuff.<br><br>
</p>
</div>
</div>
</div>
</li>
<li style="height: 100%;padding: 20px 0 10px 7px;">
<p class="about-me-desktop" onclick="document.getElementById('id01').style.display='block'" style="position: relative;top: -3px;">Contact
</p>
<div class="w3-container">
<div id="id01" class="w3-modal">
<div class="modal-content-contact-portfolio">
<span class="close-button" onclick="document.getElementById('id01').style.display='none'" >×</span>
<h3 style="margin-bottom: 0px;">
Contact Me
</h3>
<p>
<div class="contact-us-form" style="font-size: .7em;">
<form action="https://formspree.io/eylenkim#gmail.com" method="POST">
<div class="row" style="z-index: 9999999;">
<div class="six columns">
<input class="u-full-width" type="text" placeholder="Name" id="nameInput" name="Name" requiprintmaking>
</div>
<div class="six columns">
<input class="u-full-width" type="email" placeholder="Email" id="emailInput" name="Email" requiprintmaking>
</div>
</div>
<textarea class="u-full-width" placeholder="Message" id="messageInput" name="Message" requiprintmaking style="height: 160px;margin-top: 20px;line-height: 17px;padding-top: 8px;"></textarea>
<input class="button u-pull-right" type="submit" value="Send" style="color: black;"><br><br><br>
</form>
</div>
</p>
</div>
</div>
</div>
</li>
</ul>
</nav>
<header>
<div class="container fade-in">
<div class="row">
<a href="index.html">
<h1 class="one-third column u-pull-left">Art By <span><br></span><span id="h1-title-span"> Eylen</span></h1>
</a>
<h2 class="one-third column u-pull-left" id="portfolio-title-desktop">| Shop</h2>
<h2 class="one-third column u-pull-left" id="portfolio-title-mobile">
<span>──<br></span>Shop
</h2>
<div class="about-contact-text" class="one-third column u-pull-right">
<a href="index.html">
<p class="about-me-desktop">Home</p>
</a>
<span class="trigger">
<p class="about-me-desktop">
About Me
</p>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<h3>
Hello,<br>I'm Eylen!
</h3>
<img id="about-me-pic" src="photo/meee.JPG">
<p>This art website is my passion project. I have coded my own platform to showcase & sell my art. What a treat to have you here on this site!<br><br> The mediums I work with: 35mm film photography, acrylic (canvas & glass), polymer clay (earrings), and printmaking.
<br><br>
In my free time I like petting my cat, tickling some gnarly tunes on the bass/electric guitar, coding, playing video games, and doing art stuff.<br><br>
</p>
</div>
</div>
</span>
<p class="about-me-desktop" onclick="document.getElementById('id02').style.display='block'">
Contact
</p>
<div class="w3-container">
<div id="id02" class="w3-modal">
<div class="modal-content-contact">
<span class="close-button" onclick="document.getElementById('id02').style.display='none'" >×</span>
<h3 style="margin-bottom: 0px;">
Contact Me
</h3>
<p>
<div class="contact-us-form">
<form action="https://formspree.io/eylenkim#gmail.com" method="POST">
<div class="overlap-text">
<div class="overlap-text-base-contact">
<h2 class="load two-thirds column">Contact</h2>
</div>
</div>
<div class="row" style="z-index: 9999999;">
<div class="six columns">
<input class="u-full-width" type="text" placeholder="Name" id="nameInput" name="Name" required>
</div>
<div class="six columns">
<input class="u-full-width" type="email" placeholder="Email" id="emailInput" name="Email" required>
</div>
</div>
<br>
<textarea class="u-full-width" placeholder="Message" id="messageInput" name="Message" required style=" height: 100px;
margin-top: 10px;
line-height: 17px;
padding-top: 8px;"></textarea>
<br><br>
<input class="button u-pull-right" type="submit" value="Send"><br><br><br>
</form>
</div>
</p>
</div>
</div>
</div>
</div>
</div>
</header>
<body class="top" id="top">
<section class="grid-wrapper">
<div class="filter-controls">
<div class="control fade-in">Filter By:
<select class="filter-field form-control">
<option value="">None</option>
<option value="prints">Prints</option>
<option value="earrings">Earrings</option>
<option value="commissions">Commisions</option>
</select>
</div>
</div>
<div class="grid bootstrap-on fade-in" style="flex-direction: row !important;">
<!------ Product w/ Carousel ---------------------------------------------------------------------->
<div class="card item" data-color="earrings">
<div class="price-tag">$10</div>
<div id="earrings1" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="image" class="d-block w-100 crop-shp" alt="...">
</div>
<div class="carousel-item">
<img src="image" class="d-block w-100 crop-shop" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#earrings1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#earrings1" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Carousel</h5>
<p class="card-text">I want to potentially add the ability to click on the carousel images for the pop up modal</p>
</div>
</div>
<!------ Product w/ Modal Window ---------------------------------------------------------------------->
<div class="card item" data-color="prints">
<div class="price-tag" data-toggle="modal" data-target="#exampleModal">$10</div>
<img src="image" class="card-img-top crop-shop" alt="Print" data-toggle="modal" data-target="#exampleModal">
<div class="card-body">
<h5 class="card-title">(Modal Window)</h5>
<p class="card-text">I want the modal window to pop up when clickin on the image</p>
</div>
</div>
</div>
<!-- Modal ------------------------------------------------------------------------------------>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Cute Earrings</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>THIS IS THE MODAL!</p>
Buy
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</select>
</section>
<!----- Muuri Filtering ----->
<script>
document.addEventListener('DOMContentLoaded', function () {
var grid = null,
wrapper = document.querySelector('.grid-wrapper'),
searchField = wrapper.querySelector('.search-field'),
filterField = wrapper.querySelector('.filter-field'),
sortField = wrapper.querySelector('.sort-field'),
gridElem = wrapper.querySelector('.grid'),
searchAttr = 'data-title',
filterAttr = 'data-color',
searchFieldValue,
filterFieldValue,
sortFieldValue,
dragOrder = [];
// Init the grid layout
grid = new Muuri(gridElem, {
dragEnabled: false,
layout: {
fillGaps: true
}
});
// Filter field event binding
filterField.addEventListener('change', filter);
// Sort field event binding
sortField.addEventListener('change', sort);
// Filtering
function filter() {
filterFieldValue = filterField.value;
grid.filter(function (item) {
var element = item.getElement(),
isSearchMatch = !searchFieldValue ? true : (element.getAttribute(searchAttr) || '').toLowerCase().indexOf(searchFieldValue) > -1,
isFilterMatch = !filterFieldValue ? true : (element.getAttribute(filterAttr) || '') === filterFieldValue;
return isSearchMatch && isFilterMatch;
});
}
});
</script>
<script src="js/muuri.js"></script>
<script src="https://unpkg.com/web-animations-js#2.3.2/web-animations.min.js"></script>
<!--Modal - Dialog Boxes -->
<script type="text/javascript"> const modals = Array.from(document.querySelectorAll('.modal'));
const triggers = Array.from(document.querySelectorAll('.trigger'));
var closeButton = document.querySelector(".close-button");
//if a trigger is clicked then...
for (const trigger of triggers) {
trigger.addEventListener('click', toggleModal);
}
// .. then toggle it's modal
function toggleModal(event) { event.target.closest('.trigger').querySelector('.modal').classList.toggle("show-modal"); }
// check if the clicked element is a modal, or in a modal
function windowOnClick(event) {
if (modals.some((modal) => modal.contains(event.target))) {
toggleModal();
}
}
</script>
<script>
function closeButton() {
document.getElementByClass('id02').style.display='none'
}
</script>
<!----- JS files ----->
<script type="text/javascript" src="js/scripts.js"></script>
<script type="text/javascript" src="js/singlenav.js"></script>
<script type="text/javascript" src="js/scrollreveal.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload#12.4.0/dist/lazyload.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<i class="icon-chevron-up"></i>
<!----- Lazy Load ----->
<script>
(function() {
function logElementEvent(eventName, element) {
console.log(
Date.now(),
eventName,
element.getAttribute("data-src")
);
}
var callback_enter = function(element) {
logElementEvent("🔑 ENTERED", element);
};
var callback_exit = function(element) {
logElementEvent("🚪 EXITED", element);
};
var callback_reveal = function(element) {
logElementEvent("👁️ REVEALED", element);
};
var callback_loaded = function(element) {
logElementEvent("👍 LOADED", element);
};
var callback_error = function(element) {
logElementEvent("💀 ERROR", element);
element.src =
"https://via.placeholder.com/440x560/?text=Error+Placeholder";
};
var callback_finish = function() {
logElementEvent("✔️ FINISHED", document.documentElement);
};
ll = new LazyLoad({
elements_selector: ".lazy",
load_delay: 300,
threshold: 0,
// Assign the callbacks defined above
callback_enter: callback_enter,
callback_exit: callback_exit,
callback_reveal: callback_reveal,
callback_loaded: callback_loaded,
callback_error: callback_error,
callback_finish: callback_finish
});
})();
</script>
<!----- Scroll To Top ----->
<script>
$(window).scroll(function() {
if ($(this).scrollTop() >= 600) { // If page is scrolled more than 50px
$('#return-to-top').fadeIn(200); // Fade in the arrow
} else {
$('#return-to-top').fadeOut(200); // Else fade out the arrow
}
});
$('#return-to-top').click(function() { // When arrow is clicked
$('body,html').animate({
scrollTop : 0 // Scroll to top of body
}, 500);
});
</script>
</body>
</html>
There are 2 separate issues that are preventing the modal from showing up.
1) The first issue is with your code
The bootstrap library you use returns 404.
How to check if it's happening for you?
Open your browser's inspector, and press CTRL+SHIFT+I
You will see:
Failed to load resource: the server responded with a status of 404 () eylenkim/fullpage/bootstrap-4.3.1-dist/css/bootstrap.css
In fact, this happens for a lot of your relative URLs.
Solution
Replace links to Bootstrap libraries with working ones, eg. from https://getbootstrap.com/
The ones I used in my testing of your code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
See gist for minimum code sample for a modal here: https://codepen.io/edwin-chua/pen/rNaLOEg
Once you fix the link problem, you will run into the second issue.
2) The second issue is with your stylesheet
Once you fixed your code as I suggested, you get a dark overlay with no modal.
Removing the reference to https://eylenkim.github.io/ArtByEylen/StyleSheet.css allows the modal to show up, so something in here is interfering with the modal's css.
Here is a working pen: https://codepen.io/edwin-chua/pen/QWwEyyZ
Separate Problem
You seem to have imported some libraries twice, once in the Codepen UI, and once in the HTML file. This will cause you debugging headaches. Make sure you only import them once. Since you are building an entire webpage, I suggest putting all of it in the HTML file.
also see JS tab
And
Further Comments
This section of code seems to be for closing the modal? If so, it probably isn't required, as Bootstrap automatically binds the click events.
<!--Modal - Dialog Boxes -->
<script type="text/javascript"> const modals = Array.from(document.querySelectorAll('.modal'));
const triggers = Array.from(document.querySelectorAll('.trigger'));
var closeButton = document.querySelector(".close-button");
//if a trigger is clicked then...
for (const trigger of triggers) {
trigger.addEventListener('click', toggleModal);
}
// .. then toggle it's modal
function toggleModal(event) { event.target.closest('.trigger').querySelector('.modal').classList.toggle("show-modal"); }
// check if the clicked element is a modal, or in a modal
function windowOnClick(event) {
if (modals.some((modal) => modal.contains(event.target))) {
toggleModal();
}
}
</script>
I have a website that I'm testing across browsers. In IE(8) and Chrome(Version 54.0.2840.87 m), it takes a bit of time before loading, but once it does it's rendered completely. However, in Firefox(43.0.1) it shows incompletely rendered html elements for a second before rendering properly. Also, I've used a Glyph icon on a button which's not working either. This is an unwanted distraction and an overall sub-optimal user experience.
Here's my code :
<!DOCTYPE html>
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1>Site Title</h1>
<p>Some text describing the site functionality</p>
</div>
</div>
</br>
</br>
<div class="form-group">
<div class="container">
<label for="url-entered">Name for label</label>
<div class="input-group">
<input type="text" class="form-control" id="url-entered" autofocus onFocus="this.select();" onkeyup="onEnterKeyUp(event, this)" placeholder="Some placeholder text here">
<span class="input-group-btn">
<button class="btn btn-custom" type="button" onClick="trimURL()"><span class="glyphicon glyphicon-user">Crop it!</span></button>
</div><!--input-group ends here -->
<div class="res" id="hidden-res" style="margin-top: 15px; visibility: hidden;">
<span id="err-msg"></span><a id="trimmed-link"></a>
</div>
</span>
<p>Mail me at admin#site.com</p>
</div>
</div>
</div>
Can you suggest a solution for these issues? Thank you.
I'm setting up a page using angular.js and am using angular-ui-router and am running into a pretty basic issue which i can't seem to figure out. I have required the proper CDN's and I believe I have setup the angular correctly but am running into a an error:
> angular.js:38Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=portfolioApp&p1=Err…oudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.5.5%2Fangular.min.js%3A21%3A19)
My app.js is as follows:
> angular.module('portfolioApp', ['ui.router','ui.bootstrap']).config(['$stateProvider','$urlRouterProvider','$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider)
>{$urlRouterProvider.otherwise('/');
> $stateProvider
> .state('main', {
> url: '/',
> views: {
> '/': {
> templateUrl: '/views/main.html'
> }
> }
> }); $locationProvider.html5Mode({
> enabled: true,
> requireBase: false
> });
>}]);
my index.html file which is located within the main folder of my app:
<!DOCTYPE html>
<html>
<head>
<title>Tammer Galal</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.js"></script> -->
<script src="/js/app.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/style/style.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/darkly/bootstrap.css">
</head>
<body ng-app='portfolioApp' class="portfolioBody">
<div class="bs-component">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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">Home</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Github Repositories<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Repos</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div ui-view><div>
<!-- <footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer> -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
I'm trying to load a basic home partial which i have named partial-home.html which is within my public/views/partials directory path.
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 text-center">
</div>
<div class="col-xs-12 text-center">
<img class="img-rounded me" id="firstPicture" src="/img/me.jpg">
</div>
<div class="col-xs-12 text-center">
</div>
</div>
<div class="row">
<div class="col-sm-4 col-md-4">
<div>
<h3 class="siteHeader"><strong>Rock Paper Scissors!</strong></h3>
<img class="img-rounded" id="rpsPic" src="/img/rps.jpg">
<p class="siteDescrip">Play a game of Rock, Paper, Scissors! Created utilizing: <br /><strong>HTML, CSS3, Javascript, and jQuery</strong></p>
</div>
</div>
<div class="col-sm-4 col-md-4">
<h3 class="siteHeader"><strong>Face Check</strong></h3>
<img class="img-rounded" id="faceCheckPic" src="/img/faceCheckPic.jpg">
<p class="siteDescrip">A facial and emotional recognition app Created utilizing: <br /><strong>HTML, CSS3, Javascript, jQuery, AJAX, and 3 APIs</strong><br /><strong>Co-Creators: Long Phan and Evan Bates</strong></p>
</div>
<div class="col-sm-4 col-md-4">
<h3 class="siteHeader"><strong>RU Fly?</strong></h3>
<img class="img-rounded" id="faceCheckPic" src="/img/rufly.jpg">
<p class="siteDescrip">RU Fly is a Rutgers Web Flyer, where students can add their favorite restaurants and leave reviews, so everyone knows the best place to eat! Adding upcoming events soon!<br /><strong>HTML, CSS3, Javascript, Node.js, MySQL, Sequelize, Express, JawsDB</strong></p>
</div>
</div>
</div>
I really cannot figure out what it is i have done wrong and am thinking about starting from scratch. Any help would be greatly appreciated.
I tried to reproduce this error. Everything works fine, but when I added 'ui.bootstrap' module in app 'portfolioApp', same error message displayed. Also, I am not seeing any reference for 'ui.bootstrap' module in your 'index.html'. Try to remove 'ui.bootstrap' or add reference of this module in 'index.html'.
I am building a Reddit clone. So far you are able to add links, upvote/down vote, and comment/remove comments on the links posted. You must be logged in via Twitter to add comments or posts.
The big issue I am facing is whenever a post has comments, they do not show up if you reload the website. You must add a new comment to see comments which are already present. The next big issue is if you add a new post it will automatically inherit the comments from the previously commented on post even though these comments are not in the posts data on the Firebase Server.
If you comment on the new post it causes all the other post's comments to inherit the new comment on the new post.
Here is the source code.
<div>
<span>Currently Logged in as: {{authData.twitter.username}}</span>
<form>
<div class="form-group">
<div class="row">
<div class="col-xs-6">
<label class="control-label" for="focusedInput">Post Name</label>
<input type="text" ng-model="post.name" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<label class="control-label" for="focusedInput">Description</label>
<input type="text" ng-model="post.description" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<label class="control-label" for="focusedInput">URL</label>
<input type="text" ng-model="post.url" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-3">
<button ng-click="savePost(post)" class="form-control" style="margin-top: 25px">Submit</button>
</div>
</div>
</div>
</form>
</div>
<div ng-repeat="post in posts">
<h2><a ng-href="{{post.url}}">{{post.name}}</a></h2>
<p>{{post.description}}</p>
<button ng-click="deletePost(post)" class="btn btn-danger">Delete Post</button>
<span>{{post.votes}}</span>
<button ng-click="addVote(post)" class="btn btn-primary">Up Vote</button>
<button ng-click="removeVote(post)" class="btn btn-primary">Down Vote</button>
<br>
<br>
<div class="panel panel-default" ng-repeat="comment in comments">
<div class="panel-body">
<a ng-href="https://twitter.com/{{comment.user}}">{{comment.user}}</a>
</div>
<div class="panel-footer">
{{comment.text}}
<br>
<button class="btn btn-danger" ng-click="removeComment(post, comment)">Remove Comment</button>
</div>
</div>
<form>
<div class="input-group">
<input ng-model="comment.text" class="form-control">
<div class="input-group-btn"><button ng-click="addComment(post, comment)" class="btn btn-success">Add Comment!</button></div>
</div>
</form>
</div>
<br>
<button class="btn btn-primary" ng-click="login()">Log in with Twitter</button>
<!--Starter Project for the Reddit Clone-->
<!doctype html>
<html ng-app="reddit-clone">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.min.js">
</script>
<script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>
<link rel="stylesheet" href="bootstrap.css">
<script src="app.js"></script>
<title>Reddit Clone</title>
</head>
<body style="width: 80%; margin: 0 auto">
<h1 class="text-center">Reddit Clone</h1>
<div ng-view></div>
</body>
</html>
Here is a picture of the database showing that the comment only exists for the first post.
Here is a picture showing how the comment is display on both posts even though it is only in one in the database.
You are storing only one comments array on your $scope.
Then in your template, you are looping over this one array for each post inside the ng-repeat on posts, hence it is the same for both posts. You need to loop over the comments that are specific to a post instead. Like so:
<div class="panel panel-default" ng-repeat="comment in post.comments">
Notice the post.comments.
I'm having tough time getting the jQuery validation engine plugin working.
It was working well before, but after I introduced this theme (usman.it/free-responsive-admin-template/).
The script doesn't seems to be working.
What might be wrong here?
Any suggestions are welcome (This is just a test form with only 1 input tag, but in reality there would be several).
File
<link rel="stylesheet" href="../css/validationEngine.jquery.css" type="text/css"/>
<script src="../js/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
</script>
<script src="../js/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
</script>
<script>
jQuery(document).ready(function(){
// binds form submission and fields to the validation engine
jQuery("#k").validationEngine();
});
</script>
<div>
<ul class="breadcrumb">
<li>
Home <span class="divider">/</span>
</li>
<li>
Admins
</li>
</ul>
</div>
<div class="row-fluid sortable">
<div class="box span12">
<div class="box-header well" data-original-title>
<h2><i class="icon-edit"></i> Add New Admin</h2>
</div>
<form action="#" id="k" method="post">
<div class="box-content">
<div class="control-group">
<label class="control-label" for="focusedInput">Focused input</label>
<div class="controls">
<input class="input-xlarge focused, validate[required] text-input" name="focusedInput" id="focusedInput" type="text" >
</div>
</div>
<div class="control-group">
<input type="submit" name="Send" class="btn btn-success">
</div>
</div>
</form>
</div><!--/span-->
</div><!--/row-->