Digital Business Application

Added on -2019-09-16

| 3 pages
| 1334 words
| 288 views

Trusted by 2+ million users,
1000+ happy students everyday

Showing pages 1 to 1 of 3 pages

Digital Business Application – Lab ExercisesJavaScript and AjaxEXERCISE 2: PHOTO ALBUM CLIENT-RENDERED VERSION BPhoto Album Client-Rendered Version BJust as the first PHP photalbum we created had the photographs hard coded in an array, the first version of the JavaScript version also hard coded the photographs, in the form of a JSON string. The second PHP version deleted the array and got the list of photographs from the database instead. Now we will do something similar with the JavaScript version. Make a copy of photo-album-client-rendered-a.html and call it photo-album-client-rendered-b.html then delete the json string declaration at the top: var json = '[' + '{ "image": "b1.png", "name": "John", "description": "<p>This is John Lennon. He was one of the Beatles.</p><p>He was one of the two main song-writers.</p>" },' + '{ "image": "b2.png", "name": "Paul", "description": "<p>This is Paul McCartney. He was also one of the Beatles.</p><p>He was the other main song-writers.</p>" },' + '{ "image": "b3.png", "name": "George", "description": "<p>This is George Harrison. He was also one of the Beatles.</p>" },' + '{ "image": "b4.png", "name": "Ringo", "description": "<p>This is Ringo Starr. He was also one of the Beatles.</p>" }' + ']';DELETE THIS CODEKEEP the createPhotoHTML function, but delete the existing function that displays the photos as shown below: $( document).ready( function() { var photos = $.parseJSON( json); for (i = 0; i < photos.length; i += 3) { var rowDiv = $( "<div class='w3-row'>"); $('#album').append( rowDiv); for( j = i; j < i + 3; j++ ) { if ( j < photos.length) { rowDiv.append( createPhotoHTML( photos[j])); } } } } );DELETE THIS CODEPage 1 of 3

Found this document preview useful?

You are reading a preview
Upload your documents to download
or
Become a Desklib member to get accesss

Students who viewed this