Javascript code works in Jsfiddle but not in Local browser - javascript

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

Related

Brackets live preview won't load Javascript w/ HTML and CSS files

When I open live preview in brackets the page comes up but never finishes loading. Live preview has worked fine while working on HTML and CSS files, but now that I'm incorporating Javascript I am having this issue.
I have re-installed the program twice with no success, restarted my computer, tried running live preview while all extensions were disabled, and have searched through numerous pages on google on how to fix this issue with no solution.
Also it seems that adding the "script" tag (sourced to my javascript file) is causing the issue. When I run live preview without the tag it loads fine.
This has been an issue for some time so any guidance would be GREATLY appreciated. Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Section 2: JavaScript Language Basics</title>
</head>
<body>
<h1>Section 2: JavaScript Language Basics</h1>
<script src="script.js"></script>
</body>
</html>
I've emptied the Javascript file in an attempt to identify the problem. As stated earlier this code alone would have live preview loading non-stop.
Please let me know if anymore information is needed. Thanks again!
I think it has to something with the directory like which folders you placed it in for example if the .js file is at the same place as the index.html then what you've done should work.
if not it's in, for example, a folder called "js" then use something like
<script src="../js/script.js"></script>
play around with
../
or
./
because I can't tell without seeing your file structure I can't really know what's happening.

External link Alternative for JS

hi am trying to create an external link for a java script program i created and i tried using https://www.000webhost.com but they blocked me, so pleases is there any better way i can do this, plus am still a learner in programming,
here is the code i created and i want it to be linked,
document.body.appendChild(document.createElement('script')).src='https://usscript1.000webhostapp.com/example1';
EDIT:
For hosting the JS source file on some external server for testing you can use sites like http://yourjavascript.com
You can search for more alternatives on Google but this one worked well for me :)
Original Answer:
As others pointed out in comments, you can simply put the source url of JavaScript program in src attribute of <script> tag...
<html>
<head>
<script src="https://usscript1.000webhostapp.com/example1.js"></script>
</head>
<body>...your website's body here...</body>
</html>
Regarding the blocking issue, make sure your src link to the JavaScript file is correct (by opening the link in seperate browser tab or have look at the console in inspect page window for any errors).
You can put the script on the same site and link to it as,
<html>
<head>
<script src="/example1.js"></script>
</head>
<body>...your website's body here...</body>
</html>
If you are facing issues with putting the file on your site, you can directly put the code of JavaScript program inside <script> tag like this...
<html>
<head>
<script>
...your JS program goes here...
</script>
</head>
<body>...your website's body here...</body>
</html>

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...

Delphi, EmbeddedWB/TWebbrowser - jQuery not executing

I am using EmbeddedWB (A TWebbrowser extension) to do like a "live preview" of some dynamically generated content.
I am trying to add jQuery into the mix, so I can get some fancy effects going on, however since IE9 always asks "Allow blocked content" for each and every damn page, a dynamically generated one (Webbrowser.LoadFromString) certainly wont be allowed to have fun. To put it simple: It wont allow Javascript execution.
I tried adding a SecurityManager to my TEmbeddedWB, however that did not do it either. I tested my dynamic code in Firefox, and in IE9, and it works (of course, in IE9 I have to allow first, which was how I found it was a security issue).
Is there a painless way to get around this, without having to manually go into IE and tweak something? Or am I completely wrong about the cause of the issue?
EDIT: After trying this article's method, IE does not ask if it should allow stuff anymore, however my script is still not being executed within my TEmbeddedWB/TWebbrowser..
EDIT 2: Okay, by removing the jQuery code, and displaying a plain Alert, I am forced to conclude that JS is now being executed, however jQuery is not.
EDIT 3: Here is the (stripped down) HTML code that my app generates, where jQuery is not working in my EmbeddedWB/TWebbrowser control - however, it works in Internet Explorer 9 itself:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<script type="text/javascript" src="file://C:\jQuery.js"></script>
</head>
<body>
<center>
<p>
Some stuff here!
</p>
</center>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
alert('I Am jQuery!!!!');
});
</script>
</body>
</html>
EDIT4: I have also tried switching the src to a Google Hosted jQuery, and that did not work either. Removing the Metatag did not fix it either. Just letting you know of stuff I tried before you waste time on suggesting it :)
EDIT5: By navigating to a site that uses jQuery (Webbrowser.Navigate) the site was working as expected. However when doing it from my local test.html, or by doing .LoadFromString();, it will not work.
Will not work = jQuery code not executing.
It seems to work if you use correct URL for the jquery.js file:
<script type="text/javascript" src="file://C:/jQuery.js"></script>
<script type="text/javascript" src="file:///jQuery.js"></script>
or a relative path, you can also omit the file:// protocol:
<script type="text/javascript" src="../../jQuery.js"></script>
The above works when you load the HTML from a file. The question is however, if content from memory and javascript from file system is not considered crossing a security context boundary and rejected for that reason by the embedded browser. In that case, embedding jquery directly in the HTML content (using the <script> tag) should work.

iframe problem using javascript

Does anyone know how to get the HTML out of an IFRAME? I have tried several different ways:
document.getElementById('iframe01').contentDocument.body.innerHTML, document.frames['iframe01'].document.body.innerHTML, document.getElementById('iframe01').contentWindow.document.body.innerHTML, etc
but none of them worked.
I believe the reason they're not working is that the content of my iframe doesn't have a body tag (I'm loading XML). Any other way to get all the contents of the iframe? I am open to jQuery too.
This:
document.getElementById('iframe01').contentWindow.document.body.innerHTML
works fine in the IE, but this:
document.getElementById('iframe01').contentDocument.body.innerHTML
does not work for FF.
Since you tagged this jQuery, I assume you'd appreciate an answer in jQuery to get past the cross-browser issues.
$("#iframe01").contents()
will get you into the jQuery object for the contents of the iframe. You can work from there. Security issues may prevent you from getting the actual HTML content (you'll get an error like "permission denied to get property htmldocument").
Full sample code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(function() {
$("#clickme").click(function() {
alert($("#iframe01").contents().find("body").html());
return false;
});
});
</script>
</head>
<body>
<p id="hello">Hello World, there's an iframe below this. Click me!</p>
<iframe id="iframe01" src="iframe_content.html"></iframe>
</body>
</html>
Note that you will have to load the iframe from the same domain and be sure the iframe has loaded before doing anything.
I had a similar issue a while ago. Try using:
document.frames["iframe0"].contentWindow.document.body.innerHTML
That should work for both IE and FF

Categories