jQuery load file not working, blank page? - javascript

I'm trying to import the contents of a file (the file itself dosen't matter, html, php, text) - in all cases, I am unable to get any content loaded in. I've even used direct copy past off tutorials and it does not load or work?. I guess I'm missing something, or there is a version conflict maybe?.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#new").load("new.html);
});
</script>
</head>
<body>
<div id="new"></div>
</body>
</html>
This code is taken directly from jQuery website, I've only changed the file being loaded to "new.html" and yes, I have that named file in the same directoy. I've tried both referencing the source from online, and using local jquery file, tried different browsers as well.
When testing, the browser shows a blank page, it's not displaying the text?.
Any ideas what I'm doing wrong?
Thanks,

You should do this instead of JQuery
$(document).ready(function(){
$("#new").load("new.html");
});
// OR
$(function(){
$("#new").load("new.html");
)};
And I would recommend using
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
The reason this wasn't working is that JQuery is deprecated (meaning it shouldn't be used and will error most of the time) you should use $ since it is not deprecated and is the new way to do it. Also you did load("new.html) you missed a extra "

Related

How to add jQuery CDN Link in .html?

Where should I add CDN Link in my Project? I have made a Project in Codepen, and over there It’s added in the Javascript column. But in my local machine do I have to add it in .html or .js? I have tried adding it in my <head> of .html but it’s not working.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I have tried without "https:" and "//" as well. But still no luck.
Please let me know if I need to do anything else besides this.
If you are running the code locally, your HTML file should look like this:
<!DOCYTPE html>
<html>
<head>
<script src="url here"></script>
</head>
<body>
</body>
</html>
If that still does not work, you should put your code through the W3 Validator. You can view the errors with your HTML there.
In Codepen you need to go to settings.
Then choose JS and there you can add external libraries.
Thank you for the answers, Actually, I got the solution, I mistakenly added js/main.js instead of <script src="main.js"></script> .
And next thing I checked, I had added jQuery CDN Link in my .js file as well. I removed it from there and It worked.

Cant link moment.js Library

i am trying to link the moment.js library with my code , just getting started with javascript and i know the code works because i did it on another pc , now i transferred it to another pc and i changed the script tag yet idk what is the problem , i saved it with UTF - 8
<!DOCTYPE html>
<html>
<head>
<!-- reference Moment.js library -->
<script src="C:\Users\Rajarshi\Desktop\Internship\Raj_Intern\Date_Calculator_Project\moment.js" type="text/javascript"></script>
</head>
<body>
the code is fine and its just not working here
Your code is not working because you dont have that file on your computer. Add this script tag instead.
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
It will load MomentJS from CDN. Since you are a begginer you can use it this way until you get more into coding. :)

my javascript is not loading in order

I think I'm going crazy, all my searches indicate I am doing this properly, but I am still getting the opposite results. I have two scripts. The first one is the library (RecordRTC), and the second one is my javascript using the library. No matter what I do, my script loads first - and the library loads second. And my browser keeps showing (in the timeline) that this is true, and my script keeps showing the error "RecordRTC not defined" - that my script is calling the library before it has loaded.
Below is ALL the html code I'm using. Please send help.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing RecordRTC</title>
<script type='text/javascript' src="http://RecordRTC.org/latest.js"></script>
</head>
<body>
<div id="videos-container">
<video id="video"></video>
</div>
<script type='text/javascript' src="./js/videos02.js" defer></script>
</body>
</html>
Use a validator.
async and defer are boolean attributes. They are either present or they are omitted. You cannot give them the values true and false. async=false is an error that will be error corrected to async is on for this script.
The library is being called before it is loaded because you have said that it can be loaded async and defer so the browser isn't waiting for it before loading the other script.

Views in play-framework 2.1 not handling javascript

