StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Here's a working example of a JSON/AJAX Ticker:</p> <ul> <li><strong><a href="http://ticker.weisser.co/" rel="nofollow noreferrer">http://ticker.weisser.co/</a></strong></li> </ul> <p>Per twhyler's specification, it randomly swaps an item every 4.5 seconds, keeping track of ones that have already been seen. Once they've all been seen, it starts over again:</p> <p><img src="https://i.stack.imgur.com/gXVvv.png" alt="JSON/AJAX Ticker"></p> <p>Code Files:</p> <ul> <li><strong><a href="http://ticker.weisser.co/default.html" rel="nofollow noreferrer">default.html</a></strong> (Main Program)</li> <li><strong><a href="http://ticker.weisser.co/template.html" rel="nofollow noreferrer">template.html</a></strong> (Product Template)</li> <li><strong><a href="http://ticker.weisser.co/UK.top.20.html" rel="nofollow noreferrer">UK.top.20.html</a></strong> (JSON Data)</li> <li><strong><a href="http://ticker.weisser.co/ticker.js" rel="nofollow noreferrer">ticker.js</a></strong> (jQuery)</li> <li><strong><a href="http://ticker.weisser.co/ticker.css" rel="nofollow noreferrer">ticker.css</a></strong> (Style Sheet)</li> </ul> <p>First, we should store template.html in our global <code>template</code> variable and fire the <code>getJson()</code> function:</p> <pre><code>template = ''; .... $(document).ready(function () { $.get('template.html', function(html) { template = html; getJson(); }); }); </code></pre> <p>Then, we'll store the JSON into our <code>data</code> variable and fire the <code>initialize()</code> function:</p> <pre><code>data = ''; // JSON data will be stored here myurl = 'UK.top.20.html'; .... function getJson() { $.getJSON(myurl, function (JSON) { data = JSON; initialize(); }); } </code></pre> <p>Here, we'll call the <code>load()</code> function 3 times to populate our 3 product div's with data right away. Then we set <code>i</code> back to <code>2</code> (that's so it will change the 3rd DIV first), and schedule <code>tick()</code> to fire in 4.5 seconds:</p> <pre><code>tick_time = 4500; .... function initialize() { // Start with the first 3 for (i = 1; i < 4; i++) { load(); } i = 2; setTimeout('tick()', tick_time); } </code></pre> <p>Before we explain the <code>load()</code> function, let's talk about `String.prototype.f' at the bottom of the script:</p> <pre><code>String.prototype.f = function () { var args = arguments; return this.replace(/\{(\d+)\}/g, function (m, n) { return args[n]; }); }; </code></pre> <p>This function works similar to <code>String.Format(formatstring, arg1, arg2, arg3...)</code> in C# or <code>sprintf($formatstring, arg1, arg2, arg3...)</code> in PHP. Here's an example:</p> <pre><code>formatstring = 'Roses are {0}, Violets are {1}, String.Format {2} and so do {3}!'; result = formatstring.f('red', 'blue', 'rocks', 'you'); alert(result); </code></pre> <p>So as you can see, this <code>String.prototype.f</code> function comes in very handy!</p> <p>The first thing the <code>load()</code> function will do is set <code>rid = randomId();</code>. Let's take a look at the <code>randomId()</code> function next. The first thing it does is get a number from 1-20 (based on the length of our JSON data). Then, it checks to see if our <code>seen</code> array is the same size as our JSON data, and if it is - it sets it back to 0. Next it makes sure that our <code>rid</code> hasn't been seen recently, and if it has, the function recursively calls itself again till it gets a unique random id. Otherwise, we store the <code>rid</code> in our <code>seen</code> array and return the value.</p> <pre><code>function randomId() { rid = Math.floor(Math.random() * data.results.length); if (seen.length == data.results.length) { seen.length = 0; } if ($.inArray(rid, seen) == -1) { seen.push(rid); return rid; } else { return randomId(); } } </code></pre> <p>Next in our <code>load()</code> function after getting that random ID, we setup <code>item</code> and <code>plat</code> as convenient shortcuts. <code>plat_html</code> is a temporary storage place for the Platform elements. The for-loop looks at all the Platform data in our JSON and uses our String.Format function to fill our plat_html string.</p> <p>Finally, we allow the current value of i (which is global) determine which <code>#product_</code> gets updated, and <code>template.f</code> fills our template with JSON data which is done with a smooth jQuery animation thanks to <code>.fadeIn()</code>.</p> <pre><code>function load() { rid = randomId(); item = data.results[rid]; plat = item.Platform; plat_html = ''; for (var j = 0; j < plat.length; j++) { plat_html += plat_fmt.f( plat[j].Hardware, plat[j].Market ); } $('#product_' + i).html( template.f( item.Image, item.id, item.AgeRating, item.WikiUrl, item.Title, item.Source, item.Genre, plat_html ) ).fadeIn(); } </code></pre> <p>Lastly, let's take a look at the recursive <code>tick()</code> function. It begins by incrementing our global <code>i</code> variable and setting it back to 1 when it reaches 4. Then we perform an animated <code>fadeOut()</code> on our <code>#product_</code> element and wait till it's finished till we call <code>load()</code> again. Then, it schedules itself to run again in another 4.5 seconds.</p> <pre><code>function tick() { i++; if (i == 4) { i = 1; } $('#product_' + i).fadeOut(function() { load(); }); setTimeout('tick()', tick_time); } </code></pre> <p>That's it!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload