index.md

1.3 - pat-inject

Documentation: https://patternslib.com/demos/inject#documentation

With pat-inject you can load remote content with great variety.

Have a look at the options reference on how to customize it and to the modifiers reference on how to use special pseudo-element like keywords for further customizing the source and target arguments.

pat-inject only works on anchor elements, forms and as a special case on a .pat-subform element.

A simple example

This example just loads remote text from a html file next to this one.

Load remote text

Injected content will appear here.

Loading markdown, reinitializing patterns.

Another example - load some markdown content from the previous pat-switch example. You can see that any patterns in the remotely loaded content are also initialized.

Load pat-switch tutorial

Injected content will appear here.

Automatically in-view loading

pat-inject can also load automatically when the pat-inject element comes into view via the trigger: autoload-visible parameter.

First, let's define an space which moves the demo out of view for sure. When you scroll down a mp3 player should appear.

scroll down....

Now, let's load.

Load the index page.

A like button with pat-inject enabled forms

pat-inject on forms turn them into ajax based forms the values are submitted via ajax.

A simple example is a like button.

The beauty in this example is also that a form is used. This is semantically just correct. Data is changed on the server side, so a form fits much better than a simple link.

Like ⁽³⁾