Loading page part by click

Have parts of the page loaded or updated as result of clicking a link or button.

By providing an inline target to a hyperlink, the resource it points to, is loaded in the target when the link is clicked on:

<a href="/Samples/LoremIpsum" target="#t1">Lorem Ipsum</a>
<div id="t1">
</div>

Note that with Sircl, you can place a href attribute on any element to turn it into a hyperlink. But you can also use the onclick-load attribute, which may be preferred when using a button as trigger:

<button onclick-load="/Samples/LoremIpsum" target="#t1">Lorem Ipsum</button>
<div id="t1">
</div>

The onclick-load attribute also uses the target attribute to determine the target and type (Ajax or not) of request to issue.

Working demo‌

Loading demo...

Requirements

This example requires following Sircl library files to be loaded:

or:

Or their non-minified counterparts.

See the Get Started section about how to set up your project to use the Sircl library.