Loading jQuery and own JS - javascript

I've looked for some time on the internet to get the right awnser for my problem and asked some colleagues... I'm still at the same problem.
As follows:
(I'm new at using JS and jQuery)
I wanna load my own JS into my HTML (written in PHP).
<script src="standaard.js"></script>
and
<script src="test.js"></script>
standaard.js contains all of this: https://code.jquery.com/jquery-3.2.1.min.js
test.js
$(document).ready(function(){
$("button").click(function(){
$("p").fadeOut("slow");
});
});
and the <button> it refers to is in a PHP file:
<button id="button"> CLICK HERE!</button>
Now when I just load standaard.js and copy the contents of test.js in the PHP file between <script></script>, it works just as it should.
But when I load it from different files, it doesn't and when I inspect the page in Firefox console it gives me this:
SyntaxError: expected expression, got '}'
[More Info]
test.js:4:10
I hope someone could help me with this and that I didn't make a newbie mistake :)
Note: I suspect that it has something to do with time that both scripts need to load and that test.js goes first... but then again, I don't get the error that pops up.
EDIT:
Here is the trimmed PHP file:
<?php
echo '<!doctype html>
<html>
<head>
<title>Opdracht 4!</title>
<meta name="author" content="Danny">
<link rel = "stylesheet" href = "basis.css">
</head>
<body>
<h3>Naam</h3>
<p> Danny </p><br>
<h3>Geboortedatum</h3>
<p>a date</p><br>
<h3>Woonplaats</h3>
<p>A City</p>
<br><br><br>
<div class="footer">
<footer>
&#169 2017, Danny
</footer>
</div>
<script src="standaard.js"> </script>
<script src="test.js"></script>
</body>
</html>';
?>

right before the ending </body> tag, put your two scripts in this order:
<script id="jquery" src="standaard.js"></script>
and
<script src="test.js"></script>
You can remove id="jquery". That is not serving any purpose. You should probably just rename the file to be jquery.min.js. This is not causing you any real issue, but it makes more sense naming-wise.
in the test.js file, you can put your script:
$(document).ready(function(){
$("button").click(function(){
$("p").fadeOut("slow");
});
});

After many tries I've found the solution!
It seems quit simple and not very logic but i replaced all " to ' and it worked!?
like this:
$(document).ready(function(){
$('button').click(function(){
$('p').fadeOut('slow');
});
});
Thank you all for your response, with your help I knew what things to cross off that coulndn't be it.

Related

I get "function is not defined" when I move a Javascript function from in-line code, to a separate js file

I am trying to make a very simple thing work:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="js/test.js" type="text/js"></script>
<button onclick="test()" type="submit">Test</button>
</body>
</html>
With js/test.js being found by the browser and containing:
function test() {
alert("test");
}
When opening the page and clicking the button, nothing happens and I can see in the console:
Uncaught ReferenceError: test is not defined
at HTMLButtonElement.onclick (test:7)
I have tried to move the script import above or under the button, or in the header.
I have tried to use "window.setlocale = function" in my js file.
I have tried to put nothing in the test method.
I checked for errors with JSLint (there is no error).
When I check the source, I can see the js file and the browser opens it when I click on it.
The only way I can get the Javascript to work is to write it inline...
Maybe the issue is with my environment?
In order to run this, I use an Apache server, and it is configured to serve this on localhost:8077. I works fine so far.
I use Laravel 7.10, PHP 7.4... working fine. To run this I created a simple route, that shows the view (a simple index.blade.php) with the HTML content copy/pasted above. It displays fine on "http://localhost:8077/test", no problem.
I also tried to use the laravel notation
<script src="{{ asset('js/test.js') }}" type="text/js"></script>
but it gives the same result.
I also have the PHP debugbar (a Laravel plugin) active, and it does not show any error. The view is properly loaded and displayed.
Also, I use PHPStorm, and it does not detect any issue.
It's been 2 days and I cannot makes this seemingly extremely basic thing to work, please help me m(_ _)m
Your script type is wrong. Use application/javascript in your script element to make your javascript work - or better yet, remove the type attribute and let browsers auto-detect the type:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="js/test.js" type="application/javascript"></script>
<button onclick="test()" type="submit">Test</button>
</body>
</html>
Without type attribute:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="js/test.js"></script>
<button onclick="test()" type="submit">Test</button>
</body>
</html>
you can try to add script tag to header tag. like this
<head>
<script type="text/javascript" src="path/to/script.js"></script>
<!--other script and also external css included over here-->
</head>
Try removing the function name in js/test.js
function() {
alert("test");
}
Please add the js file as a reference in the header section of your core file. External referencing.

Dynamically reading text file into page

I'm trying to load a .txt file into my simple html page. I'm very noobish and all the code i got is stolen from stackoverflow.
The text file is in the same folder as the html file and contains some text that I'd like to have shown in a div and not just loaded in at the start but dynamically updated (in a 1 sec interval).
The Page that results from the code is just empty.
I am using Chrome 73.
I only use the html file and the txt file. No other files are in the folder.
<html>
<head>
<script type="text/javascript">
setInterval(read,1000);
function read(){
jQuery.get('file.txt',function(data){$('#container').html(data);});
}
read();
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
I don't know what's wrong with this code. Am I missing libraries? If you came up with a completely new code that would be appreciated as well.
Yes, you are missing the jQuery library. Try it like this and let me know:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
function read(){
jQuery.get('file.txt',function(data){$('#container').html(data);});
setTimeout(function(){read() },1000);
}
read();
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
Reference:
https://stackoverflow.com/a/24320973/1447509
See note in italics at very bottom of this article
what about a simple jQuery Load ?
$("#container").load("file.txt");
http://api.jquery.com/load/

Navigation bar in html5

I have a quick question. I'm wondering if it is possible to have a external html file with my navigation bar in it and have that be put in to all of my pages for my website. If so how do I do this? I have tried using these methods:
<script rel="import" src="navigation-bar.html"></script>
$("#nav-bar").load("navigation-bar.html")
but so far neither of them have worked... Do I have to use PHP and if I do how do I implement this.
please help.
I would use PHP to do this.
Here is the structure of how it would work.
<html>
<head>
<?php require('/directory/to/your/header.php'); ?>
</head>
<body>
...Your Content Here
</body>
</html>
In a separate header.php file you would include your navbar.
Header.php
<?php
echo '...enter your Navbar HTML code';
?>
Your file will have to have the extension .php and every time you write in php, you must start and end with
<?php
...enter your php code...
?>
You can mix php with html simply by writing the php into the HTML. Take for example the following href:
Your link Name
For more information please refer to :
http://php.net/manual/en/
put:
include("navigation-bar.html")
on top of your code.
This way you won't have to write the same navigation code in each webpage that you are going to host.
OR
you can try
<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<body>
<div w3-include-html="h1.html"></div>
<div w3-include-html="content.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>
Read more at: http://www.w3schools.com/howto/howto_html_include.asp
This is probably the simplest solution that should work even in user agents without scripting support.
For example, your page will look like this:
<html>
<body>
<iframe src="navbar.html" class="navbar" />
</body>
</html>

How to link a JS file externally?

I faced this problem.The Condition needed is that the external file should not include script tag.But in order to call a function the script tag is needed.The code is a mere example.Also is there any other alternative to link the External JS file.
<!DOCTYPE html>
<html>
<body>
<script src="Friendship.js">
</script>
</body>
</html>
The code for the external JS is:
<!DOCTYPE html>
<head>
<script>
function mySpace()
{
document.getElementById("playa").innerHTML="Friendship is always a sweet responsibility, never an opportunity.
";
}
</script>
<body>
<h1><tt>Friendship</tt></h1>
<p id="playa">"One of the most beautiful qualities of true friendship is to understand and to be understood.
"</p>
<button type="button" onclick="mySpace()">Click Here !</button>
</body>
</html>
A Javascript file, should only contain JavaScript code. It should not contain HTML, CSS or any other markup.
Based on your example above, you should have the following two files:
index.html
<!DOCTYPE html>
<html>
<body>
<!-- Link to external JavaScript file -->
<script src="friendship.js"></script>
<h1><tt>Friendship</tt></h1>
<p id="playa">"One of the most beautiful qualities of true friendship is to understand and to be understood."</p>
<button type="button" onclick="mySpace()">Click Here !</button>
</body>
</html>
friendship.js
// This is a comment
function mySpace()
{
document.getElementById("playa").innerHTML="Friendship is always a sweet responsibility, never an opportunity.";
}
Notes
The friendship.js is pure JavaScript (or comments as per my example above). You should not add any HTML tags to the JavaScript file such as <html>, <body>, etc. You also do not need to include <script> tags which will generate errors.
is it possible to write the JS code without an HTML declaration
I'm not exactly sure what you mean by this, but I'll attempt to explain. If you were to visit http://www.example.com/friendship.js then you would be shown the raw JavaScript code in that file. The code would not be executed automatically. You will need to initiate the JavaScript from an HTML file itself, just as you've done in your HTML with onclick="mySpace()".

Unable to slideUp div using jQuery

I have downloaded the 1.11.3.min.js file and placed it in the same file where I have kept the HTML and script files. Before writing this code I have practiced jQuery a lot and those time I have succeeded, but this time I can't run it.
HTML
<!DOCTYPE html>
<head>
<!---<script type="text/javascript" src="image.js"></script---->
<script src="jquery-1.11.3.min.js"></script>
<script src="jquery.js"></script>
<!---<link rel="stylesheet" type="text/css" href="image.css">---->
</head>
<body onload="slideimage()">
<img src="1.jpg" id="slide" width="400px" height="400px"/>
<div id="button">
`enter code here`<button onclick="change_image()" />1</button>
</div>
</body>
</html>
jQuery
$document.ready(function(){
$("#slide").click(function(){
$(this).slideUp(400);
});
});
I have downloaded the 1.11.3.min.js file and put in the same file where i have kept the HTML and script files.Before writing this code i have practiced jQuery a lot and those time i have succeeded.But this time i have failed to run it.
Just replace this line of code
$document.ready(function(){
with this line
$(document).ready(function(){
You did't add brackets around document
May be you want do this:
$(document).ready(function(){
$("#slide").click(function(){
$(this).slideUp(400);
});
});
First, I recommend using CDN's for jQuery (less loading time), it can be found here
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
then, you forgot to end your function, and you forgot () around document
your script should look like this:
$(document).ready(function() {
$("#slide").click(function() {
$(this).slideUp(400);
});
});

Categories

Resources