Bunch of Handler Functions and Attach

Added on - 16 Sep 2019

  • 3

    Pages

  • 1395

    Words

  • 214

    Views

  • 0

    Downloads

Trusted by +2 million users,
1000+ happy students everyday
Showing pages 1 to 1 of 3 pages
Digital Business Application – Lab ExercisesJavaScript and AjaxEXERCISE 4: PHOTO ALBUM CLIENT-RENDERED VERSION DPhoto Album Client-Rendered Version DThe next version of the photoalbum adds the ability to upload new photographs to the album. As ithappens file uploads are difficult to manage from the client side (it does not seem to be possible totransmit both the file data and the fields of the form at the same time, meaning that two separateAjax messages are necessary). To accomplish this we will use some ready made code which addsfunctionality to JQuery.The code and an explanation of it can be found at this site:http://abandon.ie/notebook/simple-file-uploads-using-jquery-ajaxHowever, all the files you need are provided on moodle in the fileajaxupload.zip. Download this fileand extract it so that you have a folder calledajaxupload, then put this folder inside thelibfolder onthe webserver.As mentioned, this code adds functionality to JQuery. Once you have it installed, there is a newJQuery function calledfileupload. This function basically allows us to set up a whole bunch ofhandler functions and attach them to a form that includes file upload fields.Make a copy ofphotoalbum-client-rendered-c.htmland call itphotoalbum-client-rendered-d.html.The first thing we need to add to this version is the upload form and the “Add images” link.To do this, add exactly the same code as was given in PHP & MySQL Exercise 4. However, change theaction attribute of the form from?tojson-photoalbum-upload.php.The next thing we need to do is add a line to import the fileupload javascript. Assuming you have putit in thelibfolder as described above, this means adding a script import to the head of the file. Addthe following line immediately after the line which imports the JQuery library itself:<script src='lib/ajaxupload/jquery-fileupload.min.js'></script>This makes the fileupload function available for us to use.As mentioned above, the fileupload function allows us to set up handler functions on a given form.The functions we set up actually get used when the form is submitted. We need to set them upready when the page is loaded, which means inside the$(document).readyfunction. Change theexisting version to that as shown below (new code is bold):Page1of3
desklib-logo
You’re reading a preview
Preview Documents

To View Complete Document

Click the button to download
Subscribe to our plans

Download This Document