jQuery not working in any browser in Windows 8 - javascript

jQuery is not working on my Windows 8.1 64-bit machine. Is there any known issue that causes that?
Have tried both CDN (Google, jQuery), and local sources, but none work. I know the code is correct because I've tried various examples to verify, including old code that worked fine before, and code from this YouTube tutorial:
https://www.youtube.com/watch?v=VRnQOcVclS8
I've tried using this script source also, to no avail:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
How to test: click on a paragraph tag, and it should hide. Click on an H1 tag, and it should toggle open or closed. None of this works for me.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Demo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Heading one</h1>
<p>This is just some text for heading 1</p>
<h1>Heading two</h1>
<p>This is just some text for heading 2</p>
<h1>Heading three</h1>
<p>This is just some text for heading 3</p>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("p").hide();
$("h1").click(function() {
$(this).next().slideToggle(300);
});
});
</script>
</html>
None of it is working. Not sure what is going on.
Update
Several helpful commenters have tested my code and it appears to work fine on their machines, which really is helpful to narrow down the issue. It has been established that my code is good. So, at this point, to anyone who would offer help, I'm looking for specific information, "known issues", or "gotchas" on why this isn't working for me. I suspect it has something to do with Window 8 or Windows 8.1, but I don't know what it would be.

Change
<script type="text/javascript" src="http"//code.jquery.com/jquery-1.8.0.min.js"></script>
to
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

I had problems trying to run code from my computer before, so I just use JSFiddle. If that's not an option for you, trying disabling security settings that you prevent you from running code that's stored on your computer. That or get a website to run it off of.
If you have VisualStudio, you can run code in there and it will work. Just create a blank app and replace all the code and remove references to WinJS. You can get an express version if you don't. Sorry if that's not your preferred option. That was my work-around before I got JSFiddle.

Try With
$(document).ready(function() {
$("p").hide();
$("h1").click(function() {
$(this).next().slideToggle(300);
});
});
Add http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js
instead of http://code.jquery.com/jquery-1.8.0.min.js
Demo

Related

Why is javascript not executing on a web page when accessed via iOS Twitter browser?

I am completely stumped and I'm sure this was working before.
I have a simple web page with the word "hello" in a div which does two things onload:
1) alert "2"
2) change the text of the div to "bye"
All vanilla Javascript, no libraries.
This works fine on the Chrome, IE, FF, Safari (as you'd expect). If I hit a link in the iOS Twitter app (latest version) to this web page neither of those two things happen. It seems to me that the Javascript is not being executed at all but how can this be? Has anyone else experienced this?
UPDATE
In fact vanilla Javascript will work. The alert test was misleading - I believe thats been disabled which is why it won't work. JQuery will not work however - possibly to do with the $ reference conflicting.
UPDATE 2
The problem has moved on now - my initial assumptions were not entirely correct.
The following code for a web page works:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
#test {
color:red;
}
</style>
<script>
window.onload = function () {
document.getElementById('test').innerHTML = 'vanilla javascript worked';
$("#test").text("Jquery worked");
}
</script>
</head>
<body>
<div id="test">
hello
</div>
</body>
</html>
The following code does not work. The path to my script is sound and works on normal browsers, but when in the iOS Twitter in-app browser it seems the local script will not load:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<script src="~/Scripts/jquery-2.1.1.js" type="text/javascript"></script>
<style>
#test {
color:red;
}
</style>
<script>
window.onload = function () {
document.getElementById('test').innerHTML = 'vanilla javascript worked';
$("#test").text("Jquery worked");
}
</script>
</head>
<body>
<div id="test">
hello
</div>
</body>
</html>
I have tested the issue on accessing the webpage via Facebook which also works fine either way. The problem is with the Twitter browser only on iOS.
I have tried using an absolute path to my script which also does not work.
UPDATE
This issue is not on iPad. It is iPhone only. As it was working before fine I'd say this is a bug from the latest release of the iPhone Twitter app. Will wait for a fix from Twitter.
Turned out to be that I was re-writing all requests from Twitter to a pre-rendered html instance (brombone). So when it was looking for that file it was actually looking at the brombone server not mine. I took out the rewrite and its fine now.
Completely unrelated to what I was going on about but I solved it nonetheless and may be a reminder to those with similar problems to look outside of the box and check server setups etc...

Javascript code works in Jsfiddle but not in Local browser

I'm currently working on a portfolio website. And I came into a problem while scripting my java code. I tried to troubleshoot for hours on end but to no avail. Then I just decided to make the simplest code to see if it was just me that was being a total idiot. Here is the code:
$(document).ready(function() {
$("p").hide();
$("h1").click(function(){
$(this).next().slideToggle(300);
});
});
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Hi.</h1>
<p>How are you?</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jtest.js"></script>
</body>
</html>
Any help??? Maybe I'm just linking it to the HTML wrong or something. It might just be a simple solution I'm not figuring out.
Check make sure your browser has JavaScript Engine turned on.
Make sure you include all the files name correctly.
Put scripts inside head tab
Sometimes Internet Explorer disables scripts from running it gives you a warning

