Injection pattern

In this example, a Single HTML source is used for various injections.

Place "Rilke" in frame 1 after 2 seconds <a href="demo/inject-sources.html#pos-1" class="pat-inject">
Place "Wilde" in frame 2 <a href="demo/inject-sources.html#pos-2" class="pat-inject">
Place "Cocteau" in frame 3 <a href="demo/inject-sources.html#pos-3" class="pat-inject">
Place "Cocteau" in frame 1, "Rilke" in frame 2 and "Wilde" in frame 3 <a href="demo/inject-sources.html" data-pat-inject="#pos-3 #pos-1 &&#pos-1 #pos-2 &&#pos-2 #pos-3" class="pat-inject">
Place "Cocteau" in all frames <a href="demo/inject-sources.html#pos-3" data-pat-inject="source: #pos-3; target: .item article" class="pat-inject">Place "Cocteau" in all frames</a>
Autoloads "Wilde" in frame 3 after 2 seconds <a href="demo/inject-sources.html#pos-2" data-pat-inject="source: #pos-2; target: #pos-3; trigger: autload; delay: 2000" class="pat-inject">Autoloads "Wilde" in frame 3 after a 2 second delay</a> Click quickly to prevent Wilde and load Rilke instead
Autoloads "Wilde" in frame 1 after you are idle for 2 seconds <a href="demo/inject-sources.html#pos-2" data-pat-inject="source: #pos-2; target: #pos-4; trigger: autload; delay: 2000" class="pat-inject">Autoloads "Wilde" in frame 4 after a 2 second delay</a>
Place "Wilde" in frame 2 on push (push_marker: content-updated) <a href="demo/inject-sources.html#pos-2" class="pat-inject" data-pat-inject="push-marker: content-updated">
Trigger an inject that fails. (Puts an error message in a data attribute on the body tag) <a href="page-that-doesnt-exist" class="pat-inject">
Place "Wilde in column 2 when

Inject and scroll demos

1) Re-inject this entire page and scroll to the history example <a href="index.html" class="pat-inject" data-pat-inject="scroll:#demo-history">

2) Re-inject this entire page and scroll to the top <a href="index.html" class="pat-inject" data-pat-inject="scroll:top">

3) Load text into body and scoll to #scroll-target <a href="demo/inject-text.html" class="pat-inject" data-pat-inject="scroll:#scroll-target">

4) Scroll to the target defined in the URL part as anchor-reference <a href="demo/inject-text.html#pos-4" class="pat-inject" data-pat-inject="scroll:target">

5) "scroll:none" Do not scroll (default behavior) <a href="demo/inject-text.html" class="pat-inject" data-pat-inject="scroll:none">

6) Inject 'Cocteau' in the frame below and scroll to the first paragraph. <a href="demo/inject-sources.html#pos-3" class="pat-inject" data-pat-inject="target:#pos-4; scroll: #dieu-nu-p-1">

7) Inject all content from source in the frame below and scroll to the second article. <a href="demo/inject-sources.html" class="pat-inject" data-pat-inject="target:#pos-4; scroll: #pos-2">

Inject and scroll demos

Shows a fallback message on error

Inject and fix URLs of options

Can replace itself

Can replace itself when a button in a form

Inject history example

Inject history example 2

Inject autosubmit with form using GET and POST

Call something without injecting anything

Inject nothing into the target, effectively destroying whatever is in there.