I have an index.html file which I am trying to add a client side include for my footer using JavaScript. However, my "footer.htm" include is not displaying, just the text is. I am pretty sure there is an issue with my JavaScript code. I know there is no problem with my footer.htm file. Please Help!
document.write('footer.htm');
<div id="Footer">
<script type="text/javascript" language="javascript" src="footer.js">
</script>
</div>
Assuming you are using jQuery
<script type="text/javascript">
$(document).ready(function(){
$('#footer').load('footer.htm');
});
</script>
Related
Can anyone please guide me regarding how can I add custom javascript in Laravel project?
I did google and found some steps but unable to figure out what the error is going on?
Steps I
Created a custom.js in my public folder with a simple function
add script tag in my app.blade.php
extends my layout
But the function is not working
$(document).ready(function()
{
alert("hello this is test");
})
custom.js
enter code here
<script type="text/javascrip" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>"
<script type="text/javascript" src="{{asset('js/custom.js')}}"></script>
code I added in my main file app.blade
but when load my page it doesn't give me an alert. Alert is just for testing I tried with various function.
You misspelled javascript
Remove the (") after writing the </script>
For Javascript:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="{{ URL::asset('js/custom.js') }}"></script>
Make your directory structure is like this for JS: /public/js/custom.js
I have to review your code. I have found an error in your code like a spelling mistake.
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>"
You have miss t at the end of javascript.
I am using jQuery. This is my coding on my main page:
<script type="text/javascript" src="script.js">
</script>
and my script.js is:
$(document).ready(function(){
$("#title").click(function () {
alert("Works!");
});
});
My full coding can be found here: http://pastie.org/8676656.
Using a tool on the browser, I found an error in my javascript code:
ReferenceError: Can't find variable: $
on line:
$(document).ready(function() {
Any help would be appreciated.
You have to import jQuery before using it:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
Notice it is using // as protocol (not http:// or https://), it means: if your .html file is at a http:// server, it will get jQuery from http://ajax.google..., and if it is at a https:// server, it will get it from https://ajax.google....
Note: If, while developing, you open your HTML file in your browser instead of in a server, you should specify the protocol, as in this answer, otherwise it won't work:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Also, you should, if possible, place your .js files at the bottom of the page, right before closing </body>. See more in here.
Import jQuery before your code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"><script>
Include jQuery before your script
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js></script>
this is jquery load problem,
load jquery before all your code and script.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" ></script>
Hello I'm looking for someone proficient in Javascript. The site I'm using uses a javascript file to initialize the plugins and load settings and what not. So after reading some of
http://benoit.pointet.info/stuff/jquery-scrollsnap-plugin/
I decided to use it to snap to my divs(all with the class "slide")...
However placing this
$(window).scrollsnap({
snaps: '.slide',
proximity: 100
});
in my js.js file accomplished nothing
Any help is appreciated!
The code I used with that was this and it worked, give it a try:
$(document).ready(function() {
$(document).scrollsnap({
snaps: '.slide',
proximity: 100
});
});
Not sure about $(window), where did you get that from?
Also, are you linking to the appropriate javascript files and to the jquery library? Make sure to put it at the end of your html like this:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.scrollstop.js"></script>
<script src="js/jquery.scrollsnap.js"></script>
<script src="js/jquery.fitvids.js"></script>
</body>
</html>
I have:
controller/reports_controller.rb
views/reports/index.html.erb
assets/reports.js
I have an image in index.html.erb:
<div class="main_mark">
<img src="/assets/welcome_main.png" alt="main" class="main_mark_image" />
</div>
I want to print an message to the screen (alert message) when the user presses the image. so I want to write a function in reports.js that print the message.
reports.js:
$(document).ready(function() {
$(".main_mark_image").click(function () {
alert("alon");
});
});
but I think I have to relate between the java script the the html.
any help appreciated!
When using an external script you need to tell your HTML file:
<script src="assets/reports.js"></script>
The above assumes that your 'assets' folder is in the same folder as your index. You also need to include the jQuery library. It's available for download or you can use Google's:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Or, for jQuery UI:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
Hope this helps.
Try:
<img src="/assets/welcome_main.png" onclick="alert('alon');" alt="main" class="main_mark_image" />
I had downloaded jQuery.js file from jQuery.com .I have saved this file in 3 places, including JRE/Lib and desktop (where my HTML file which calls it is), to be sure that the jQuery.js file is found. I reference this js file as :
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#clas").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p id="clas"> Hello</p>
<p>Hi</p>
</body>
When I ran this HTML file on Mozilla browser, I expected 'Hello' to vanish when I clicked on it, but it did not. It remained as solid as ever.
But when I used a jQuery CDN:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
And when I used an online HTML editor called Tryit Editor v1.5, it worked correctly!
It seems only the local jQuery.js is not doing its part. The JavaScript works fine, only the $() part doesn't. I'm using jdk1.6. I wonder why this snag has occurred. How to resolve it? Help.
Thanks! I found the solution to this problem, from a similar question posted in this forum, asked a year ago. Here is the link:
jQuery code doesn't work if I'm using a local jquery.js file, why?
The problem seems to have been incompatible encoding of the html and the js files. So I added the charset attribute to script tag of js. And the problem and 'Hello' both vanished at a click!
Your code works for me. Please check the below code, I have just modified the location of the jquery.js file where mine is stored in a different location.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%--<script type="text/javascript" src="jquery.js"></script>--%>
<script type="text/javascript" src="../Scripts/jQuery/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$("#clas").click(function () {
$(this).hide();
});
});
</script>
</head>
<body>
<p id="clas">Hello</p>
<p>Hi</p>
</body>
</html>
I assume the location of your js is not correct. Are you using the same path of js where you have this "html" or jsp page? Or you have the js files in a separate folder?
Additionally, you can try alternate way as below:
$("#clas").live("click", function () {
$(this).hide();
});
Please let me know if this helps.