Having two simple htmls, on click of any href in first html, redirect to second html and do something on all obj of class 'clazz':
first html:
<body>
<a class="link" id="1" href="display.html" >flower 1</a>
<a class="link" id="2" href="display.html" >flower 2</a>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script src="js/script.js"></script>
</body>
second:
<body>
<img class ="clazz" id="1" src="https://">
<img class ="clazz" id="2" src="https://">
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script src="js/script.js"></script>
</body>
js:
$(document).ready(function() {
$('.link').on('click', function( event )
{
$(".clazz").each(function() {
alert("hey");
});
});
});
Although the code is simple, something weird happens..
The .each on clazz is never invoked. When moving the .each section out of link.onClick - it shows the alerts so I assume the problem is not unrecognized class 'clazz' of the second html in the js. What else could it be?
Even though you have the same javascript file js/script.js in both html.
each page/html request will call each javascript file differently.
In your first html you have
a.link which will be invoked on click but don't have a.class.
`a.class === undefined` //in your 1st html
In the second html
you have a.class but you do not have a.link. So your javascript in the second html is unable to register click event on a.link.
`a.link === undefined` //in your 2nd html
If you want to only execute your code on link click instead of the default link action (which is 'going to another page') you need to add one line of code - a call to preventDefault().
$('.link').on('click', function( event )
{
event.preventDefault();
// your other code
});
https://api.jquery.com/event.preventdefault/
Related
My test.jsp file:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/test.js"></script>
</head>
<body>
<a href='#' id='mylink'>click me</a>
</body>
</html>
My test.js file:
alert("HELLO");
var myLink = document.getElementById('mylink');
myLink.onclick = function(){
alert("I am a pop up ! ");
}
When I load the test.jsp page the Hello alert appears just fine. However when I click on click me, nothing happens.
At the point your script is running, the rest of the DOM hasn't been created yet.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<a href='#' id='mylink'>click me</a>
<script type="text/javascript" src="js/test.js"></script>
</body>
</html>
Moving the script tag to the bottom is one way to fix that.
It works fine here. Try wrapping it in an onload event listener to ensure the DOM is ready when the document.getElementById is called on the mylink element.
window.addEventListener("load", function()
{
var myLink = document.getElementById('mylink');
myLink.onclick = function() {
alert("I am a pop up ! ");
}
});
<a href='#' id='mylink'>click me</a>
This is a common issue of timing on how things are loaded into the browser on your page. The browser will run scripts and load HTML as it encounters it from the top down. Your JS file is running at the very top of the page. This means, at the point of its execution, the A HREF tag doesn't exist when you create the onclick event. The big issue is that when you call this line:
document.getElementById('mylink');
That A HREF tag doesn't yet exist, because the browser hasn't yet made it down the page to that line to load the tag into memory (again, because your JS file is at the top of the page). It's a timing issue. That function call returns null, effectively.
You need to put the event handler creation either on an body.onload event or, since you are using the jQuery library, inside a document.ready event. This delays the onclick event creation until the tag is loaded into memory and ready. For example:
$(document).ready(function() {
var myLink = document.getElementById('mylink');
myLink.onclick = function(){
alert("I am a pop up ! ");
}
});
I am trying to call a HTML file when a button is clicked using jQuery.
Here is my html code:
<!DOCTYPE html>
<head>
<title>Buttons</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="buttonscript.js">
</script>
</head>
<body>
<input type ="button" id="myButton" value="Click Here">
<div id="dictionary">
</div>
</body>
</html>
then here is my script:
$(document).ready(function(){
$('myButton').click(function(){
$('dictionary').load('a.html');
return false;
});
});
You have two wrong things in your script:
You are not assigning the selectors with the right syntax;
You are using document ready syntax on an external file;
The first point is fixed using # before the id name and . before the class name (see below the fix).
The document.ready() function should be included into the html itself: it tells jquery to run the script only when the DOM is ready. Including it in an external file will make jQuery check for DOM ready on the external file and not on the one you are including to.
So move your script to the html itself and change it a bit:
.
$(document).ready(function(){
$('#myButton').click(function(e){
// prevent page submit
e.preventDefault();
// load the page into #dictionary
$('#dictionary').load('a.html');
});
});
Add # to your selectors like, and instead of using return false, you could prevent default behavior of the button (if the type attribute is set to submit).
$(document).ready(function(){
$('#myButton').click(function(event){
// prevent page submit
event.preventDefault();
// load the page into #dictionary
$('#dictionary').load('a.html');
});
});
I'm trying to call a simple javascript function which hides or shows a particular div in Sharepoint. I have added the Script Editor web part with the function in there, but the anchor tags have the href removed whenever I save. Below is the code as I enter it.
Javascript:
<script type="text/javascript" charset="utf-8">
function toggleDiv(divId) {
$("#"+divId).toggle();
}
</script>
HTML:
Show Answer 1
After I save, Sharepoint tells me that certain elements deemed "unsafe" by sharepoint would be removed. When it reloads, it removes the href as shown below:
<a>Show Answer 1</a>
Any ideas how I could get this simple function to work?
Thanks,
Jordan
If you have multiple answer you can create a simple script like this (i notice you are using jQuery)
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('a').click(function(){
$('#' + $(this).data('answer')).toggle();
});
});
</script>
and the HTML:
<a data-answer="answer1">Show answer 1</a>
<a data-answer="answer2">Show answer 2</a>
...
<div id="answer1" style="display:none">Here answer 1</div>
<div id="answer2" style="display:none">Here answer 2</div>
UPDATE: Added the ready function so the script will be run only when the page load completely
I have some very simple code below that listens for an event (a click on an anchor tag). It works fine if I create a standalone html file. But if I create a file for just the script, register and enqueue it and then add that anchor tag to a Wordpress page, nothing happens when I click it. I can see in the console that the script file was loaded. I get no error when I click the link but neither do I get the results from the script. Do I have my anchor tag written correctly? Where is my error?
<html>
<head>
<script language="javascript" type="text/javascript" src="/wp-includes/js/jquery/jquery.js"></script>
</head>
<body>
Click here
<script id="source" language="javascript" type="text/javascript">
var $j = jQuery.noConflict();
$j( ".citation" ).click(function ( )
{
event.preventDefault();
// do stuff
});
</script>
</body>
</html>
event is not defined. Make it as an argument
$j(".citation").click(function(event) {
event.preventDefault();
// do stuff
});
I am a newbie in jquery. I am trying to create a page, which loads the contents without reloading the page. In my test page, i have 2 links i.e. link 1 and link 2. When the default page is clicked. It just says 'Hello'. When clicked on either of link, it shoud say 'Hello link1' (if link1 is clicked), 'Hello link2' (when link2) is clicked. Link1 contents(html) is in link1.html and link2 contents is in link2.html file. Whenever either of the link is clicked, it should pass name of the link's html page as parameter.
here is what i did:
<head>
<title>Ajax Practice</title>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function test(filename){
alert(filename);
var b = $("a").attr("title");
alert(b);
//$('#menuContents').load($(filename)).fadeIn("slow");
//$('#menuContents').load('link1.html').fadeIn("slow");
$('#menuContents').load(b).fadeIn("slow");
});
});
</script>
</head>
<body>
<div id="page-wrap">
<div id="menu">
link1
link2
</div>
<div id="menuContents">
<h1>Hello!</h1>
</div>
</div>
</body>
</html>
The problem is if i just pass the name of html file as parameter, it doesn't get read as string value instead it get's read as object. The first alert in code will give [object Object] message. I can read the text from title of the link by using .attr attribute and can load the page using .load attribute. I can also change the contents of page by directly giving html page name in .load attribute (commented out in code).
Can anyone tell how i can pass name of the html page as parameter rather than hardcoding or reading through title?
Thank you.
If you are using server side scripting such as PHP you may want to look into jQuery's $.ajax()
just remove the ready() and click() function, leave the test function alone
function test(filename){
alert(filename);
//$('#menuContents').load($(filename)).fadeIn("slow");
//$('#menuContents').load('link1.html').fadeIn("slow");
$('#menuContents').load(filename).fadeIn("slow");
}
ps. in fact when you define a function in jquery click function, the function can not be called outside, you need to define the test function in gloal, then you can call it in anywhere include a.href
There is a nice way to do this below
<html>
<head>
<title>Ajax Practice</title>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function (e){
$('#menuContents').load($(this).attr('href')).fadeIn("slow");
e.preventDefault();
return false;
});
});
</script>
</head>
<body>
<div id="page-wrap">
<div id="menu">
link1
link2
</div>
<div id="menuContents">
<h1>Hello!</h1>
</div>
</div>
</body>
</html>
$("a").click(function test(filename){
filename is in fact the event object. Please check out http://api.jquery.com/click/
Besides, in your code:
link1
will call the function test, so you can define this function in your javascript code
function test(filename){
alert(filename)
// your code here
}
Try the example here http://jsfiddle.net/WUBsq/
There are many cleaner ways you can have, for instance:
<a class="refresh" data-title="link1.html">click here</a>
...
$(document).ready(function(){
$('a.refresh').click(function(){
var title = $(this).attr('data-title');
alert(title);
// your code here
})
})
Try here : http://jsfiddle.net/WUBsq/3/