Digital Business Application – Lab Exercises

Added on - 16 Sep 2019

  • 5

    pages

  • 2014

    words

  • 107

    views

  • 0

    downloads

Showing pages 1 to 2 of 5 pages
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 firstthing this requires is a link displayed next to each photograph to allow it to be deleted. This linkneeds to be added to thecreatePhotoHTMLfunction. Like the PHP photoalbum, this link needs toembed the id number of the photograph. Unlike the PHP version, it does not need to have the hrefattribute pointing back to the PHP script, in fact, it does not even need to be a link using the <a> tagat all! This is because when we click on delete it is going to run a JavaScript function that will doeverything else.Make a copy ofphotoalbum-client-rendered-version-b.htmland call itphotoalbum-client-rendered-version-c.html.Then add the highlighted lines to the existingcreatePhotoHTMLfunction. Note thatthis function is given a JavaScript object calledphotoInfowhich has named fields for theimage,name,descriptionandphotoIdvalues.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 id12):<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 canattach a JavaScriptonClickevent 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 afunction to its onclick property. Fortunately, JQuery provides us an easy way to do this. Every one ofthe delete link spans will have the CSS classdeletelink. JQuery lets us select DOM elements usingCSS 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 allowsus to add a single handler function to ALL the elements it finds in one line. Try the following examplein a new file:Page1of5
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 givenFUNCTIONas a click handler to each of the h1 elements inthe document.In this case the function is :function( event) {alert( "You clicked: " + event.target.innerHTML);}Note that the function takes a parameter calledevent. This is an object provided by the JavaScriptengine describing a user interface event. In this case it will be a mouse click, but this object also hasa field calledtargetwhich is a reference to the DOM element that was clicked on. This function usesthe built in functionalertto display a dialog box which displays the content of the target of theevent – 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 toall the photographs on the page, as they all have the classdeletelinkassigned to them.It is important to realise that this can only be done once they exist as elements in the DOM, and theHTML for the photographs is dynamically added by JavaScript in theloadPhotos()function.Therefore, we must add the click handlers after the photos have been added to the DOM, at the endof the code in the loadPhotos() function.Modify loadPhotos() as shown below to add a click handler to all delete links. This adds a functionsimilar to the example above, which simply displays a dialog box and tells you the id number of thephotograph we want to delete.Page2of5
desklib-logo
You’re reading a preview
card-image

To View Complete Document

Become a Desklib Library Member.
Subscribe to our plans

Unlock This Document