Asyncode Blog Make your website dynamic with Asyncode HTML5 Link extensions

Asyncode Framework (ACF) greatly extends HTML5's functionality. One of the most powerful extensions enhances the way <a> tag works.How <a> tag works in plain HTML5The normal behavior of <a> is to replace the current page with the one indicated by its href attribute:<a href="//google.com">Go to google.com!</a>Once the "Go to google.com!" link is clicked, the web browser will reload the page and display "//google.com" contents.The target attribute allows for modifying the behavior of page reload. E.g. target="_blank" indicates that a new window/tab will be opened instead of replacing the current window/tab as in:<a href="//google.com" target="_blank">contents</a>Asyncode extensionsWith ACF link extensions the <a> tag gains new behavior. Links are able to:reload only a part of a page instead of the whole page,download additional data (in parallel with an HTML file),trigger the templating engine so that markup is dynamically filled with data from the back-end.All files used in this tutorial are available in this GIST and ACP examples repository on Github.Refreshing part of a pageTo refresh one part (div) of a page, the part should first be identified by the id attribute:<div id="myPart">contents</div>Then to replace its "contents" with hello.html fragment (located in fragments folder) create a link:<a href="/hello" ac-target="#myPart">Load hello!</a>Delivering data to a templateThe above link will simply replace the contents of <div> with HTML found in the file hello.html. To make it more interesting, the content can be dynamically generated by using a templating engine embedded in ACF. No additional work is required to use it. All HTML files (including the hello.html) are processed by the templating engine prior to showing the result to the end user.In most cases templates require additional data from the server. ac-datasource attribute of <a> tag takes care of that:<a href="/hello" ac-target="#myPart" ac-datasource="/myData">Load hello</a>To give an example, let's assume that hello.html contains the following:<p>Hello {{!.name}}</p>/api/myData.xml contains:<?xml version="1.0" encoding="UTF-8"?><view xmlns="http://asyncode.com/View"> <node name="name">World</node></view>and default.html:<div id="myPart">Nothing here yet!</div><a href="/hello" ac-target="#myPart" ac-datasource="/myData">Load hello</a>after the user clicks on "Load hello!" link, the page will display:<div id="myPart">Hello World!</div>There is no limit to the number of targets, which means you can create nested links (just put another <div class="anotherPart"></div> and a link inside hello.html). ACF will ensure that wherever a user is in your app, there is a corresponding link for the current state of the application that can be copied and shared or referred to later.Next stepsThanks to Asyncode link extensions you can easily create complex dynamic web interfaces. For further inspiration check out ACP examples, where you can find ready to use full-featured apps.