Progressive bar does not show progress - javascript

For some reason the progress bar is not working.
Here is the HTML, CSS, and JS:
<html>
<head>
<link href="css/style.css" rel="stylesheet">
<script src="js/app.js" type="text/javascript"></script>
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
</head>
<body>
<div class="bar-one bar-con">
<div class="bar" data-percent="20"></div>
</div>
<div class="bar-two bar-con">
<div class="bar" data-percent="50"></div>
</div>
<div class="bar-three bar-con">
<div class="bar" data-percent="70"></div>
</div>
<script src="js/app.js" type="text/javascript"></script>
</body>
</html>
The rest of the code is in the link, I am still learning to use the page (thousand apologies):
https://jsfiddle.net/b4kqt1cz/

Your problem seems to be that jQuery is not being loaded, and as such the call to $.fn.progress() - where the progress bars are actually updated - is not working. This can be verified in your browser's console (usually found by pressing F12), where you can find the following error:
Uncaught ReferenceError: jQuery is not defined
at window.onload
If possible, you should update your reference to jQuery in your <head> by either using one of the jQuery CDN links, or downloading a copy of jQuery, placing it in your js folder and referencing it from there.
An updated JS Fiddle, which changes the reference to JQuery to the CDN link for version 1.12.4, works as expected.

Related

Some JavaScript not working in one of two identical HTML files

