I'm relatively new to javascript and jQuery. I'm working on a web application where I have jQuery tabs in a markdown document. To keep things clean I've kept my javascript in a separate document and not in the markdown. Here is my javascript which is in tabs.js:
$(document).ready(function() {
$( "div.tabs" ).tabs();
});
Here is the markdown with embedded html and javascript
<html lang="en">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="/stylesheets/docs.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<script src="/javascripts/tabs.js"></script>
{% include resources.html %}
Requirements
------------------
<body>
<div class="tabs">
<ul>
<li>C#</li>
<li>Javascript</li>
</ul>
<div id="tabs-1">
<pre class="prettyprint">Some C# code</pre>
</div>
<div id="tabs-2">
<pre class="prettyprint">Some Javascript Code</pre>
</div>
</div>
</body>
When I run this code on the localhost everything works perfectly fine but when I deploy it I get an Uncaught TypeError: undefined is not a function error right after this line: $( "div.tabs" ).tabs();
Any ideas why this is happening? Any help would be greatly appreciated.
Related
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
I have asked a question simpler to this before but I have made progress now.
I have a menu bar which uses 2 files of Javascript and then another 2 files of Javascript for another object on the page.
This is my code this is breaking at the moment:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title></title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="Javascript/MenuBarAdmin/AdminMenuJS.js" type="text/javascript" ></script>
<script src="Javascript/MenuBarAdmin/AdminMenuJSmin.js" type="text/javascript"></script>
<script src="Javascript/bSimplexMenuBarTransit.js" type="text/javascript"></script>
<script src="Javascript/bSimplexMenuBar.js" type="text/javascript"></script>
<link href="Stylesheet/bSimplexMenuBar.css" rel="stylesheet" />
<link href="Stylesheet/bPersonnelTracker.css" rel="stylesheet" />
<link href="Stylesheet/ScheduleStyle/bsimplex.css" rel="stylesheet" />
<script type="text/javascript">
javascript: window.history.forward(1);
</script>
<script type="text/javascript" charset="utf-8">
function select(e) {
e.eventSelect(e);
menu.show(e);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="script1" runat="server"></asp:ScriptManager>
<div class="wrapper">
<div class="bsimplex-header-bar">
<ul class="modern-menu theme2">
<li><span>Home</span></li>
<li><span>My Calender</span></li>
<li><span>Manager</span></li>
<li><span style="background-color: #f08100 !important;">Absences</span>
<ul>
<li><span>Sickness</span></li>
<li><span>Medical</span></li>
<li><span>Lateness</span></li>
<li><span>Other</span></li>
</ul>
</li>
<li><span>Reports</span>
<ul>
<li><span>Allocation</span></li>
<li><span>Rota</span><</li>
</ul>
</li>
<li><span>Admin</span></li>
<ul class="mm-group mm-right">
<li class="mm-icon">
<div class="menubaricon">
<img src="../../Images/bSimplex_icon_menubar.png" />
</div>
</li>
</ul>
</ul>
<script type="text/javascript">$(".modern-menu").modernMenu();</script>
</div>
The error comes at the bottom of the code when I am trying to find .modernMenu it just says that the object is undefined.
The first 2 script lines that call javascript files are used for a vertical menu bar, and the second 2 are for the horizontal menu bar that isnt working.
.
I have ran through my code 100's of times to find the issue and when i comment out the first 2 lines for the vertical bar the error will go and will work correctly but the vertical bar wont work and visa versa.
I dont know if im correct but at the bottom where the error is happening do i have to call the script file i want to get the information from? or am i limited to the amount of javascript files?
The script tags you're commenting out must be altering $() for their own purposes. There are actually many libraries that use the $() library, so jQuery has conveniently given a jQuery() function which is exactly the same as $(), but has a different name that's probably not going to be used by other libraries. Because the library you inserted altered $() so that it's not jQuery() anymore, use jQuery() instead:
<script type="text/javascript">jQuery(".modern-menu").modernMenu();</script>
try
$(function(){
$(".modern-menu").modernMenu();
})
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
This is the code in the script.js:
$(document).ready(function() {
$('#mainobject').fadeOut('slow');
});
And this is the code in the index.html:
<!DOCTYPE html>
<html>
<head>
<title>Hitler Map</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"></link>
<script type="text/javascript" src="script.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div id="header">
<h1 id="title">
Content
</h1>
</div>
<div id="footer">
</div>
<div id="mainobject">content1
<div id="aides">subcontent
<ul id="list1">
<li class="items">nananana batman</li>
<li class="items">woohoo</li>
</ul>
</div>
<div id="family">Family
<ul id="list2">
<li class="items">spoder-man</li>
<li class="items">dolan</li>
</ul>
</div>
</div>
</body>
</html>
The stylesheet works fine, but the Javascript is working neither locally nor on a server. Please help? It is a simple enough code.
You are not including Jquery
Add the following line inside head tag:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
Also close ul tag
<ul>
<li id="mainobject">some content</li>
</ul>
Assuming you added Jquery plugin to your document.
And
Wrong html
<ul>
<div id="mainobject">some content
<ul>
should be
<ul>
<li id="mainobject">some content </li> //seems here li.Div not allowed
</ul>
jQuery
$(document).ready(function() {
$('#mainobject').fadeOut('slow');
});
HTML
- Changed <div> to li, since div isn't allowed inside an <ul></ul> unordered list.
Always make sure you close all elements that need to be closed in HTML. In your sourcecode you forgot to close the <div> on which you wanted to use jQuery.
<head>
<title>some content</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"></link>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="header">
<h1 id="title">
Some more content
</h1>
</div>
<div id="footer">
</div>
<ul>
<li id="mainobject">some content</li>
<ul>
In case that your script.js is not the jQuery lib, add into the <head> tag
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
you must include your external script AFTER jQuery
Put script.js below the jquery, because it depend on jquery
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="script.js"></script>
Note: use minified version of jquery spped up the webpage
use <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> instead of <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
Also use Jquery migrate plugin for deprecated function works
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>