Javascript misbehaviour on IAgree function - javascript

I have following code:
function iAgree(){
alert("Hello");
jQuery('#openAccount').hide();
jQuery('#submitDetails').show();
}
I am calling it using:
<div class="openAccWraper">
<div class="openAccDetail"> </div>
<div class="questionContact">
<input type="checkbox" name="iAgree" id="iAgree" value="1" />
</div>
</div>
<img src="img/btnSubmitDet.png" border="0" />
I am getting following error:
Uncaught TypeError: object is not a function

I think the problem may be with the iAgree being id as well, and IIRC some (all?) browsers define the global named same as id (if it is possible as identifier). So, iAgree() tries to call DOM object, which obviously fails; and it also explains why renaming solves it.
To check if this is the case put onclick="alert(iAgree); iAgree();" and see if it alerts function or InputElement.

I think the problem is that your code is not being loaded onto the page properly. If you wrap your function code in the head or the body tag of your html, your code should work. e.g.
<body>
<!-- html -->
<!-- load your script at the bottom of the body -->
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function iAgree(){
alert("Hello");
.........
}
</script>
</body>
Or
<body>
<!-- html -->
<!-- load your script at the bottom of the body-->
<script src="jquery.js" type="text/javascript"></script>
<script src="iAgree.js" type="text/javascript"></script>
</body>
Here's a minimal working fiddle http://jsfiddle.net/SZYH3/2/.

Related

JavaScript doesn't work with bootstrap 4 + thymeleaf

