Made withjQueryClip

jQuery Ajax Tutorial #4 - "Edit" modes & Better Mustache.js Templating (jQuery tutorial #9)

L

LearnCode.academy

Creator on the jQuery channel

Watch on YouTube ↗

109K viewsJun 23, 201412:44 runtime

Learn to implement an edit functionality in your jQuery Ajax application by handling PUT requests, a core concept of RESTful APIs. This tutorial elevates your client-side templating skills, moving beyond messy JavaScript strings by using the HTML `<template>` tag for cleaner…

Chapters

#jquery#clip#frontend

RESTful API Pattern: The `PUT` Request

The video demonstrates a standard RESTful API pattern for updating data.
GET: Used to access resources.
POST: Used to add new items.
PUT: Used to update an existing item identified by its ID. A PUT request is sent to the resource's URL with the item's ID appended (e.g., /api/orders/1).
DELETE: Used to remove an item by its ID.

Advanced Client-Side Templating

Problem: Concatenating HTML strings within JavaScript becomes messy, difficult to read, and error-prone as templates grow.
Solution: Use the HTML <template> tag to define the template directly in your HTML file, which provides syntax highlighting and better separation of concerns.
```
<template id="order-template">
  <li>...</li>
</template>
```
Retrieval: Access the template's content using jQuery: var orderTemplate = $('#order-template').html();

Note
For legacy browsers like IE8 that don't support <template>, a safe alternative is to use a <script> tag with a custom type. The browser ignores this block because it doesn't recognize the type, preventing JavaScript errors. <script type="text/template" id="order-template">...</script>

Implementing an "Edit Mode" UI

Strategy: Use CSS classes to toggle the visibility of elements, creating a seamless switch between viewing and editing an item.
HTML Structure:
- A parent element (e.g., <li>) acts as the state container.
- Display elements (like <span>) are given a no-edit class.
- Form elements for editing (like <input>) are given an edit class.
- Buttons like "Edit" get a no-edit class, while "Save" and "Cancel" get an edit class.
CSS Logic:
- By default, hide elements intended only for edit mode: li .edit { display: none; }
- When the parent <li> receives an edit class, toggle visibility:
```
li.edit .edit { display: initial; }
li.edit .no-edit { display: none; }
```

jQuery Event Handling & AJAX

Event Delegation: Use $(document).on('click', '.selector', function() {}) (or the older .delegate()) to attach event handlers that work on dynamically created elements.
Edit Button Logic:
1. Find the parent <li>.
2. Copy current values from the display <span> elements into the corresponding <input> fields.
3. Add the edit class to the <li> to switch the UI to edit mode.
Cancel Button Logic:
1. Find the parent <li>.
2. Remove the edit class to revert the UI.
Save Button Logic (AJAX PUT Request):
1. Find the parent <li> and retrieve its unique ID from a data-id attribute.
2. Create a JavaScript order object with the new values from the <input> fields.
3. Execute an AJAX call with type: 'PUT', the URL including the ID, and the order object as data.
4. On success, update the display <span> elements with the new data and remove the edit class to exit edit mode.

Tip
Cache jQuery Objects: To improve performance and readability, store frequently used jQuery objects in a variable rather than repeatedly querying the DOM: var $li = $(this).closest('li'); $li.find('input.name').val(...) $li.addClass('edit');

Introduction to PUT Requests & Better Templating

All right, this is our last video of building a basic jQuery Ajax app. We can now get orders, we can add orders, we can delete orders. All that's left is to edit orders. And for that, we are going to use a PUT request. Uh, kind of if you're, you've probably heard the term restful APIs, and that's kind of a standard way of putting together an API where you use GET request to access things. Your back end is looking for POST request to add new items. Uh, and if an item has an ID and you want to edit it, then you use a PUT request to, it's basically the same as a POST, but you add the ID on the URL, and then you do a PUT request and you will update that resource. And then delete, which we've already done, which you can do by ID.

We're going to be doing the PUT request. It's the most involved and so we're going to take our templating to a whole new level. Uh, show you a better way of templating other than scratching out lines in JavaScript. That's going to be the first thing we want to do. This is pretty much as far as I will ever go with plunking out, you know, uh, string lines concatenated together in JavaScript. It's kind of messy. It's a whole lot of quotes. It's just stuff we don't want to do beyond this. This is as far as I'm going to go. Any more than this, we got to go one of two routes: we either got to put a template tag in our HTML, uh, which is a quick easy way and that's what we're going to do for this, or you can say you have a lot of templates, you can create an HTML file for each template and then you can use something like Grunt to automatically turn those into JavaScript strings for you. That's way more involved than we need for this. So we're not going to do that in this. Uh, but let's go ahead and take this. We're going to copy it out.

Using the HTML