Add click handler to H1 elements


Added on  2019-09-16

5 Pages2014 Words387 Views
Digital Business Application – Lab ExercisesJavaScript and AjaxEXERCISE 3: PHOTO ALBUM CLIENT-RENDERED VERSION CPhoto Album Client-Rendered Version CThe next version of the photoalbum adds the ability to delete photographs from the album. The first thing this requires is a link displayed next to each photograph to allow it to be deleted. This link needs to be added to the createPhotoHTML function. Like the PHP photoalbum, this link needs to embed the id number of the photograph. Unlike the PHP version, it does not need to have the href attribute pointing back to the PHP script, in fact, it does not even need to be a link using the <a> tag at all! This is because when we click on delete it is going to run a JavaScript function that will do everything else.Make a copy of photoalbum-client-rendered-version-b.html and call it photoalbum-client-rendered-version-c.html. Then add the highlighted lines to the existing createPhotoHTML function. Note that this function is given a JavaScript object called photoInfo which has named fields for the image, name, description and photoId values.function createPhotoHTML( photoInfo) { return " <div class='w3-container w3-row w3-col l4'>" + " <div class='w3-container w3-card-8 w3-margin-8'>" + " <div class='w3-container w3-half w3-image'>" + " <a class='example-image-link' data-lightbox='example-1' href='images/" + photoInfo.image + "'><img src='images/" + photoInfo.image+ "' class='example-image w3-circle'></a>" + " <div class='w3-title w3-text-purple'>" + photoInfo.name +"</div>" + " </div>" + " <div class='w3-container w3-half'>" + photoInfo.description+ // next line should be conditional on whether logged in or not " <span class='link deletelink' id='" + photoInfo.photoid + "'>(Delete)</span>" + " </div>" + " </div>" + " </div>";}The link that will be added beside each picture will look something like this (for the photo with id 12):<span class='link deletelink' id='12'>(Delete)</span>"Note that this is just a <span> element, not an <a> element. This does not matter, because we can attach a JavaScript onClick event handler to any element in the DOM, so a span works just as well. To add an onClick handler to an element we need to get a reference to the element and assign a function to its onclick property. Fortunately, JQuery provides us an easy way to do this. Every one of the delete link spans will have the CSS class deletelink. JQuery lets us select DOM elements using CSS selector rules, so $(“.deletelink”) will return a collection of all DOM elements with that class, and in our case that means the delete <span>s for every photograph on the page. JQuery also allows us to add a single handler function to ALL the elements it finds in one line. Try the following example in a new file:Page 1 of 5
Add click handler to H1 elements_1

Digital Business Application – Lab Exercises<html><head><script src='http://code.jquery.com/jquery-1.11.3.min.js'></script><script>$(document).ready( function() { $("h1").click( function( event) { alert( "You clicked: " + event.target.innerHTML); }) });</script></head><body><h1>Click Me</h1><h1>Click me too!</h1></body></html>$("h1") selects all the h1 elements in the document.$("h1").click(FUNCTION ) adds the given FUNCTIONas a click handler to each of the h1 elements in the document.In this case the function is :function( event) { alert( "You clicked: " + event.target.innerHTML);}Note that the function takes a parameter called event. This is an object provided by the JavaScript engine describing a user interface event. In this case it will be a mouse click, but this object also has a field called target which is a reference to the DOM element that was clicked on. This function uses the built in function alert to display a dialog box which displays the content of the target of the event – that is, the text in the h1 tag you clicked on.So from this it follows that $(“.deletelink”).click( FUNCTION) could be used to add click handlers to all the photographs on the page, as they all have the class deletelink assigned to them.It is important to realise that this can only be done once they exist as elements in the DOM, and the HTML for the photographs is dynamically added by JavaScript in the loadPhotos() function. Therefore, we must add the click handlers after the photos have been added to the DOM, at the end of the code in the loadPhotos() function.Modify loadPhotos() as shown below to add a click handler to all delete links. This adds a function similar to the example above, which simply displays a dialog box and tells you the id number of the photograph we want to delete.Page 2 of 5
Add click handler to H1 elements_2

End of preview

Want to access all the pages? Upload your documents or become a member.

Related Documents
Photo Album Client-Rendered Version A

Lab Exercises - Digital Business Application

Client-Side JavaScript User Information Tracking

Desklib - Online Library for Study Material with Solved Assignments, Essays, Dissertations

Photo Album Client-Rendered Version D

E-Commerce Website Invoice Generation