The solution to this problem might be very trivial but its got me banging my head on walls! Bootstrap's js files are not loading on my web page for some reason.
I simplified the page to the bare minimum and here's the code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="cz" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="cz">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
</body>
</html>
Now when I click on the button, nothing happens and I don't see the dropdown. When I checked the js files loaded(through browser inspect element), I see that only JQuery has loaded.
If I remove JQuery, I get the correct error that Bootstrap requires Jquery. I've created a codepen and it works perfectly fine on it. Could someone help me with this please?? :(
you didn't close first tag. it should be,
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
UPDATE : if you are thinking why self closing script tags are not working, refer this. Why don't self-closing script tags work?
Close script tag
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
Related
I've checked Bootstrap documentation on v 3.3.7 but perhaps I have missed something.
My issue is that my dropdown (below) is not working when I use CDN for Bootstrap JS v3.3.6, but it does when I change it to v3.3.7.
However when I change to v3.3.7, my tabs no longer work.
When I remove the Bootstrap JS link, the tabs work again.
<!doctype html>
<html>
<head>
<title>Quiz App!</title>
<link rel="icon" type="image/png" href="http://plainicon.com/dboard/userprod/2921_4eb4c/prod_thumb/plainicon.com-64851-256px-36c.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 id="header"><span class="glyphicon glyphicon-grain"></span> <small>(in development)</small></h2> </hr>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><span class="glyphicon glyphicon-home"></span></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Featured Topics<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>U.S. Presidents</li>
<li>Business & Investing</li>
<li>Astronomy</li>
<li>Movies</li>
</ul>
</li>
<li role="presentation">All Quizzes</span></li>
<li role="presentation">Create a Quiz</span></li>
</ul>
</div>
</div>
{{{body}}}
</div>
</body>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</html>
Thanks in advance for any help.
The root of your problem is the href of your links inside tabs. In order for the bootstrap js to work, links should be referencing local content, for example some div id, like:
All Quizzes</span>
Bootstrap js hits it's head on the relative path in your link and throws an error (you can see it in the console, when you click on the tab).
If you look inside the bootstrap 3.3.7 source code for tabs.js, you'll see that it checks (line 29) the data-target attribute of the clicked element (tab) and if it's empty, falls back to href (line 32). Then it tries to use this value as a jquery selector (line 51) to find the element, which fails in your case.
For example, when you click on All Quizes tab, the js tries to do this:
$('/all-quizzes') and that throws an error, because it is not a valid jquery selector.
I am creating a simple static website using AngularJS.
I am routing ng-view on my template to different html pages, like this one:
home.html:
<script type="text/ng-template" id="views/home.html">
You are in home
</script>
Here is my Index.html:
<!DOCTYPE html>
<html lang="en" ng-app="myApp" >
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<title>My Website</title>
<base href="/">
<meta name="author" content="Me">
</head>
<body ng-controller="ContentController">
<h1>My Website</h1>
<ul class="main-nav" id="main-nav">
<li><a href="home"><i class="fa fa-home"></i>Home</li>
<li><a href="portfolio"><i class="fa fa-comment"></i>Portfolio</li>
<li><a href="articles"><i class="fa fa-comment"></i>Articles</li>
<li><a href="books"><i class="fa fa-comment"></i>Books</li>
<li><a href="about"><i class="fa fa-shield"></i>About Me</li>
</ul>
<ng-view></ng-view>
</body>
</html>
My routing works just after the second time I click on each one of the links (portfolio, articles, ...).
The first time I click on a link, the controller is executed, but the view does not show me the html content (i.e. "You are in home" does not appear on my initial click, just after the second one).
If I write the content of home.html on the index.html file, then it works correctly also on my initial click.
However, I would like to understand why it is not loading correctly on the first time I click on each one of these links.
Could you guys help me?
Is there a proper way to use ng-template on a separate file? Or should I use a work around in order to reload my ng-template after the first click?
Thank you
If I remove the ng-template, the issue is solved.
I will study more to understand how to use ng-template on separate files and will write it here.
I've recently been trying to use or familiarize myself with the JQuery tabs function. However everytime I've tried using it I get the error "undefined is not a function". I've researched this problem and a lot say it may have to do with the .js file not being loaded but that is not the case as my console tab shows it being loaded.
Here is the HTML file I have been trying to test out:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="Portal.css" media="screen" />
<script type="text/javascript" src="Portal.js"></script>
<script src="tabs.js"></script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href='#tab1'>Tab 1</a></li>
<li><a href='#tab2'>Tab 2</a></li>
<li><a href='#tab3'>Tab 3</a></li>
</ul>
<div id='tab1'>
<p>Hi, this is the first tab.</p>
</div>
<div id='tab2'>
<p>This is the 2nd tab.</p>
</div>
<div id='tab3'>
<p>And this is the 3rd tab.</p>
</div>
</div>
</body>
</html>
And the tabs.js file (which throws the undefined error when debugging):
$(document).ready(function () {
$("div.tabs").tabs();
});
Thanks. I can provide more details if needed. No CSS is being used yet (but I don't believe that to be the issue here).
Make really sure, that you are loading the js from the external sources.
I had a similar problem. My code was working in konqueror, opera and some firefox / iceweasel browsers, but not in others and not in chromium.
It turned out, that while my page was https hosted, i tried to load the external js over insecure http connection. These links were silently discarded by the "not working" browsers... i spent hours on that frack.
Hope this helps you or others.
You're selecting class tabs but what you have is ID tabs.
Change it to:
$( 'div#tabs' ).tabs();
Or change your HTML to:
class="tabs"
$( "#tabs" ).tabs() use this instead of $("div.tabs").tabs()
I am new to jquery and can't even assume how deeply this issue can go.
When the external page (in this case shop.php) is loaded into index.php, by Jquery function .load(); , it falls apart. Many jquery commands and plugins, that are applied to the shop.php page, aren't working.
This confuses me, because some of js commands and plugins still works. Obviously i can't say that files are not loaded completely, just majority of them are not working.
When I paste shop.php content into index.php, it works perfect. Also when i add desired js code into shop.php (wrapped into script tag), it works as well.
I really don't expect from anyone to look deeply into this problem. I just wanna know if this is common issue, and is there simple explanation for it ?
If not i'll seek for some different approach.
My code:
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.4.min.css">
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.min.js"></script>
<script type="text/javascript" src="js/shop.js"></script>
<script type="text/javascript" src="js/jquery.touchcarousel-1.2.js"></script>
<script type="text/javascript" src="js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/jquery.ddslick.js"></script>
<script type="text/javascript" src="js/top-navigation.js"></script>
</head>
<body>
<div id="top-bar"><?php include("top-bar.php"); ?></div>
<div id="pageWraper"><?php include("home.php"); ?></div>
</body>
</html>
top-bar.php
<div id="nav">
<ul id="navigationWraper">
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<ul class="submenu">
<li>asdasd</li>
<li>asdasdas</li>
<li>derwer</li>
</ul>
<li>Shop</li>
<li>Portfolio</li>
<li>Gallery</li>
<li>Contact Us</li>
</ul>
</div>
shop.php
<div id="shop">
<div id="shopheader">
<div id="shopitemstop">
<div id="productcat">
<!-- bunch of code -->
</div>
</div>
</div>
</div>
Jquery:
$(document).ready(function(){
$(function() {
$("a.menuLink").on("click", function(e) {
e.preventDefault();
$("#pageWraper").load(this.href);
});
});
});
Hope this helps
Thanks,
Update :
I added:
<script type="text/javascript">
$(document).ready(function(){
$.getScript("js/shop.js");
$.getScript("js/jquery.touchcarousel-1.2.js");
$.getScript("js/main.js");
});
</script>
on top of shop.php page, dont know how right this is, but its working now.
Only thing that bugs me is if i remove jquery.touchcarousel-1.2.js from index.php head, page falls apart. It is like, only working if both of them are loaded ????
Question:
I really don't expect from anyone to look deeply into this problem. I
just wanna know if this is common issue, and is there simple
explanation for it ?
Answer:
Yes, it is a common problem for Ajax/dynamically loaded content.
The cause is: that most plugins work on the DOM as it exists when the plugin is run (unless they were specifically created to work with dynamic content).
The fixes include:
Find another plugin that is tolerant of dynamic content
Re-run the plugins
Strip out existing plugins and re-run the plugins (takes some effort to figure out some plugins)
Don't load content dynamically for plugins that do not support it
My code as follows does not work. I;ve tried including the js files, also the custom js to activate each tab individually but it does not work.
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" media="all" href="css/bootstrap.min.css">
<title>Bootstrap Page Layout - Sample Demo</title>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
</body>
Can anyone point what am I doing wrong?
Check your link to the bootstrap.js file. It appears you are using the minified css... you probably want the minified js file too.
<script type="text/javascript" src="js/bootstrap.min.js"></script>
Depending on your browser, check for any errors in your web developer tools. In Chrome, this link will help: https://developers.google.com/chrome-developer-tools/
EDIT
It appears jQuery is missing from your file. Include this link in the head (although I recommend loading JS in the footer for progressive enhancement / improved loading):
<script src="//code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
Bootstrap You need to download and add jquery in your script. Something like this
<script type="text/javascript" src="/script/jquery-1.7.2.min.js" />
see here for your reference i added jquery v 1.7.2