Cannot reference jQuery .js file in HTML - javascript

I can create a jQuery function within my HTML no problem:
<body>
<input type="text" id="mainInput" />
<button class="btn" id="mainButton"></button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#mainButton").click(function () {
$("#mainInput").hide("slow");
});
});
</script>
</body>
This does exactly what I intend it to do.
I read it was a good idea to create a separate script to contain the actual function, so I put the script in its own file...
<body>
<input type="text" id="mainInput" />
<button class="btn" id="mainButton"></button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="~/js/jQueryPractice.js"></script>
</body>
Here is the .js file with the jQuery
$(document).ready(function () {
$("#mainButton").click(function () {
$("#mainInput").hide("slow");
});
});
As soon as I do this, the functionality no longer works.
From everything I have researched, this should be working as intended; I have read multiple tutorials that use this method. I must be missing something simple...

This path:
src="~/js/jQueryPractice.js"
Uses ~, which doesn't really mean anything to a browser. What URL do you expect that to refer to? Should it be the root of the server?:
src="/js/jQueryPractice.js"
Relative to the page?:
src="./js/jQueryPractice.js"
Something else?
Whatever the URL is for the script, relative or absolute, that's what needs to be used in the src attribute.

Here is what got it to work.
My project has a 'wwwroot' directory. It was included when generating a new ASP.NET Core application through Visual Studio.
There is a js folder inside of this. When I put my script in there, the browser started finding it successfully.
This was the HTML:
<script src="~/js/jQueryPractice.js"></script>
The '~' seems to refer to 'wwwroot'. The script is now referencing and behaving as intended.

Related

jquery not working inside of html script tags

This question is not a duplicate!
I have tried many methods, yet they havent worked. I cannot tell what i am doing wrong. I have the src in the top script tags and i used $(document).ready
Here is the code:
<html>
<head>
<script src="jquery-3.3.1.min.js"></script>
</head>
<button id="button">Button</button>
<script>
$(document).ready(function() {
$("#button").click(function() {
alert("Test");
});
});
</script>
</html>
Does the file jquery-3.3.1.min.js exist in the same path as your html file?
If not, you need to download jQuery or link to a CDN instead of a local file.
Your "jquery-3.3.1.min.js" file may not present in your working path. Make sure you provided the correct path or else you can load jquery from CDN directly.
Or
Try moving the script inside 'head' tag.

jQuery's include method doesn't work

As my website has only one page, and the index.html was getting really long and impossible to read. So I decided to put each section in a different HTML file and use jQuery to included it.
I used jQuery's include in the way as it has been mentioned here to include a external HTML file but apparently it doesn't work for my website. I really don't know what is the problem.
Here is the link of my workspace.
Here is what I am doing in index.html file to include other sections
<script src="./js/jquery-1.11.1.min"></script>
<script>
$(function() {
$("#includedContent").load("./page1.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page2.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page3.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page4.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page5.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page6.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page7.html");
});
</script>
I also used this method to make sure the file is accessible and everything was fine. So the problem is not the accessibility of the files
You are overwriting the contents of #includedContent seven times (see documentation of jQuery.load). With AJAX, there is no guarantee which request will complete first so you will end up with random page content inside the container.
The solution is to create containers for each page and load each page inside its dedicated container, something like this:
<div id="includedContent">
<div class="page1"></div>
<div class="page2"></div>
<div class="page3"></div>
</div>
$(document).ready(function() {
$("#includedContent .page1").load("page1.html");
$("#includedContent .page2").load("page2.html");
$("#includedContent .page3").load("page3.html");
});
NB: Having said all that, I do not understand how AJAX solves the problem of the page being too long/impossible to read.
There are several things that look odd to me:
all your load functions run at document ready, which is weird while having all the same target. load replaces (not adds) the content of the selected element with what is being loaded, you probably are trying to add all the html contents, but your current setup would actually just load page7.html into #includedContent
the paths look strange to me, i guess ./ may cause errors, try to leave out ./ everywhere.
rather than loading an entire html page, you might just want to load a piece of that file (i dont know how pageX.html looks), for example you would not want to load the <html> node entirely, rather the content only: .load('page1.html #content')
are you including jquery correctly? there is no .js in your inclusion

Meteor.js: <script> tag doesn't work inside <body>

