logo

Digital Business Application

3 Pages1334 Words288 Views
   

Added on  2019-09-16

Digital Business Application

   Added on 2019-09-16

ShareRelated Documents
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
Digital Business Application_1

End of preview

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

Related Documents
Java Script function
|6
|2700
|401

Digital Business Application – Lab Exercises
|5
|2014
|387

Photographs and Accepts Uploaded Photographs
|5
|2266
|500