Are there any Event Listeners that can be attached to a word. So when the word is clicked, information like a definition can be displayed on the page. Using jQuery
Thanks,
Adam
Sorry for not posting code. I have to make it so that when the user clicks on the name of a person in the list, the box of data on the right side of the screen fills with the description of the location of the artwork. Which is in my JSON file.
Here is my code so far
<!DOCTYPE html>
<hmtl lang="en">
<head>
<meta charset="utf-8" />
<title>AJAX</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
<script src="jquery.js" type="application/javascript"></script>
<script src="ajax.js" type="application/javascript"></script>
</head>
<body>
<div id="loaded-data"></div>
<div id="result-box"></div>
</body>
</hmtl>
$(function() {
let request = $.ajax({
method: 'GET',
url : 'people.json',
dataType: 'json',
});
request.done(function(data) {
let list = data.body.list;
let resultBox = $('#result-box');
let unorderedList = $('<ul>');
resultBox.append(unorderedList);
for (let person of list) {
let listItem = $('<li>');
listItem.text(person.name);
listItem.attr('data-url', person.links[0].href);
unorderedList.append(listItem);
}
});
request.fail(function(response) {
console.log('ERROR: ' + response.statusText);
});
});
{
"links":[{"rel":"self","href":"http://www.philart.net/api/people.json"},{"rel":"parent","href":"http://www.philart.net/api.json"}],
"head":{"title":"People","type":"listnav"},
"body":{
"list":[
{"name":"Adam","links":[{"rel":"self","href":"http://www.philart.net/api/people/325.json"}]},
{"name":"Abigail Adams","links":[{"rel":"self","href":"http://www.philart.net/api/people/157.json"}]},
{"name":"John Adams","links":[{"rel":"self","href":"http://www.philart.net/api/people/410.json"}]},
{"name":"Samuel Adams","links":[{"rel":"self","href":"http://www.philart.net/api/people/439.json"}]},
{"name":"Lin Zexu","links":[{"rel":"self","href":"http://www.philart.net/api/people/347.json"}]},
{"name":"James A. Zimble","links":[{"rel":"self","href":"http://www.philart.net/api/people/345.json"}]},
{"name":"Doris Zimmerman","links":[{"rel":"self","href":"http://www.philart.net/api/people/171.json"}]}
]
}
}
Teemu has already mentioned a way to accomplish this behavior in the comment. You can do it as follows
// handle click and add class
$(".word").click(function() {
var word = $(this).text()
alert(word);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p class="word">Hello</p>
</div>
You could replace the word and wrap it with a div.
$('p').html(function(index, value) {
return value.replace(/\b(here)\b/g, '<div class ="event">here</div>');
});
$('.event').click(function() {
console.log('definition');
});
<p>This is the information: Click here.</p>
Related
This question already has answers here:
How to prevent a click on a '#' link from jumping to top of page?
(24 answers)
Closed 2 years ago.
I'm student and it hasn't been long since I studied programming.
below code is simplified than real for explain.
'test()' is actually Ajax function to get data.
My goal is making 'a tag' for paging operation.
But when i clicked 'a tag', 'test()' inside of '$(document).ready' is called after 'a tag' click event occurred.
So page is always back to 1.
I don't know why this happen.
Anyone could help me?
Thank you!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
var page = 1;
$(document).ready(function(){
test();
alert(page);
});
function test(){
for(var i = 1; i <= 3; i++) {
var a = $("<a></a>").text(i).attr({
href: "",
idx: i
});
a.preventDefault;
$(a).click(function(){
page = $(this).attr("idx");
test();
alert(page);
});
$("#pageLink").append(a," ");
}
}
</script>
</head>
<body>
hello!
<div id="pageLink"></div>
</body>
</html>
For some reason you're calling test() inside of test(). There are a few minor things you need to change also
Prefix jQuery objects with $. var $a=... to avoid ambiguity.
preventDefault is used on the event, not the jQuery object. $a.click(function(event){event.preventDefault();...});
Otherwise it works as I believe you want it to, alerting the page number on click.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
createLinks();
});
function createLinks(){
for(var i = 1; i <= 3; i++) {
var $a = $("<a></a>").text(i).attr({
href: "",
idx: i
});
$a.click(function(event){
event.preventDefault();
page = $(this).attr("idx");
// why are you calling this again? // test();
// maybe you want to load something // loadSomething(page);
alert(page);
});
$("#pageLink").append($a," ");
}
}
</script>
</head>
<body>
hello!
<div id="pageLink"></div>
</body>
</html>
Here is a html of the site
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
<script src="jquery.cookie.js"></script>
<link rel="stylesheet" type="text/css" href="loginStyle.css">
</head>
<body>
<div class="login">
<input type="text" value="Please, give us your name" id="name">
<h3 id="name_txt">Log in</h3>
<h4 id="pilot_txt">Choose your pilot.</h4>
<ul id="pilots">
</ul>
</div>
<script src="loginScript.js"></script>
</body>
</html>
And here is loginScript.js :
var uriPilots = '../api/pilots';
$("ul#pilots li").click(function(){
var t = $(this).text();
$.cookie("pilot", t);
$("#pilot_txt").text(t);
})
$(document).ready(function () {
// Send an AJAX request
$.getJSON(uriPilots)
.done(function (data) {
// On success, 'data' contains a list of products.
$.each(data, function (key, item) {
// Add a list item for the product.
$('<li>', { text: formatItemProduct(item) }).appendTo('#pilots');
});
});
});
function formatItemProduct(item) {
return item.Name;
}
Now, the problem is with the first function. It is supposed to, when user clicks on the <li> element, which is loaded from server in second function, create a cookie that stores the text of the <li> that was clicked (I change the text of "#pilot_txt" only to be able to check easier if it works).
The funny thing is that everything works perfectly if I add a <li> element by hand, but for the ones loaded from server it doesn't.
I would be grateful for any help.
You should use event delegation on() when you deal with fresh DOM generated by javascript :
$('body').on('click', "ul#pilots li", function(){
var t = $(this).text();
$.cookie("pilot", t);
$("#pilot_txt").text(t);
})
Hope this helps.
You should also bind the event with the parent of that element, i.e ul#pilot in your case.
$('ul#pilots').on('click', 'li', function(e) {
var t = $(this).text();
$.cookie("pilot", t);
$("#pilot_txt").text(t);});
Use event delegation
$('body').on('click', "ul#pilots li", function () {
var t = $(this).text(); $.cookie("pilot", t);
("#pilot_txt").text(t);
})
I am in a serious bind. I want to toggle the visibility of some elements I am pulling from an API. The API allows me to make a get request for stories and I am pulling the headlines and images. I can get up to 15 requests at a time from the API. What I want to do is show one request at a time and not all of them at once. When I make the request I get them all at once.
I was thinking of putting the images and headlines into a list and making each child visible one at a time. My jQuery code is below:
var main = function () {
var url = 'http://devapi.xxxxxxx.com/v1/en/stories/latest?format=json&apikey=xxxxxxxxxxxxxxxx';
$.getJSON(url, function(xxxxxx_response) {
//console.log(xxxxx_response);
xxxxxxxxxx_response.stories.forEach(function(data) {
console.log(data);
var $img = $("<img>");
var $p = $("<p>");
$img.attr({
"src": data.largeimage,
"hidden": true,
"id": []
});
$p.attr("hidden", true).append(data.title['#cdata-section']);
$("main .story").append($img, $p);
$("button").click(function(img, p) {
//$img.attr('hidden', false);
//$p.attr('hidden', false);
//s$img.slideToggle('slow');
$img.attr('hidden', false);
$p.attr('hidden', false);
});
});
});
}
$(document).ready(main);
And here is my HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="">
<title>Media on the Move</title>
<style type="text/css">
img {
width: 360px;
heigh: auto;
}
</style>
</head>
<body>
<main>
<button>Next</button>
<div class="story"></div>
</main>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="lib/app.js"></script>
</body>
</html>
Please help!!!
Create your function like this:-
store all the stories in the array, let's suppose story_list and length of story_list in length_story.
Then create an iterative function as follow
function nestedStoryShow(array1 , length1){
//terminating codition
if (length1 == 0){
return;
}
else{
var $img = $("<img>");
var $p = $("<p>");
$img.attr({
"src": array1[array1.length- length1].largeimage,
"id": []
});
$p.append(array1[array1.length- length1].title['#cdata-section']);
$("main .story").append($img, $p);
setTimeout(
function()
{
$img.hide();
$p.hide();
nestedStoryShow(array1 , length1-1);
}, 3000);/*Your Story stays for 3 second and then it is hidden*/
}
}
Attach this function to your button after the ajax call has been successful recieved.
success:function(data){
story_list //array of story
length_story //length
$(button).click(function(){
nestedStoryShow(story_list,length_story);
});
}
Hy i'am developing a phonegap application. I have this page:
<!doctype html>
<html>
<head>
<title>Parsing</title>
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
<link rel="stylesheet" href="css/index.css" type="text/css" />
</head>
<script>
$.getJSON(
'http://sat3.altervista.org/index.php', { get_param: 'value' },
function(data) {
for(var i=0; i<data.length; i++) {
var lin = data[i]["Nr SAT"];
$('body').append($('<p>').html('Numero Sat: '+ data[i]["Nr SAT"] + ''));
$('body').append($('<p>').html('Data Apertura: '+ data[i]["Data Apertura"]));
}
});
</script>
<body>
<header>
<img id="logo" src="img/img2.png" alt="logo_chiave_inglese" />
</header>
</body>
</html>
In which way i can send some value (for example : SAT000000002574) with the method post of jquery at this page http://sat3.altervista.org/index.php (that is the link of the page top).
And after that i have sent the number at the php page in wich way i can take this value??
I can not use php because phonegap doesn't support it, so i have to use jquery or javascript. Help me, please.
The simplest example is this:
$.post('http://sat3.altervista.org/index.php',
{"param" : "SAT000000002574"},
function(data) { ... } );
If your value is some data within the page, you can first grab it with jQuery as well.
var param = $("#myparam").val();
$.post('http://sat3.altervista.org/index.php',
{"param" : param},
function(data) { ... } );
And the HTML...
<input type="text" name="myparam" id="myparam" value="SAT000000002574">
So I have a website with a Header.html. In the header are three buttons. I've copied the Header.html into all of my other pages with jquery's load. Now what I would like to do is change the colour of one of the buttons depending on the page it's on. But when I use document.GetElementById in javascript it can't find the div of the button I've copied from the Header.html
Here's the Header.html
<div id="Header_Wrapper">
<div id="Header_PageLinksWrapper">
<div class="Header_PageLink">
<a class="Header_PageLinkText" id="PageLink_Games" href="..\Pages\Games.html">Games</a>
</div>
<div class="Header_PageLink">
<a class="Header_PageLinkText" id="PageLink_AboutMe" href="..\Pages\AboutMe.html">About Me</a>
</div>
<div class="Header_PageLink">
<a class="Header_PageLinkText" id="PageLink_CV" href="..\Pages\CV.html">CV</a>
</div>
</div>
</div>
The javascript file:
$(document).ready(
function ()
{
$("#Header").load("..\\Templates\\Header.html");
var filePath = window.location.pathname;
SetPageLinkColours(filePath);
}
);
function SetPageLinkColours(aPath)
{
var firstIndex = aPath.lastIndexOf("/");
var lastIndex = aPath.indexOf(".html");
var id = "PageLink_" + aPath.slice(firstIndex + 1, lastIndex);
var divElement = document.getElementById(id);
if (divElement == null)
{
console.log("Could not find element " + id);
}
divElement.style.color = 0xffffff;
}
One of the pages (eg. Games.html)
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Adabelle Combrink - Games</title>
<link rel="stylesheet" type="text/css" href="..\Templates\Header.css"/>
<link rel="stylesheet" type="text/css" href="..\Templates\Page.css"/>
<link rel="stylesheet" type="text/css" href="..\Pages\Games.css"/>
<script type="text/javascript" src="..\Scripts\jQuery.js"></script>
<script type="text/javascript" src="..\Scripts\Defaults.js"></script>
</head>
<body>
<header>
<div id="Header"></div>
</header>
</body>
</html>
What this gives me in the console is Could not find element PageLink_Games. I don't get that error if I use something that is in Games.html like Header.
Is there any other way of doing the same thing. I know you can include files into eachother with php but I haven't gotten that right and don't seem to be able to run .php files in Visual Studio.
jQuery.load has a success callback. Use it to assure your code is only executed after the loading is complete.
$(document).ready(
function ()
{
$("#Header").load("..\\Templates\\Header.html", null, function() {
var filePath = window.location.pathname;
SetPageLinkColours(filePath);
});
}
);
Also your SetPageLinkColours function can be improved with jQuery:
function SetPageLinkColours(aPath)
{
var firstIndex = aPath.lastIndexOf("/");
var lastIndex = aPath.indexOf(".html");
var id = "PageLink_" + aPath.slice(firstIndex + 1, lastIndex);
var divElement = $("#"+id);
if (!divElement.length)
{
console.log("Could not find element " + id);
}
else
{
divElement.css('color','white');
}
}
load function makes async request , so your code tries to find element before it rely appears. U need to use load function callback http://api.jquery.com/load/
$(document).ready(
function ()
{
$("#Header").load("..\\Templates\\Header.html", function () {
var filePath = window.location.pathname;
SetPageLinkColours(filePath);
});
}
);