I'm developing a web app with Spring Boot, Bootstrap 4 and Thymeleaf.
I want to show a bootstrap alert, and then, it hides automatically after seconds (just like a "sucessfully" notification).
I have found a lot of solutions, but all of then need JavaScript. When I tried to use JS on my project, it doesn't work.
I use a default template, which is used in the others views through layout:decorate="~{default}". In this default template, I have the Bootstrap link and scripts:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
...
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
If a put in any view the following code, it does nothing.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{default}">
<head>
...
</head>
<body class="text-center">
<div layout:fragment="content">
<div class="product-options">
<a id="myWish" href="javascript:;" class="btn btn-mini">Add to Wishlist </a>
Purchase
</div>
<div class="alert alert-success" id="success-alert">
<button type="button" class="close" data-dismiss="alert">x</button>
<strong>Success! </strong> Product have added to your wishlist.
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#success-alert").hide();
$("#myWish").click(function showAlert() {
$("#success-alert").fadeTo(2000, 500)
.slideUp(500, function () {
$("#successalert").slideUp(500);
});
});
});
</script>
...
</div>
</body>
NOTE: This is just an example to check that JS doesn't work. I takes it from this post.
When I run this code, the alert is showed, but it never disappears. I have tried with a lot of scripts and never work.
Could be a compatibility version problem?
Hi I think this post address your problem:
Why does jQuery throw the error `fadeOut is not a function'?
In this line <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> you use the slim version of Jquery not the full-one, this prompt when I click to "Add to Wishlist" link" a TypeError in the Firefox develloper tool console.
TypeError: $(...).fadeTo is not a function, this means that the Jquery javascript object $("#success-alert") doesn't have attached a fadeTo function.
You can get the full minified version here: https://code.jquery.com/
Snippet from https://code.jquery.com
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
PS: If you don't need SRI you can remove integrity and crossorigin attributes.

Blank page when calling Javascript in HTML- what am I doing wrong?

I am trying to do a basic google map link into HTML. When I place the code directly in HTML it works but when I try to link from external JS document I just get a blank page:
HTML Code:
<html>
<head>
<title>Search Engine Title Goes Here</title>
<link rel="stylesheet" type="text/css" href="twoColumn.css">
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script language="javascript" type=text/javascript src="myfile.js"
</head>
<body>
<div id="container"> </div>
<div id="header"> Header Goes Here</div>
<div id="sidebar"> Left Navigation Goes Here
<div id="map-canvas"></div>
</div>
<div id="content"> <p>Content Goes Here</p></div>
<div id="footer"> Footer Goes Here </div>
</body>
Am I missing something here?
You:
Forgot the > from the second script's start tag
Omitted the end tag from the second script
The consequence of the first isn't serious, the end tag for the head ends up being treated as an invalid attribute and then ends the tag.
The consequence of the second is that the entire rest of the page is parsed (with errors!) as JavaScript instead of being treated as HTML.
This would have been picked up if you had used a validator.
Note that the language attribute was obsoleted when HTML 4 came out in 1998, and the type attribute was made optional (for JavaScript scripts) in HTML 5. Omit both of them, they bloat your code and just give you the chance to break the script with a typo.
Corrected version:
<script src="myfile.js"></script>
<script type="text/javascript" src="myfile.js"></script>
You should always include a closing script tag
EDIT: I also noticed that you missed the "" around text/javascript

External JavaScript Not Running, does not write to document

I'm trying to use an external JavaScript file in order to write "Hello World" into a HTML page.
However for some reason it does not work, I tried the same function and commands inline and it worked, but not when it's using an external JavaScript file. The part I commented out in the JS file was the previous method I was trying to use. Those lines of could worked when I ran the script from the header, and inline. Thanks
Html file:
<html>
<head>
</head>
<body>
<p id="external">
<script type="text/javascript" src="hello.js">
externalFunction();
</script>
</p>
<script type="txt/javascript" src="hello.js"></script>
</body>
</html>
JavaScript file
function externalFunction()
{
var t2 = document.getElementById("external");
t2.innerHTML = "Hello World!!!"
/*document.getElementById("external").innerHTML =
"Hello World!!!";*/
}
In general, you want to place your JavaScript at the bottom of the page because it will normally reduce the display time of your page. You can find libraries imported in the header sometimes, but either way you need to declare your functions before you use them.
http://www.w3schools.com/js/js_whereto.asp
index.html
<!DOCTYPE html>
<html>
<head>
<!-- You could put this here and it would still work -->
<!-- But it is good practice to put it at the bottom -->
<!--<script src="hello.js"></script>-->
</head>
<body>
<p id="external">Hi</p>
<!-- This first -->
<script src="hello.js"></script>
<!-- Then you can call it -->
<script type="text/javascript">
externalFunction();
</script>
</body>
</html>
hello.js
function externalFunction() {
document.getElementById("external").innerHTML = "Hello World!!!";
}
Plunker here.
Hope this helps.
Script tags with SRC values do not run the contents. Split it to two script tags. One for the include, one for the function call. And make sure the include is before the call.
use onload eventListener to make it simple
<script>
window.onload = function() {
externalFunction();
}
</script>
You're trying to call the function before it has been loaded.
Place the load script above the declaration:
<html>
<head>
<script type="txt/javascript" src="hello.js"></script>
</head>
<body>
<p id="external">
<script type="text/javascript">
externalFunction();
</script>
</p>
</body>
</html>
Also you have a typo:
<script type="txt/javascript" src="hello.js"></script>
Should be:
<script type="text/javascript" src="hello.js"></script>
The script type needs to be "text/javascript" not "txt/javascript".

Putting JavaScript code in a separate file does not work

I am working with Optimizely guiders.js example code:
http://jeffpickhardt.com/guiders/
Though if I extract the JavaScript code and place it in a separate file, the guiders do not load.
Here is the edited HTML:
<html>
<head>
<!-- guider.js requires jQuery as a prerequisite. Be sure to load guider.js AFTER jQuery. -->
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="guider.js"></script>
<script type="text/javascript" src="guidedTour.js"></script>
<link rel="stylesheet" href="guider.css" type="text/css" />
</head>
<body>
<span id="clock" style="border: 2px solid #333; width: 300px; height: 200px; text-align: center;" onclick="guider.next();">
<br />
<img src="clock.gif" width=150 height=150 />
</span>
</body>
</html>
I have all the JavaScript code in guidedTour.js, in the same directory.
All .js files are also in same directory. And the code worked before extracting it in separate file.
The guiders do not load when JavaScript is in separate file.
I am getting the following error in Chrome:
"Uncaught TypeError: Cannot read property 'clientHeight' of null
jquery-1.5.1.min.js:16"
Trying a more recent version of jQuery throws an error on guiders.js.
Anyway it seems a different behavior than if I keep the JavaScript code in the index.html.
I have created a jsfiddle for the working code:
http://jsfiddle.net/vpMQy/
I do not know how to create a similar jsfiddle with the JavaScript in a separate file so that I can reproduce the problem.
Is it possible to put this JavaScript code in a separate file?
Always wrap your code inside the DOM ready handler
$(document).ready(function() {
//your code here
});
Or its shorthand
$(function() {
//your code here
});
Or put your scripts at the very end of the document's body:
//...
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="myScript.js"></script>
</body>
And you won't have problems manipulating them DOM before it's ready. =]

Changing the contents of an href link

The following code is a test piece. Normally the href in the Link would point to "http://www.google.com/", but the attr should change it to reference "http://maps.google.com" BUT, the reference is not changing. Can anyone tell me why it is not working? Thanks
<html>
<head>
<script type="text/javascript">
$("a#changeme").attr('href',
'http:\/\/maps.google.com/');
</script>
</head>
<body>
<div class="content">
<p>Link to <a href="http://www.google.com/"
id="changeme">Google</a>
in the content...</p>
</div>
</body>
</html>
jQuery is not loaded.
If it was, you would have to wrap it in a $(document).ready handler.
This can be done without jQuery.
Code:
window.onload = function() {
document.getElementById("changeme").href = 'http://maps.google.com/';
};
The onload handler is not exactely equal to the DOMContentLoaded handler, but it has a better support, and may be preferred here. Alternatively, you can move the <srcipt> block to the end of the <body>, and then use the method without any onload handlers:
<body>
<div class="content">
<p>Link to Google
in the content...</p>
</div>
<script type="text/javascript">
// This code is placed after the element, so the reference does exist now.
// In the head, the same code will throw an error, because the body doesn't
// even exist.
document.getElementById("changeme").href = 'http://maps.google.com/';
</script>
</body>
The script is in the header so it's executed before the other content has been loaded (if jQuery is even active, seeing no reference to it). You should put it in a function and then call it later on (e.g. through onload or a timer). I could as well think of a security feature in the browser, to keep sites from manipulating links right before you click on them.
Here is the code for the correct jQuery way to do this (using the document ready).
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#changeme").attr('href', 'http:\/\/maps.google.com/');
});
</script>
</head>
<body>
<div class="content">
<p>Link to <a id="changeme" href="http://www.google.com/">Google</a>
in the contenttest...</p>
</div>
</body>
</html>

Categories

Resources