Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I am trying to move jquery code from internal html file to external file and link it in the head of html file, the site is working inside html but when I move the code to external file the link is not working.
HTML head code:
<head>
<link rel="stylesheet" href="/newsite/style.css" title="new" type="text/css" media="screen" charset="utf-8">
<script type="text/javascript" src="./newsite/js/scripting.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
The problem is here:
<script type="text/javascript" src="./newsite/js/scripting.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
You are trying to use jQuery before you loaded the jQuery library. You need to switch these around like so:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="./newsite/js/scripting.js"></script>
Although I don't recommend getting the latest jQuery, you never know what may be deprecated in the future.
If that does not fix the problem make sure you directories are the correct ones. Check the console on your browser for error messages.
If you use Google Chrome, press F12 to open Dev Tools and click on the "console" tab. Then refresh the page. You should see some sort of error as to why your script is not working.
If there is no error, click the "network" tab and look for your JavaScript file. Any files loaded into the page should show up here. If if isn't there, it wasn't loaded, which means you haven't properly added the script tag to your HTML.
If you're running this from a local HTML file, I'm pretty confident your problem is the file isn't being included.
The code to include it should probably be
<script type="text/javascript" src="newsite/js/scripting.js"></script>
or
<script type="text/javascript" src="./newsite/js/scripting.js"></script>
But just starting with a backslash means the current domain's root. Which, if you're running the file locally, will be your C drive (probably).
I say probably because you haven't given much to go on.
Place a console.log(); at the bottom of your script, load your page with the developer tools console open, if you can see your log your script is running, there may be another external JavaScript file or an internal script that is interfering with your script which is stopping it from working, check to see what scripts you have loading in the of your page, have the script that's not working loaded at the bottom of the page so the script is already loaded when the page loads.
Your source directory could be wrong also, when you load your page open up the developer tools and select 'console' to check if you have an error that the file could not be found.
*edit
The console is showing: Failed to load resource: the server responded with a status of 404 (Not Found).
This is the link:http://khaleha3rbi.com/newsite/newsite/js/scripting.js
You need to remove one of the "newsite" folders in that directory link.
I have solved it, the solution was to switch between to lines in the <head> tag.
it was like that:
<script type="text/javascript" src="/newsite/js/scripting.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
I make it:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="/newsite/js/scripting.js"></script>
and it works.
Thank you all for help
Related
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>
I have a problem with loading JavaScript in Google Chrome.
I've created the separate js file with a simple alert message and then linked it before the end of the body tag.
Google Chrome shows the alert box first then when I click 'ok' the content is loaded.
In other browsers it works fine, I mean the alert box shows at the same time as the content of the web page.
In short, Google Chrome loads the javascript first even when I put the script tag before the end of the body tag.
alert("Hello World!");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Write Your First Program</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header class="header">
<div class="text-vertical-center">
<h1>Write Your First Program</h1>
<h3>JavaScript Essentials</h3>
<br>
</div>
</header>
<script src="js/scripts.js"></script>
</body>
</html>
Do you have any idea how to fix this problem?
Thanks a lot
Your problem is that your script have the tag async, which let it execute whitout taking care of the web page loading state. Remove the async tag, or replace it with defer, which execute the script after the page loading.
In order to prevent any problem with script and html/css loading times conflict, you should encapsulate your Javascript's scripts with window.onload = function() { //code here }. This will guarantee that your whole page is loaded before executing your code.
That is a problem with Chrome. The developers of chrome for some reason have still not corrected that. If you have alert or a prompt pop-up, which is the first thing that user has to interact with in your website, chrome will not load HTML until after the pop-up has been closed.
Try including jquery cdn just above your script tag in body.
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
crossorigin="anonymous">
</script>
This will work fine!!
I also had this problem and realized that my Google chrome was just loading the cached version of page(the one before putting my script tag near bottom).
Closing the window and reopening the page worked fine.
async and defer boolean attributes are only helpful when the script is inserted in the head portion of the page. They are useless if you put the script in the body footer like we saw above.
(Refer following article: https://flaviocopes.com/javascript-async-defer/).
I am also facing similar issue and using window.onload = funcRef; with cleared cache also does not work on my google chrome. I have tried all of this with disabling all my browser extensions but in vain.
I was finally able to, not solve, but agree upon a way around - which was - to include a
jQuery CDN
before my javascript script in the body. Hope this helps.
I am developing an HTML5 game with jQuery. However, sometimes the page hangs up when loading (For now I only saw this happen on Chrome for mac). When it hangs, sometimes there is a string "waiting app cache" at the bottom. The webpage won't respond to any user mouse event during that time. The same will happen even if you reload the page. However, if you go to settings and clear cached images and files, the webpage won't hang on loading again.
I have no idea why this happen. There is no error in the console so I don't know where the problem could be. What's worse, when the webpage hangs it will be hard to even open the debug console. Any ideas or guesses as to why this happens? Thanks in advance!
Follow up, my javascript entry point:
$(window).ready(function() {
middleLayerInitialize();
initialize();
addEventListeners();
});
Here is how I include jQuery:
<link rel="stylesheet" href="./styles/jquery.mobile-1.3.2.css" />
<script type="text/javascript" src="./js/jquery-1.10.1.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.3.2.js"></script>
<script type="text/javascript" src="./js/jquery.mousewheel.js"></script>
The two most common reasons for this are (1) you are including jQuery twice or (2) you are loading a ton of html and jQuery has to wait on your html to finish loading. If you download jQuery directly into your directory and include it in the HTML header, it may help.
http://jquery.com/download/
<head>
<script src="jquery-1.11.0.min.js"></script>
</head>
Make sure that you aren't downloading it like below.
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script>
</head>
And make sure there is only one line including jQuery.
A final option (least likely to help). I don't know your setup, but try:
$(document).ready(function() {
// put all your javascript here.
});
instead of using (window).ready. I say this because you usually don't use (window).ready. You either use what I have written above or
window.onload=function(){SomeJavaScriptCode};
I don't know much but I have to create my own website and I am confused as to why it doesnt work. I've viewed the website http://mg8.org/processing/ and wish to put their javascript into my own page. I have their two references files in my directory.
And use these lines
<head>
<title>Brotobro Bittorrent</title>
<link rel="stylesheet" href="style.css" />
<script src="processing-0.5.packed.js"></script>
</head>
And then later in the page
< canvas src="bt.pjs" width="450" height ="450">< /canvas>
I've also visited their website and copy and pasted their copy into my own page and it still doesn't work if you wish to visit it http://www.duke.edu/~ajb60/bt.html.
There's an error on your page:
"Uncaught SyntaxError: Unexpected reserved word"
Resolve the error, and the script might load. Use firebug w/firefox to debug your webpage or load the page in chrome and hit F12.
I got your example working, just copy the following script to the same directory with bt.html:
http://mg8.org/processing/bt.pjs
Your animation will load.
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.