You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
2.3 KiB
HTML
75 lines
2.3 KiB
HTML
---
|
|
layout: default
|
|
title: Loading ajax content
|
|
description: Fetch data from an api, then add it to Shuffle.
|
|
image: /demos/ajax.jpg
|
|
extraJS: ["demos/ajax.js"]
|
|
externalJS: ["https://unpkg.com/whatwg-fetch"]
|
|
prism: true
|
|
photoCredit: false
|
|
---
|
|
|
|
<style>
|
|
.person-item {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.person-item__inner {
|
|
display: flex;
|
|
text-align: center;
|
|
height: 100px;
|
|
}
|
|
|
|
.person-item__inner > span {
|
|
margin: auto;
|
|
color: white;
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
|
|
}
|
|
|
|
.load-more-wrapper {
|
|
margin: 20px 0;
|
|
}
|
|
</style>
|
|
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12@sm">
|
|
<h2>Shuffle with <abbr title="asynchronous JavaScript and XML">Ajax</abbr> Content</h2>
|
|
<p>This demo builds off the <a href="{{ site.baseurl }}{% post_url 2013-06-19-adding-removing %}">adding and removing demo</a> to append new items after fetching them from an API and follows the same pattern:</p>
|
|
<ol>
|
|
<li>Insert the elements into the shuffle container element (in this case, <code>#grid</code>) however you like. You could use <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML"><code>insertAdjacentHTML</code></a>, <code>jQuery.append</code>, or any other method of inserting new content.</li>
|
|
<li>Make an array of the newly added items.</li>
|
|
<li>Call <code>add(newItemsArray)</code> on your shuffle instance.</li>
|
|
</ol>
|
|
<p>The data comes from <a href="https://reqres.in" target="_blank" rel="noopener">https://reqres.in</a>.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div id="grid" class="my-shuffle-container row">
|
|
<div class="col-3@xs col-3@sm my-sizer-element"></div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-6@xs col-12@sm">
|
|
<div class="load-more-wrapper text-center">
|
|
<button class="btn" id="load-more-button">Load More</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container has-code-block">
|
|
<div class="row">
|
|
<div class="col-12@sm">
|
|
<h2>Source code for this demo</h2>
|
|
<p>Link to <a href="{{ site.baseurl }}/js/demos/ajax.js">demo source</a></p>
|
|
<div class="code-block">
|
|
<pre class="language-js" data-src="{{ site.baseurl }}/js/demos/ajax.js"></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|