A simple script tag inside the body tag doesn't seem to work. The alert doesn't get triggered in the code below:
<body>
<script type="text/javascript">
alert('Hello');
</script>
{{>main}}
</body>
Any idea why?
Edit:
Just tried it with a fresh meteor app, no alert tag still:
<head>
<title>test</title>
</head>
<body>
<script type="text/javascript">
alert('Hello');
</script>
{{> hello}}
</body>
<template name="hello">
<h1>Hello World!</h1>
{{greeting}}
<input type="button" value="Click" />
</template>
Weird thing is when I copy paste the source of the html, made a new html page, and the alert will work.
Edit3: I deployed this app here: http://alert-in-body-test.meteor.com/
Do you get an alert box?
This question is still relevant in the current version of Meteor (version 0.5.4) so I wanted to describe how to include script at the end of the body.
To execute javascript at the end of the body, register a Handlebars helper and put the relevant code there, like this:
In client.html:
<body>
{{renderPage}}
{{afterBody}}
</body>
...
In client.js:
if (typeof Handlebars !== 'undefined') {
Handlebars.registerHelper('afterBody', function(name, options) {
$('body').append('AFTER BODY');
});
}
(For a great description of why this is required, see Rahul's answer to a similar question here: https://stackoverflow.com/a/14002991/219238 )
Its working for me
in onrender call this jquery
$.getScript('yours url')
It should work.
I have just pasted this inside one of my projects and it worked.
Your {{>main}} is strange for me tough. Also make sure that <body> is inside <html> tag.
Meteor is constructing the entire DOM from Javascript by rendering your page as a template -- the 'source' for your page as seen by the browser is basically:
<script type="text/javascript" src="/5a8a37bef5095c69bcd3844caf3532e1ba6d49bf.js"></script>
I can't find a definitive page stating that embedding a script tag in a template like this won't cause it to be executed, but it definitely feels against the spirit of what the framework is trying to achieve.
If the point is to achieve a clean separation of your markup and logic then why put it in the template. A better solution would be to use the meteor.startup call
Instead of looking the rendered html at developer tools, try looking the real downloaded html.
You will find a (probably) empty tag, with tons of script tags inside the .
In other words, the body of your meteor application is not the body of the final html, it's just your main template.
Instead, this ton on scripts shipped by Meteor, will load your templates.
So, your code will not run, cause it's been placed there. It's like when you manipulate DOM (with jQuery, for exemple), placing a script tag in DOM, after it's loaded. This script tag will not run.

Different alternatives for making the Jquery Library work

I was wondering how to make the Jquery library work. I have of course research on this before asking this question, and I have a book that suggest doing the following:
<script src="scripts/jquery-1.6.2.min.js"><script>
however, for some reason, the stuff on my page does not respond to my code even with this. So I was very confused. What I tried was, moving the files I was working on to the same directory as the jquery-1.6.2.min.js, since jquery is a js library, but didnt work. I was wondering what could it be? I have search for syntax errors like mad, so I reallllllyyyy doubt thats the problem. I was wondering what I did wrong? The only other option I can think of is using the website tag (which I havnt tried yet):
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
or
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery- 1.6.2.min.js"></script>
</head>
Which I wanted to avoid because I didnt want to rely of being on the web when I do my work, we never know... Thanks!
This is the full code by the way:
<!DOCTYPE html>
<html>
<head>
<title>jQuery goes to DOM-ville</title>
<style>
#change_me {
position: absolute;
top: 100px;
left: 400px;
font: 24px arial;
}
#move_up #move_down #color #disappear { padding: 5px; }
</style>
<script src="scripts/jquery-1.6.2.min.js"></script>
</head>
<body>
<button id="move_up">Move Up</button>
<button id="move_down">Move Down</button>
<button id="color">Change Color</button>
<button id="disappear">Disappear/Re-appear</button>
<div id="change_me">Make Me Do Stuff!</div>
<script>
$(document).ready(function() {
$("#move_up").click( function() {
$("#change_me").animate({top:30},200);
});//end move_up
$("#move_down").click( function() {
$("#chage_me").animate({top:500},2000);
});//end move_down
$("#color").click( function() {
$("#change_me").css("color", "purple");
});//end color
$("disappear").click( function(){
$("#change_me").toggle("slow");
});//end disappear
});//end doc ready
</script>
</body>
</html>
The problem is most likely the path... Are you just using HTML pages? If so, there are a couple of things to note:
1.) When a path begins with a / it means it starts at the root folder.
2.) When a path does not start with a / it means its going to start relative to the current folder it is in.
To fix:
Inside the folder with your html, make a javascripts folder (you could call it anything, "js" for example), and place your jquery javascript files within it.
Then use this for the path to jquery:
<script type="text/javascript" src="/javascripts/jquery.min.js"
This will reference the absolute path, so if later on, you have html files in nested folders, it won't look to the relative path but the absolute one.
As well if you want to use the google version when you have internet, and a local version when you don't you can use this snippet:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
<script type="text/javascript">
window.jQuery || document.write("<script src='/PATH/TO/jquery.js'><\/script>")
</script>
Addendum:
Fixed the post to reflect Fabrício Matté correction.
The absolute path can get a bit funky if you're not running behind a webserver (apache for example). This is why it would work on a server, and not on your computer.
If you're running it locally, without a webserver (don't do this, install MAMP or XAMP, Apache, nginx, IIS, anything...), you'll need to specify the full path:
Mac:
/Users/yourusername/Sites/website/index.html
PC:
C:/somethign/something/else/index.html
Do you have your page (the one you copied all code for and showed us) in the same directory as a directory called "scripts"? In that "scripts" directory, do you have a file called "jquery-1.6.2.min.js"?
My guess is one of three things is happening:
You're jquery file is in a different directory
You never included the jquery file
the jquery file name is not exactly the same
If you check in FireBug, I'll bet that this file is missing

Invoking Javascript method in HTML

My javascript file(test.js) has Method1() method defined.
<script src="../Scripts/test.js" type="text/javascript"></script>
My html is defined as below. I get Method1() not found. Any ideas?
<p><input type="button" name="login" id="login" value="Login" onclick="Method1()"/> </p>
Here is the code in test.js declared...
<script type="text/javascript">
function LoginToServer() {
......
}
</script>
The code in .js file is a JavaScript code, not HTML markup.
This:
<script type="text/javascript">
</script>
is HTML markup, not a JavaScript code. You should remove that from test.js.
As you didn't show us exactly how your Method1 is defined, I'll assume it is ok and this is the only error.
The reason Method1() isn't detected is because your test.js has a syntax error - the <script></script> tags.
Remove the opening and closing <script> tags from your test.js and everything should work properly.
function LoginToServer() {
//function code
}
.js files should only contain JavaScript code.
.html files may also contain JavaScript, but then the code has to be surrounded by <script></script>.
Also, you don't have to provide the type="text/javascript" because HTML5 knows it is going to be JavaScript in-between those tags.

Categories

Resources