I've come into a wall : Basically, Javascript doesn't seem to be working in my play pages.
So I have a view main.scala.html as a template for other views.
This file looks like that :
#(page : String, title: String)(content: Html)
<!DOCTYPE html>
<html lang="en">
<head>
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/bootstrap.min.css")">
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="#routes.Assets.at("images/favicon.png")">
<script src="#routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#routes.Assets.at("javascripts/bootstrap.min.js")" type="text/javascript"></script>
</head>
<body>
<!--some stuff-->
#content
</body>
</html>
So I tried putting a simple thing in the body of the views.
-First in the main.scala.html template
-Then in a view that used this template
-Finally in a thing.html, with no links what so ever with Play! Framework, that I opened in my browser:
<html lang="en">
<head>
<title>title</title>
</head>
<body>
truc
</body>
Only the third option return the wanted result : A popup with thing in it.
My question is : Why is my javascript not handled by play? Do I have to "import" some global javascript feature in order to use it?
Thanks for your help, if you need more info, tell me.
Play produces normal HTML code - browser doesn't care what kind of soft produced it, so I suspect, that you have some mistake in path to some JS file in your head, so it avoids running other scripts, Use some kind of inspector in your browser, to validate, that all resources are downloaded properly. Also check JS console, most probably there are some errors shown.
On the other hand, placing simple JS directly in the views most often works correctly, however, keep in mind that, view's renderer may consider some JS typical syntax as a Play's tag, or something, therefore you need to control still if after rendering your JS is not 'damaged' by this process. For views where you want to use more advanced JS it's absolutely safer (and more comfortable) to include JS from static file(s) the same way as you are using for jquery.js or bootstrap.js
May be you forgot to write
#main(title = "my title") {
<h1>Other html<h1>
<p>My js here</p>
truc
}
P.S:
If it is helpfull don't forget that you shouldn't white head , html and body tags any more, it is included already. Otherwise you will have not valid html, and it will render bad in all browsers

Windows store app - jQuery error

I'm trying to import jQuery into blank javascript app, but keep getting same error: JavaScript runtime error: 'jQuery' is undefined. I don know the reason for this.
My whole procedure:
Create new Blank app project
Add existing item jquery-1.8.2-win8-1.0 in js folder
Drag and drop added item into default.html head
Add some jquery code in default.js
and now, i'm getting this error: JavaScript runtime error: '$' is undefined.
But if I delete added jQuery code(didn't notice before) it throw's me another error:JavaScript critical error at line 4, column 1 in ms-appx://8cce31f0-7793-41f7-875e-c41dd9ade2c7/js/jquery-1.8.2-win8-1.0.js.
I'm trying to get jquery to work for last several hours, but without success.
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jquery</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!-- jquery references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script src="js/jquery-1.8.2-win8-1.0.js"></script>
</head>
<body>
<p>Content goes here</p>
</body>
</html>
jQuery code:
$("*").on("click", function () { });
Error's:
Video:
Error - jQuery
First of all, thank you for the video - this would have been nearly impossible to solve without it.
I noticed your jQuery file was 2.0mb; this didn't look right. And then the error message took us into its contents to point out a syntax error, where we saw a slew of HTML tags — you appear to have downloaded from the GitHub viewer page, rather than from the source file itself. You should instead download the RAW file.
Please note also that this is an older version of jQuery, and not a fully-supported version. I am the primary developer behind the appendTo repo, and am excited to announce that jQuery 2.0 (pre-release builds available) should work really well on its own in a Windows Store App.
I wrote about this recently over on nettuts: Building Windows Store Applications With jQuery 2.0
Try to put:
<script src="js/jquery-1.8.2-win8-1.0.js"></script>
after:
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
This error is probably because you're not include jQuery library before writting jQuery code and make sure the path to your file is correct
Try rearranging the scripts you added. Include jQuery js file before your default.js file. Something like this:
<script src="js/jquery-1.8.2-win8-1.0.js"></script>
<script src="/js/default.js"></script>
Default.js tries to use jQuery which is not yet added. So rearranging might help.

Categories