Core · jQuery-compatible

Loading HTML fragments

$('#panel').load('/news.html #headlines') fetches a whole page but inserts only the part you asked for.

Pass a URL, optionally followed by a space and a selector. Without a selector, the entire response replaces the element's content. With one, jsKjs parses the response in an inert <template> and inserts just the matching nodes — scripts in the response are not executed. The optional callback receives the response text and a status of 'success' or 'error'.

Live · Fragment vs full page

Fragment only

Whole page

View the source for this demo

HTML

<div class="row">
  <button type="button" id="lf-frag">.load('/api/news.html #headlines')</button>
  <button type="button" id="lf-full">.load('/api/news.html')</button>
</div>
<div class="grid g2" style="margin-top:14px">
  <div><h4 style="margin:0 0 6px">Fragment only</h4><div id="lf-a" class="out" style="min-height:120px" aria-live="polite"></div></div>
  <div><h4 style="margin:0 0 6px">Whole page</h4><div id="lf-b" class="out" style="min-height:120px" aria-live="polite"></div></div>
</div>

JavaScript

$('#lf-frag').on('click', () => $('#lf-a').load('/api/news.html #headlines'));
$('#lf-full').on('click', () => $('#lf-b').load('/api/news.html', function (text, status) {
  console.log('load finished with status', status);
}));

More examples

Refresh a sidebar from the real page

JavaScript

$('#sidebar').load('/account #account-summary');
$('#results').load('/search?q=' + encodeURIComponent(q) + ' .result');

API

.load(url [ + ’ selector’] [, done]) → self

Fetch HTML into the element. Add a space + selector to insert only a fragment of the response.

Reference: .load() →

Migrating

Coming from htmxIn attribute form, the same idea is kj-get + kj-target. Fragment selection from a response (htmx's hx-select) is only available through .load() in jsKjs.

Related features

Core