I have two identical HTML files (below) containing JavaScript to load HTML from separate files into divs. HTML file A works fine. HTML file B, however, does not work. I get the following errors while inspecting file B:
jquery-1.10.2.js:1 Uncaught SyntaxError: Invalid or unexpected token
working2.html:13 Uncaught ReferenceError: $ is not defined
at working2.html:13
(anonymous) # working2.html:13
working2.html:18 Uncaught ReferenceError: $ is not defined
at working2.html:18
(anonymous) # working2.html:1
The issue is experienced in Firefox and Chrome while the website is running on IIS. I'm hoping it's just something simple that I'm missing, as I'm new to JavaScript. Any help is appreciated!
File A (working):
<head>
<title>Switch Maps</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- Sorting Javascript script from: https://www.kryogenix.org/code/browser/sorttable/ -->
<script src="./Scripts/sorttable.js"></script>
<!--JS from https://stackoverflow.com/a/42333464 -->
<script src="./Scripts/jquery-1.10.2.js"></script>
</head>
<body id="Switch_Maps">
<!--Nav bar (code modified from https://stackoverflow.com/a/42333464)-->
<div id="nav-placeholder"></div>
<script>$(function(){$("#nav-placeholder").load("./page_elements/side-bar.html");});</script>
<!--end of Navigation bar-->
<!--Footer (code modified from https://stackoverflow.com/a/42333464)-->
<div id="foot-placeholder"></div>
<script>$(function(){$("#foot-placeholder").load("./page_elements/foot.html");});</script>
<!--end of Footer-->
</body>
File B (not working):
<head>
<title>Switch Maps</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- Sorting Javascript script from: https://www.kryogenix.org/code/browser/sorttable/ -->
<script src="./Scripts/sorttable.js"></script>
<!--JS from https://stackoverflow.com/a/42333464 -->
<script src="./Scripts/jquery-1.10.2.js"></script>
</head>
<body id="Switch_Maps">
<!--Nav bar (code modified from https://stackoverflow.com/a/42333464)-->
<div id="nav-placeholder"></div>
<script>$(function(){$("#nav-placeholder").load("./page_elements/side-bar.html");});</script>
<!--end of Navigation bar-->
<!--Footer (code modified from https://stackoverflow.com/a/42333464)-->
<div id="foot-placeholder"></div>
<script>$(function(){$("#foot-placeholder").load("./page_elements/foot.html");});</script>
<!--end of Footer-->
</body>
Thanks in advance for any help possible!
Edit:
The answers here: JQuery - $ is not defined do not resolve the issue for me.
If you can switch the filenames and the original file A still works, the only possible reason is that your files aren't identical after all. You should use a binary diffing tool to confirm that.

Stupidly simple javascript won't run

I am having trouble with a stupidly simple problem. I have an HTMl file that has successfully hooked up to a css file, but ever time I try something easy in Javascript, it doesn't do it. All of my files are in the same folder. I am running this off of Notepad ++
enter code here
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div class="header">
</div>
<div class="main">
<div id="comic"></div>
<div id="caption"></div>
<div id="prompt">
<h3>Hello, world!</h3>
<div class="btn" id="yes"><img src="YESsmall.jpg"/></div>
<div class="btn" id="no"><img src="NOsmall.jpg"/></div>
</div>
</body>
</html>
And my Javascript looks like this:
$(document).ready(function() {
$('.main').hide();
});
what on earth have I done wrong?
I don't see you loading jQuery (or anything else providing a $). You can use a jQuery provided by a content delivery network (as described here) by adding
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
(or similar, depending on what version you need/want) before your other <script>

jQuery Not Working in Eclipse

Still a bit new with jQuery so I may be making a basic error.
I just completed the jQuery introductory course and now am trying to do some of my own basic work, but have hit a slight road block.
Essentially it seems the jQuery file script.js isn't getting called properly.
When I ran it inserting it into stackoverflow it seems to work fine. However,
when I pull the html file in the browser it only displays the html elements in the file and not any of the jQuery code.
Any help would be appreciated!
$(document).ready(function() {
$("body").append("<p>I\'m a paragraph!</p>");
/* write 'Hello World! to the first div' */
$("#first").append('<h1> Hello World!</h1>');
//a clickable 'Hello World!' example
$("#link").click(function() {
$('#greeting').append("<h1>Hello Again!</h1>");
});
});
<!DOCTYPE html>
<html>
<head>
<title>Hello World - jQuery Style</title>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
</head>
<body>
<div id="first"></div>
<div id="second">
Click Me! <br /> <span id="greeting"></span>
</div>
</body>
</html>
You should declare your current javascript file after you get the jquery.min.js
If you look in your console ( right click and inspect ) You will notice that it cannot understand $ jquery sign.
Solution should be just swap these two lines in your html :
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
Try switching the order of the tags for script.js and jquery.min.js so that jquery is initialised first

'$ is undefined' error jQuery

So I've got the following HTML and jQuery code, and whenever I try to load the page, Firebug gives me the 'ReferenceError: $ is undefined' error; as such, the jQuery code doesn't work. I'm using Coda 2.0.9 on Mavericks. I've loaded the jQuery library (using Google CDN) before the jQuery UI library, and both of those before the script I've written. In the Net section of Firebug, the only request that it shows is the font from Google Fonts. This is just a splash page so the code is minimal. For the life of me I can't figure this out so any help would be much appreciated.
<meta name="description" content="Description here" >
<title>This site is being updated</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Signika+Negative' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="jquery.js"></script>
<h1 class="maintitle"> This site is getting cleared up! </h1>
<img class="construction" src="images/construction_800.png">
<div id='wrapper' style='text-align:center;width:auto; margin: 0px 90px'>
<div style='float:left;width:50%'>
<strong>Office 1</strong> <br>
p. xxx.xxx.xxxx <br>
f. xxx.xxx.xxxx
</div>
<div style='float:right;width:50%'>
<strong>Office 2</strong> <br>
p. xxx.xxx.xxxx <br>
f. xxx.xxx.xxxx
</div>
</div>
<p class="comeback"><strong>Please check back soon for the updated site</strong></p>
</body>
jQuery:
$(document).ready(function() {
$(".maintitle", ".construction", "div", ".comeback").fadeIn("slow");
});
You're loading in Jquery Twice in the header.
Remove the last line
<script type="text/javascript" src="jquery.js"></script>
The actual issue is that there is a conflict somewhere with the $ handler that jQuery uses.
If so, changing $ to jQuery like #Choineck should work.
jQuery(document).ready(function($) {
$(".maintitle", ".construction", "div", ".comeback").fadeIn("slow");
});
I think the problem is that you have a slight delay getting the jQuery from ajax.google
But you could also try something like
<script language="javascript" type="text/javascript">
$j = jQuery.noConflict();
</script>
Then
$j("...")

jQuery mobile - DOM Exception 18

I am trying to experiment with jQuery mobile, but can't seem to get started.
I have the following HMTL file hosted on a local server:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
</body>
</html>
Which is causing
Javascript error: undefined SECUIRTY_ERR: DOM Exception 18
when accessed from my iPhone from http://192.168.1.1:8000/mobile.html
Did you link the CSS stylesheet file as well before the jquery script include tags?
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
Also, in order for the page to show, you must contain content into containers like this:
<body>
<div data-role='page'>
<div data-role='header'>
Header goes here
</div>
<div data-role='content'>
Content goes here
</div>
</div>
</body>

Categories