javascript document ready function

And once again I am stuck in the learning process. I am trying to animate a background of a site using the help provided here. But I am a little stuck. As I am teaching myself javascript (to replace basic actionscript). I like to write line by line instead of copying an pasting so I can understand how things work.
This is what I have so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Site</title>
<script type="text/javascript">
$(document).ready(function(){
window.alert("function started");
});
</script>
</head>
<body>
</body>
</html>
As you can see the alert window should pop up as the function is started, but it doesn't. Is there a reason why this happens or should I just set up a body onLoad function to handle what I want to do when the page loads?
You forgot to include the jQuery javascript API in your page. It should be included before you use the $() function (which is an alias for the jQuery() function in this case.)
If you check your browser's Javascript console you probably have an exception for trying to use undefined $. (In IE a handy trick while doing web development is to enable the Advanced option for "Display a notification for every script error," but this can get annoying when visiting other sites because lots of developers are lousy about identifying and fixing unhandled JS exceptions! Modern browsers usually use 'F12' (in the US at least), to open the developer tools for debugging Javascript, etc.)
Corrected code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Site</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
window.alert("function started");
});
</script>
</head>
<body>
</body>
</html>
This example uses the Google-hosted jQuery API, but you may also choose to download jQuery from http://jquery.com
Demo
http://jsfiddle.net/dvADs/
You are missing library reference~! like this
<script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script>
Hope rest feeds your needs :)
Basics: http://jqfundamentals.com/chapter/jquery-basics
JQ CDN: http://jquery.com/download/
$(document).ready(function(){
window.alert("function started");
});
You are not first loading jQuery. jQuery is a library that you are trying to call by using the $. You can download it here: http://jquery.com/download/. Make sure you load jQuery before the javascript code.

Using jQuery to make a popup

I'm trying to make a simple jQuery popup on an existing page. The page itself will have the first part of some articles, with a more button following the intro. I would like the more button to display a jQuery popup with the rest of the article.
So far, I've been following the tutorial: http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/
However once it's up on share point, it doesn't work. I click the button and nothing happens. I even modified the JS so all it does it display an alert, but that doesn't work ether. The link between the page and JS seems to be broken. However I even viewed the src (using my web browser) and sure enough the script tag is in there, but nothing JS is working. Any ideas?
Here's the html page I copy into share point (the java script file is exactly the same as in the tutorial):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="/articles/.../popup.js" type="text/javascript"></script>
<style type="text/css">
/* CSS goes here, same as in the tutorial */
</style>
</head>
<body>
<div>
<div class="backgroundmain" style="margin-left:-75px; margin-top:-35px; margin-right:-32px;">
<!-- HTML FOR THE ARTICLES-->
</div>
<center>
<div id="button"><input type="submit" value="Press me please!" /></div>
</center>
<div id="popupContact">
<a id="popupContactClose">x</a>
<h1>Title of our cool popup, yay!</h1>
<p id="contactArea">
Here we have a simple but interesting sample of our new stuning and smooth popup...
</p>
</div>
</div>
</body>
</html>
Thanks for all your help, I really appreciate it.
EDITS:
Here's the results from Chrome's dev tools:
jsFailed to load resource: the server responded with a status of 404 (NOT FOUND)
Refused to execute a JavaScript script. Source code of script found within request.
popup.js:147Uncaught ReferenceError: $ is not defined
However I first tried this in firebug and discovered the alert actually works in firefox.
This line looks suspect:
<script src="/articles/.../popup.js" type="text/javascript"></script>
Where exactly is popup.js? If you have it locally, make sure the path is correct. If not you will need to specify the URL to the file and not a relative path.

Javascript doesn't execute in Safari when placed in HEAD

I'm having a problem with Javascript not executing when placed in the HEAD section of an HTML page in the Safari browser. It works fine in IE, Chrome and Firefox, but with Safari I have to move it down to between the and tags.
Anyone know if this is a known issue?
PS. The HTML and Javascript is contained in .PHP files, if that makes a difference.
Update:
Code I'm using to test:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
alert("In HEAD Tag");
</script>
</head>
<body>
<div id="innerthumbcontainer">
Test
</div>
</body>
</html>
If I open the page containing this directly it seems to work. But as soon as I load this into a DIV from another page it does not fire in Safari. In all the other browsers it does work though.
I think I would have heard about it if that was a general problem, you probably have a syntax error in your HTML or something, which for some reason makes Safari give up. Post your code, preferably the HTML output, and we'll have a chance of telling you what is wrong.
Edit: As far as I understand you are trying to use a complete HTML page as content for a div, you really can't do that. Depending on what exactly you are trying to achieve you could either use an iframe, or you could cut out the html, header and body tags.

Categories