{"id":4805,"date":"2009-11-25T07:00:35","date_gmt":"2009-11-25T14:00:35","guid":{"rendered":"http:\/\/css-tricks.com\/?p=4805"},"modified":"2019-04-09T16:25:52","modified_gmt":"2019-04-09T23:25:52","slug":"app-from-scratch-6-ajax","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/app-from-scratch-6-ajax\/","title":{"rendered":"Creating a Web App from Scratch &#8211; Part 6 of 8: Adding AJAX Interactivity"},"content":{"rendered":"<p class=\"explanation\">&#x1f44b; <strong>Hey there!<\/strong> We want to give you a heads up that the source code that accompanies this series is no longer available to download. We still think there are valuable bits of information to get from the series, but given that we&#8217;re 10+ years down the road, we also think it&#8217;s worth considering a modern PHP framework (like <a href=\"https:\/\/laravel.com\/\" rel=\"noopener\">Laravel<\/a>) or even a JavaScript framework (like <a href=\"https:\/\/css-tricks.com\/guides\/react\/\">React<\/a> or <a href=\"https:\/\/css-tricks.com\/guides\/vue\/\">Vue<\/a>) to create a progressive web app.<\/p>\n<p>Our developer has already done a massive amount of work turning this idea into a real application. Now let&#8217;s make some more for him! The most important part of this app is creating and managing your list. We decided from the get-go that this was going to be an AJAX-y app. We didn&#8217;t chose AJAX because it&#8217;s a popular buzzword, we chose it because we know it&#8217;s the best path toward making a responsive, easy to use, natural feeling application on the web.<\/p>\n<p><!--more--><\/p>\n<div class=\"article-series\">\n<h4>Article Series<\/h4>\n<ol>\n<li><a href=\"https:\/\/css-tricks.com\/app-from-scratch-1-design\">Planning the App: Basic Idea and Design<\/a><\/li>\n<li><a href=\"http:\/\/www.copterlabs.com\/creating-an-app-from-scratch-part-2\/\" rel=\"noopener\">Planning the App: Database Architecture and Development Approach<\/a><\/li>\n<li><a href=\"http:\/\/www.copterlabs.com\/creating-an-app-from-scratch-part-3\/\" rel=\"noopener\">Designing the App: Workflow Map and Photoshop Design<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/app-from-scratch-4-html-css\">Designing the App: HTML and CSS<\/a><\/li>\n<li><a href=\"http:\/\/www.copterlabs.com\/creating-an-app-from-scratch-part-5\/\" rel=\"noopener\">Developing the App: User Interaction<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/app-from-scratch-6-ajax\">Developing the App: Adding AJAX Interactivity<\/a><\/li>\n<li><a href=\"http:\/\/www.copterlabs.com\/blog\/creating-an-app-from-scratch-part-7\/\" rel=\"noopener\">Developing the App: List Interaction<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/app-from-scratch-8-finishing\">Security &#038; The Future<\/a><\/li>\n<\/ol>\n<\/div>\n<h3>The Big Thing: Saving the List<\/h3>\n<p>AJAX allows for us to send requests and get responses from the server without a page refresh. In our app, that functionality is going to be used primarily for saving. Let&#8217;s think through each of those times something needs to be saved:<\/p>\n<ul>\n<li>When a new list items is added, it should be saved to the list.<\/li>\n<li>When a list item is deleted, it should be deleted from the list.<\/li>\n<li>When an items color is changed, the new color should be saved.<\/li>\n<li>When a list item is marked as done, that status should be saved.<\/li>\n<li>When the list is reordered, the new order should be saved.<\/li>\n<li>When the text of a list item is altered, the new text should be saved.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/list-saving.png?resize=568%2C340\" width=\"568\" height=\"340\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p>That&#8217;s a lot of saving going on. Our developer has his work cut out for him, because each of those little events needs to have a PHP file that is ready to receive that request and deal with it. Fortunately he has some cool object oriented stuff gong on already and can certainly extend that to deal with this.<\/p>\n<h3>Interface JavaScript<\/h3>\n<p>Alongside all that AJAX saving is all the stuff that makes the interface do what visually it&#8217;s saying it will do. That little drag tab is saying it can drag list items up and down. We are saying after that happens we are going to save the list. But how does that actually work? Don&#8217;t worry, we&#8217;ll get to it. For now let&#8217;s think through all the interface JavaScript things that we need:<\/p>\n<ul>\n<li>Click and drag the drag tab, list items can be dragged around and reordered.<\/li>\n<li>Click the color tab, the list items color is toggled between some predefined choices. <\/li>\n<li>Click the checkmark, the list item crosses out and and fades down.<\/li>\n<li>Click the X, a confirmation slides out. Click again, list item is whisked away.<\/li>\n<li>Double-click the list item, text turns into a text-input for editing.<\/li>\n<li>Type in the large box below and click add, new list item is appended to bottom of the list.<\/li>\n<\/ul>\n<p>And again, we&#8217;re going to get to all that. Just a little more setup to do!<\/p>\n<h3>First things first: calling the JavaScript files<\/h3>\n<p>There is really only one page on our site, the main list page, that needs JavaScript at all. So we&#8217;ll be dropping the script files right into the index.php file. You&#8217;ll often see JavaScript file linked in the header of sites. This isn&#8217;t the time for a lengthy discussion about that, but suffice it to say that that isn&#8217;t required as it&#8217;s generally considered a performance enhancement to list them at the end of pages instead. That&#8217;s just what we&#8217;ll do here. In our index.php file, after we&#8217;ve output the list, we&#8217;ll call the JavaScript we need.<\/p>\n<pre><code class=\"html\">&lt;script type='text\/javascript' src='\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.3.2\/jquery.min.js?ver=1.3.2'&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\" src=\"js\/jquery-ui-1.7.2.custom.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\" src=\"js\/jquery.jeditable.mini.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\" src=\"js\/lists.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\n    initialize();\r\n&lt;\/script&gt;<\/code><\/pre>\n<ol>\n<li>Load <a href=\"http:\/\/jquery.com\" rel=\"noopener\">jQuery<\/a> (from Google for better speed)<\/li>\n<li>Load a customized <a href=\"http:\/\/jqueryui.com\/\" rel=\"noopener\">jQuery UI<\/a> library (for the draggable stuff)<\/li>\n<li>Load the <a href=\"http:\/\/www.appelsiini.net\/projects\/jeditable\" rel=\"noopener\">jEditable plugin<\/a> (for click-to-edit)<\/li>\n<li>Load our custom script<\/li>\n<li>Call the initialization function (our own kickstarter, kind of like a DOM ready statement)<\/li>\n<\/ol>\n<h3>Cleaning up the Markup with JavaScript<\/h3>\n<p>In our custom lists.js file, we&#8217;ll be creating a number of different functions. The very first one is the one that gets called directly in the index.php file after the lists have been output:<\/p>\n<pre rel=\"JavaScript\"><code class=\"javascript\">function initialize() {\r\n\r\n};<\/code><\/pre>\n<p>The first thing we are going to do there is clean up the markup a bit by inserting common elements with JavaScript rather than have them directly in the markup. Remember what the markup for the list looked like when we mocked it up?<\/p>\n<pre><code class=\"html\">&lt;ul id=\"list\"&gt;\r\n   &lt;li class=\"colorRed\"&gt;\r\n        &lt;span&gt;Walk the dog&lt;\/span&gt;\r\n        &lt;div class=\"draggertab tab\"&gt;&lt;\/div&gt;\r\n        &lt;div class=\"colortab tab\"&gt;&lt;\/div&gt;\r\n        &lt;div class=\"deletetab tab\"&gt;&lt;\/div&gt;\r\n        &lt;div class=\"donetab tab\"&gt;&lt;\/div&gt;\r\n    &lt;\/li&gt;\r\n\r\n    &lt;!-- more list items --&gt;\r\n\r\n&lt;\/ul&gt;<\/code><\/pre>\n<p>Much of that is redundant across all the list items. What we want is more like this:<\/p>\n<pre><code class=\"html\">&lt;ul id=\"list\"&gt;\r\n   &lt;li class=\"colorRed\"&gt;\r\n        Walk the dog\r\n    &lt;\/li&gt;\r\n\r\n    &lt;!-- more list items --&gt;\r\n\r\n&lt;\/ul&gt;<\/code><\/pre>\n<p>All the divs and the span has been removed. The class name on the list item is fine, because PHP will be spitting that out for us when it reads the database and outputs the list.<\/p>\n<p>How do we append all that extra HTML? Easy with jQuery. Target the list items and wrap each of the the innards using the wrapInner() function and append the extra divs with the append() function.<\/p>\n<pre rel=\"JavaScript\"><code class=\"javascript\">function initialize() {\r\n\r\n  \/\/ WRAP LIST TEXT IN A SPAN, AND APPLY FUNCTIONALITY TABS\r\n  $(\"#list li\")\r\n    .wrapInner(\"&lt;span&gt;\")\r\n    .append(\"&lt;div class='draggertab tab'&gt;&lt;\/div&gt;&lt;div class='colortab tab'&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;div class='deletetab tab'&gt;&lt;\/div&gt;&lt;div class='donetab tab'&gt;&lt;\/div&gt;\");\r\n\r\n};<\/code><\/pre>\n<p>Bind events to the new functionality tabs, the smart way<br \/>\nBinding an event to an HTML element is pretty easy in JavaScript. It&#8217;s like this:<\/p>\n<pre rel=\"JavaScript\"><code class=\"javascript\">$(\"li\").click(function() {\r\n   \/\/ do something\r\n});<\/code><\/pre>\n<p>There is nothing wrong with that, but we are in a bit of a unique situation with our list app here. When you bind events like that 1) it creates a unique event handler for every single list item on the page, each one taking up browser memory and 2) it only does it once, for the current state of the DOM. Don&#8217;t worry about all that too much, the point is binding events this way isn&#8217;t ideal for us because we will be inserting new list items dynamically.<\/p>\n<p>When a user inserts a new list item, that gets plugged into the DOM right then and there. That new list item will not be bound as the others are, meaning all those fancy little tabs won&#8217;t work right. Boo hoo. What can we do to solve that? Well we can create a new function that will be called when the page loads and when new list items are appended that does all that event binding work. That will definitely do the trick, but&#8230;  jQuery is smarter than that. jQuery provides a function called live() that eliminates this problem entirely.<\/p>\n<pre rel=\"JavaScript\"><code class=\"javascript\">$(\"li\").live(\"click\", function() {\r\n   \/\/ do something\r\n});<\/code><\/pre>\n<p>Binding events with the live() function is fantastic for us because 1) it only creates one event handler which is far more efficient and 2) new items appended to the page are automatically bound by the same handler. Killer.<\/p>\n<p>So for our little functionality tabs, we&#8217;ll be using them like this:<\/p>\n<pre rel=\"JavaScript\"><code class=\"javascript\">$(\".donetab\").live(\"click\", function() {\r\n   \/\/ do stuff\r\n});\r\n\r\n$(\".colortab\").live(\"click\", function(){\r\n   \/\/ do stuff\r\n});\r\n\r\n$(\".deletetab\").live(\"click\", function(){\r\n   \/\/ do stuff\r\n});<\/code><\/pre>\n<p>The drag tab doesn&#8217;t have click event, it&#8217;s actually going to use jQuery UI&#8217;s draggable functionality to do it&#8217;s thing. Let&#8217;s check that out.<\/p>\n<h3>Making the list drag \/ sortable<\/h3>\n<p>Mega thanks to jQuery UI for making such a useful set of functions. The draggable module is exactly perfect for making a list like our sortable. We target the parent &lt;ul&gt;, tell it the &#8220;handle&#8221; we wish to use (which part of the list item you can click and drag to move them). We also use a parameter forcePlaceholderSize for some visual feedback when the list items are dragged around (a white block space pops in to indicate where the list item would &#8220;land&#8221; if released)<\/p>\n<pre rel=\"JavaScript\"><code class=\"javascript\">$(\"#list\").sortable({\r\n    handle   : \".draggertab\",\r\n    update   : function(event, ui){\r\n       \r\n        \/\/ Developer, this function fires after a list sort, commence list saving!\r\n\r\n    },\r\n    forcePlaceholderSize: true\r\n});<\/code><\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/whitespace-dragged.png?resize=528%2C240\" width=\"528\" height=\"240\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<h3>Marking items as &#8220;done&#8221;<\/h3>\n<p>When the user clicks the little checkmark tab, we have already decided to do two things. Draw a line through the list item and then fade that whole list item out. But then there is the consideration of what to do if the item is already marked as done and that tab is clicked. Well, we&#8217;ll uncross it out and fade it back up. So when the click happens, we&#8217;ll make sure to check which state we are in first.<\/p>\n<pre rel=\"JavaScript\"><code class=\"javascript\">$(\".donetab\").live(\"click\", function() {\r\n\r\n    if(!$(this).siblings('span').children('img.crossout').length) {\r\n        $(this)\r\n            .parent()\r\n                .find(\"span\")\r\n                .append(\"&lt;img src='\/images\/crossout.png' class='crossout' \/&gt;\")\r\n                .find(\".crossout\")\r\n                .animate({\r\n                    width: \"100%\"\r\n                })\r\n                .end()\r\n            .animate({\r\n                opacity: \"0.5\"\r\n            },\r\n            \"slow\",\r\n            \"swing\",\r\n            function() {\r\n                           \r\n                \/\/ DEVELOPER, the user has marked this item as done, commence saving!\r\n\r\n            })\r\n    }\r\n    else\r\n    {\r\n        $(this)\r\n            .siblings('span')\r\n                .find('img.crossout')\r\n                    .remove()\r\n                    .end()\r\n                .animate({\r\n                    opacity : 1\r\n                },\r\n                \"slow\",\r\n                \"swing\",\r\n                function() {\r\n                           \r\n                \/\/ DEVELOPER, the user has UNmarked this item as done, commence saving!\r\n\r\n            })\r\n            \r\n    }\r\n});<\/code><\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/marked-done.png?resize=552%2C160\" width=\"552\" height=\"160\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<h3>Color Cycling<\/h3>\n<p>We&#8217;d better get on this whole &#8220;colored&#8221; part of Colored Lists eh? CSS will be applying the actual color, so what we&#8217;ll be doing with JavaScript is just cycling the class names applied to those list items on clicks.<\/p>\n<pre rel=\"JavaScript\"><code class=\"javascript\">$(\".colortab\").live(\"click\", function(){\r\n\r\n    $(this).parent().nextColor();\r\n\r\n    $.ajax({\r\n       \r\n        \/\/ DEVELOPER, the user has toggled the color on this list item, commence saving!\r\n\r\n    });\r\n});<\/code><\/pre>\n<p>That nextColor() function isn&#8217;t a built-in function, it will be custom written by us. It&#8217;s abstracted away here for code clarity. The way that we&#8217;ve used it here (as a part of the &#8220;chain&#8221;) is such that we&#8217;ll need to make a little jQuery plugin out of it. No problem.<\/p>\n<pre rel=\"JavaScript\"><code class=\"javascript\">jQuery.fn.nextColor = function() {\r\n\r\n    var curColor = $(this).attr(\"class\");\r\n\r\n    if (curColor == \"colorBlue\") {\r\n        $(this).removeClass(\"colorBlue\").addClass(\"colorYellow\").attr(\"color\",\"2\");\r\n    } else if (curColor == \"colorYellow\") {\r\n        $(this).removeClass(\"colorYellow\").addClass(\"colorRed\").attr(\"color\",\"3\");\r\n    } else if (curColor == \"colorRed\") {\r\n        $(this).removeClass(\"colorRed\").addClass(\"colorGreen\").attr(\"color\",\"4\");\r\n    } else {\r\n        $(this).removeClass(\"colorGreen\").addClass(\"colorBlue\").attr(\"color\",\"1\");\r\n    };\r\n\r\n};<\/code><\/pre>\n<p>Basically this checks what color the list item already is and moves it to the next color. Notice how we are altering an attribute on the list items too. Color isn&#8217;t a valid attribute in XHMTL (it&#8217;s fine in HTML5), but oh well. It&#8217;s not in the markup so it doesn&#8217;t really matter. Why are we using this? We&#8217;ll, it&#8217;s because we are about 50% of they way in doing this really intelligently. When our developer goes to save the color information about this list item to the database, he needs something to save. Back in Part 2 of this series, we can see that our developer already anticipated this and created a field for color called listItemColor, which he made an INT (integer). He figured that would be the smartest way to do it as it&#8217;s lightweight, easy, and abstract. We can decide later what they key is, e.g., 1 = Blue, 2 = Red, etc. The data itself doesn&#8217;t need to know it&#8217;s red. So, if we have an integer representing the color right in the DOM for him, that makes it really easy to snag out and pass along to save to the database.<\/p>\n<p>Why is this only 50% smart? Well, because we should probably extend that smartness to the class names themselves. We are using colorYellow for example, when color-1 might make more sense, if down the line we decide to drop yellow from the lineup and replace it. Or even perhaps let users declare their own colors.<\/p>\n<h3>Deleting list items<\/h3>\n<p>Our little &#8220;X&#8221; tab is in charge of allowing users to delete list items. We want to have a little extra insurance against accidentally fat-fingerings though. So we are going to require two clicks to actually delete something. Some applications resort to a nasty &#8220;ARE YOU SURE&#8221; modal popup dialog box, we&#8217;ll be a little more sly than that. As you click the X, a little notice will pop out to the right asking about sureness. If they click again then deleting may commence.<\/p>\n<pre rel=\"JavaScript\"><code class=\"javascript\">$(\".deletetab\").live(\"click\", function(){\r\n\r\n    var thiscache = $(this);\r\n            \r\n    if (thiscache.data(\"readyToDelete\") == \"go for it\") {\r\n        $.ajax({\r\n          \r\n              \/\/ DEVELOPER, the user wants to delete this list item, commence deleting!\r\n\r\n              success: function(r){\r\n                    thiscache\r\n                            .parent()\r\n                                .hide(\"explode\", 400, function(){$(this).remove()});\r\n\r\n                    \/\/ Make sure to reorder list items after a delete!\r\n\r\n              }\r\n\r\n        });\r\n    }\r\n    else\r\n    {\r\n        thiscache.animate({\r\n            width: \"44px\",\r\n            right: \"-64px\"\r\n        }, 200)\r\n        .data(\"readyToDelete\", \"go for it\");\r\n    }\r\n});<\/code><\/pre>\n<p>Because we were smart earlier and our little tab graphic is all a part of one sprite graphic, all we need to do is expand the width of that tab to display the message. After the first click, we append a little bit of data (jQuery&#8217;s data() function) to that list item saying to &#8220;go for it&#8221;. Upon a second click, that test will be TRUE and we know we can commence the deletion of that list item.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/double-delete.png?resize=568%2C160\" width=\"568\" height=\"160\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p>Since we are using jQuery UI, we tossed in a little extra fun flair with the &#8220;explode&#8221; option for hiding elements.<\/p>\n<h3>Click-to-edit list items<\/h3>\n<p>In order to make our list items click-to-edit, we&#8217;ll stand on the shoulders of others and use a jQuery plugin, jEditable. All we need to do with this plugin is target an element and use the editable() function on it with some parameters. On big caveat though, we can&#8217;t use the live() function with this plugin because it&#8217;s not a standard jQuery event.<\/p>\n<p>Back before we had live, we did what we talked briefly earlier. We called a function that did all our binding. That way we could call it on DOM ready as well as after any AJAX insertions. We&#8217;ll lean on that technique now.<\/p>\n<pre rel=\"JavaScript\"><code class=\"javascript\">function bindAllTabs(editableTarget) {\r\n   \r\n    $(editableTarget).editable(\"\/path\/for\/DEVELOPER\/to\/save.php\", {\r\n        id        : 'listItemID',\r\n        indicator : 'Saving...',\r\n        tooltip   : 'Double-click to edit...',\r\n        event     : 'dblclick',\r\n        submit    : 'Save',\r\n        submitdata: {action : \"update\"}\r\n    });\r\n    \r\n}<\/code><\/pre>\n<p>With those parameters, we&#8217;re giving the developer what he needs for a callback file path. We&#8217;re also declaring that we want list items to require a double-click to edit, what the tooltip will be, and what the text in the saving button will say. Very nicely customizeable!<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/click-to-edit2.png?resize=544%2C150\" width=\"544\" height=\"150\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p>Remember those spans we inserted around the text of the list items earlier. Now we are cashing in on that. When we bind this editable function, we&#8217;ll bind it to those spans. So right after DOM ready we&#8217;ll call:<\/p>\n<pre rel=\"JavaScript\"><code class=\"javascript\">bindAllTabs(\"#list li span\");<\/code><\/pre>\n<p>We&#8217;re going to need this function again when appending new list items&#8230;<\/p>\n<h3>Appending new list items<\/h3>\n<p>Core to the functionality of our list app is allowing people to add new list items. We already have the markup in place for that, so let&#8217;s look at the JavaScript that powers it.<\/p>\n<pre rel=\"JavaScript\"><code class=\"javascript\">$('#add-new').submit(function(){\r\n\r\n    var $whitelist = '&lt;b&gt;&lt;i&gt;&lt;strong&gt;&lt;em&gt;&lt;a&gt;',\r\n        forList = $(\"#current-list\").val(),\r\n        newListItemText = strip_tags(cleanHREF($(\"#new-list-item-text\").val()), $whitelist),\r\n        URLtext = escape(newListItemText),\r\n        newListItemRel = $('#list li').size()+1;\r\n    \r\n    if(newListItemText.length &gt; 0) {\r\n        $.ajax({\r\n           \r\n                \/\/ DEVELOPER, save new list item!\r\n\r\n            success: function(theResponse){\r\n              $(\"#list\").append(\"&lt;li color='1' class='colorBlue' rel='\"+newListItemRel+\"' id='\" + theResponse + \"'&gt;&lt;span id=\"\"+theResponse+\"listitem\" title='Click to edit...'&gt;\" + newListItemText + \"&lt;\/span&gt;&lt;div class='draggertab tab'&gt;&lt;\/div&gt;&lt;div class='colortab tab'&gt;&lt;\/div&gt;&lt;div class='deletetab tab'&gt;&lt;\/div&gt;&lt;div class='donetab tab'&gt;&lt;\/div&gt;&lt;\/li&gt;\");\r\n              bindAllTabs(\"#list li[rel='\"+newListItemRel+\"'] span\");\r\n              $(\"#new-list-item-text\").val(\"\");\r\n            },\r\n            error: function(){\r\n                \/\/ uh oh, didn't work. Error message?\r\n            }\r\n        });\r\n    } else {\r\n        $(\"#new-list-item-text\").val(\"\");\r\n    }\r\n    return false; \/\/ prevent default form submission\r\n});<\/code><\/pre>\n<p><strong>NOTE:<\/strong> Stay tuned for the final part in the series where will go over some extra security that needs to happen here. Anytime we accept input from the user, it needs to be scrubbed. This is no exception.<\/p>\n<p>One last thing we did there was to clear the input field after submission. That makes adding a bunch of list items in sequence very easy and natural. Also, note that we called that bindAllTabs function again after the new list item was appended. That&#8217;s why we abstracted that function away to begin with, so we could call it when new list items were appended AJAX style. That ensures the click-to-edit functionality is working on newly appended list items even before a page refresh. The rest of the tabs are automatically cool, due to the live() binding.<\/p>\n<h3>Moving On<\/h3>\n<p>Up next we&#8217;ll pass it back to the developer for <a href=\"http:\/\/www.copterlabs.com\/blog\/creating-an-app-from-scratch-part-7\/\" rel=\"noopener\">filling in those gaps on how those list interactions work from the PHP \/ Database side<\/a>. Then, we&#8217;ll finish up <a href=\"https:\/\/css-tricks.com\/app-from-scratch-8-finishing\">talking a little security and wrapping up any loose ends<\/a>.<\/p>\n<div id=\"series-authors\">\n<h4>Series Authors<\/h4>\n<div id=\"jason-series-author\">\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/author-jason.jpg?resize=125%2C125\" width=\"125\" height=\"125\" alt=\"\" style=\"float: left; margin: 0 10px 4px 0;\" data-recalc-dims=\"1\" \/><strong>Jason Lengstorf<\/strong> is a software developer based in Missoula, MT. He is the author of <a href=\"http:\/\/www.amazon.com\/gp\/product\/1430224738?ie=UTF8&#038;tag=css-tricks-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=1430224738\" rel=\"noopener\">PHP for Absolute Beginners<\/a> and regularly blogs about programming. When not glued to his keyboard, he&#8217;s likely standing in line for coffee, brewing his own beer, or daydreaming about being a Mythbuster.\n<\/div>\n<div id=\"chris-series-author\">\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/author-chris.jpg?resize=125%2C125\" width=\"125\" height=\"125\" alt=\"\" style=\"float: right; margin: 0 0 4px 10px;\" data-recalc-dims=\"1\" \/><strong>Chris Coyier<\/strong> is a designer currently living in Chicago, IL. He is the co-author of <a href=\"http:\/\/digwp.com\/book\/\" rel=\"noopener\">Digging Into WordPress<\/a>, as well as blogger and speaker on all things design. Away from the computer, he is likely to be found yelling at Football coaches on TV or picking a banjo.\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>&#x1f44b; Hey there! We want to give you a heads up that the source code that accompanies this series is no longer available to download. We still think there are valuable bits of information to get from the series, but given that we&#8217;re 10+ years down the road, we also think it&#8217;s worth considering a [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":4817,"url":"https:\/\/css-tricks.com\/app-from-scratch-8-finishing\/","url_meta":{"origin":4805,"position":0},"title":"Creating a Web App from Scratch &#8211; Part 8 of 8: Security &#038; The Future","date":"November 27, 2009","format":false,"excerpt":"\ud83d\udc4b Hey there! We want to give you a heads up that the source code that accompanies this series is no longer available to download. We still think there are valuable bits of information to get from the series, but given that we're 10+ years down the road, we also\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4170,"url":"https:\/\/css-tricks.com\/app-from-scratch-1-design\/","url_meta":{"origin":4805,"position":1},"title":"Creating a Web App from Scratch &#8211; Part 1 of 8: Basic Idea and Design","date":"November 23, 2009","format":false,"excerpt":"\ud83d\udc4b Hey there! We want to give you a heads up that the source code that accompanies this series is no longer available to download. We still think there are valuable bits of information to get from the series, but given that we're 10+ years down the road, we also\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/app-sketch.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":240099,"url":"https:\/\/css-tricks.com\/loading-using-external-data-react\/","url_meta":{"origin":4805,"position":2},"title":"Loading and Using External Data in React","date":"April 1, 2016","format":false,"excerpt":"Hey JavaScripters! I\u2019ve been learning a bunch about React lately. It\u2019s very fun. It feels like a great way to write JavaScript. Seems to me it has almost the same feel jQuery did in the early days. Confession though: I\u2019m not master of it. I\u2019m about to show you how\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":293102,"url":"https:\/\/css-tricks.com\/zoom-cors-and-the-web\/","url_meta":{"origin":4805,"position":3},"title":"Zoom, CORS, and the Web","date":"July 23, 2019","format":false,"excerpt":"It's sorta sad by funny that that big Zoom vulnerability thing was ultimately related to web technology and not really the app itself. There is this idea of custom protocols or \"URL schemes.\" So, like gittower:\/\/ or dropbox:\/\/ or whatever. A native app can register them, then URLs that hit\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/zoom-logo-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":15728,"url":"https:\/\/css-tricks.com\/custom-events-are-pretty-cool\/","url_meta":{"origin":4805,"position":4},"title":"Custom Events are Pretty Cool","date":"December 22, 2011","format":false,"excerpt":"Callbacks are one way to keep JavaScript functionalities cleanly separated, but they aren't always enough. Using custom events are easier, more flexible, cleaner, and can make more obvious readable code.","rel":"","context":"In &quot;Advanced&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":340759,"url":"https:\/\/css-tricks.com\/what-i-learned-building-a-word-game-app-with-nuxt-on-google-play\/","url_meta":{"origin":4805,"position":5},"title":"What I Learned Building a Word Game App With Nuxt on Google Play","date":"May 25, 2021","format":false,"excerpt":"I fell in love with coding the moment I created my first CSS :hover effect. Years later, that initial bite into interactivity on the web led me to a new goal: making a game. Table of contentsWhat\u2019s the game (and what\u2019s that name)?Choosing NuxtAchieving native app feel with the webVibration\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/quina-app.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/4805"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=4805"}],"version-history":[{"count":21,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/4805\/revisions"}],"predecessor-version":[{"id":286176,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/4805\/revisions\/286176"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=4805"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=4805"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=4805"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}