Implementing inline editing with the XF javascript framework - Building with XenForo 2 part 11

Welcome to a new series of videos taking an in-depth look at building an add-on for XenForo 2. These videos will take you step-by-step through various tools and technologies available for you to use. Part 11: Heading back to our content list, we look at how to implement an inline edit system using both built-in XenForo Javascript functionality (XF.Inserter) and some custom code of our own. Topics covered: 00:00 Introduction 00:46 Editing templates in preparation for on-page interaction 02:59 Using XF.Inserter to load part of a template into another page 03:40 The 'replace' option for XF.Inserter 04:28 Applying a JS handler to an HTML element 05:10 Passing options to XF javascript through data attributes 05:51 Targeting page elements with a CSS / jQuery selector 07:06 Testing the operation of XF.InserterClick 07:25 Tidying up the appearance of the inserted HTML with some CSS/LESS 09:02 Preparing the note template to host form elements 11:20 Testing the operation of the new form 11:52 Overview of the next steps 13:03 Refactoring the note template into an XF macro 14:11 Setting up a macro 15:25 Calling a macro from another template 16:04 Changing the controller redirect behaviour to return a template 18:17 Preparing a custom javascript file for XF 19:31 Building a custom element handler 21:01 Setting up event listeners 21:56 Identifying the form submit events to which to listen 22:23 Using XF.Proxy() to maintain 'this' object scope 23:06 Appending a hidden form field before form submission 26:12 Allowing the existing error handler to operate 26:33 Adapting XF.Inserter to be called from our custom JS code 29:03 Attaching our custom element handler to the template 29:22 Using xf:set to create a convenient variable within a template 30:06 Moment of truth - it works! Notes: Looking back at 26:58, it would have been better to only instantiate the inserter within handleResponse(), rather than putting it in init(). No biggie... Building a XenForo 2 add-on playlist: - https://www.youtube.com/playlist?list=PL71lyEf0D9ic8GyK9AoTVH2dANbVE-KVu Useful links: XenForo.com - https://XenForo.com XenForo developer documentation - https://XenForo.com/docs/dev Development environment setup guides - MacOS - https://xenforo.com/docs/dev/macos-dev/ - Windows - https://xenforo.com/docs/dev/windows-dev/ - Linux - https://xenforo.com/docs/dev/linux-dev/ - XDebug with Visual Studio Code - https://xenforo.com/docs/dev/vscode/ The XenForo 1.0 video series from 2010 - Part 1 - https://vimeo.com/16893821 - Part 2 - https://vimeo.com/17010931 - Part 3 - https://vimeo.com/17086181