Lecture 11.2 (Thursday, Apr. 6)

We have seen basic manipulations: changing attributes.

Let's do more manipulations!

Adding HTML

Let's make the new Hais show up at the top of the timeline.

We can add new HTML code with the jQuery prepend and append methods. They take the matched element, and append or prepend new HTML to its content.

A few ways:

• Build up HTML string, possibly with a client-side template (I like Mustache for this)
• Build HTML DOM objects

Let's start with the HTML string.

Building DOM objects

We can do this:

$('<div/>')

to build a new element. We can then append it to things, etc.

And set its attributes, and add content. Using all our normal jQuery methods.

File Upload

We've so far handled basic inputs, such as text fields.

Some of you have discovered text areas and select boxes.

Let's upload files!

File uploads are handled a bit differently.

A few pieces:

• Mark the form as being enctype=multipart/form-data
• Include a file input
  • Optionally: list the accepted file types in accept attribute
• Get the data from request.files and save it. We can read the file from the stream attribute.

We'll save data in a BLOB in the database.

Add the ability to post graphical Hais.

Drag & Drop File Upload

Use Dropzone.