1127N/A{{>jsonp-gallery-css}}

1127N/A

1127N/A<div class="intro">

1127N/A <p>

1127N/A This example shows how to create a reusable JSONPRequest for polling as

1127N/A well as how to configure success and failure callbacks. See the API

1127N/A docs and user guide for a full listing of available configurations.

1127N/A </p>

1127N/A

1127N/A <p>

1127N/A For this example, we will use a JSONP service hosted on <a

1127N/A href="http://yuilibrary.com">YUILibrary</a> to fetch information about

1127N/A a random Gallery module and render some of the information on the page.

1127N/A </p>

1127N/A</div>

1127N/A

1127N/A<div class="example yui3-skin-sam">

1127N/A{{>jsonp-gallery-markup}}

1127N/A{{>jsonp-gallery-js}}

1127N/A</div>

1127N/A

1127N/A<h3>The data</h3>

1127N/A<p>The structure of the JavaScript object returned from YUILibrary's JSONP service will look like this:</p>

1127N/A

1127N/A```

1127N/A{

1127N/A modules: [

1127N/A {

1127N/A url: (the url to the module),

1127N/A title: (the title of the module),

1127N/A summary: (short description of the module),

1127N/A ...,

1127N/A owner: {

1127N/A icon: (url to the author's thumb image),

1127N/A fullname: (the author's full name),

1127N/A rank: (YUI Team member?, Contributor? etc),

1127N/A ...

1127N/A }

1127N/A }

1127N/A ],

1127N/A ...

1127N/A}

1127N/A

1127N/A```

1127N/A

1127N/A<p>We'll use these objects to populate an HTML template with data <em>{placeholder}</em>s using `Y.Lang.sub( template, object )`.</p>

1127N/A

1127N/A

1127N/A<h3>Start simple</h3>

1127N/A<p>To make a single call to the YUILibrary Gallery API, we can just use</p>

1127N/A

1127N/A```

1127N/AY.jsonp("http://yuilibrary.com/gallery/api/random?callback={callback}", handleJSONP);

1127N/A

1127N/A```

1127N/A

1127N/A<p>But since each call to `Y.jsonp()` creates a new instance of `Y.JSONPRequest`, we may as well store the instance and reuse it.</p>

1127N/A

1127N/A```

1127N/Avar gallery = new Y.JSONPRequest("http://yuilibrary.com/gallery/api/random?callback={callback}", handleJSONP);

1127N/A

1127N/Agallery.send();

1127N/A

1127N/A```

1127N/A

1127N/A<h3>Add polling</h3>

1127N/A<p>JSONPRequest doesn't have any built-in polling mechanism, but `Y.later()` can handle this for us.</p>

1127N/A

1127N/A```

1127N/Avar url = "http://yuilibrary.com/gallery/api/random?callback={callback}";

1127N/A

1127N/Afunction handleJSONP(response) {

1127N/A // populate template from the response object and add to the output div

1127N/A ...

1127N/A

1127N/A Y.one("#out").setContent( Y.Lang.sub(template, module) );

1127N/A

1127N/A // After 7 seconds, call the API for a new module

1127N/A Y.later(7000, this, this.send);

1127N/A};

1127N/A

1127N/Avar gallery = new Y.JSONPRequest(url, handleJSONP);

1127N/Agallery.send();

1127N/A

1127N/A```

1127N/A

1127N/A<h3>Add failure protection</h3>

<p>In case the Gallery API is busy or some other problem arises, we'll also want to handle this case and display an error. We can do this by passing a configuration object as the second parameter rather than a simple success callback.</p>

```

var gallery = new Y.JSONPRequest(url, {

on: {

success: function (response) {

// populate output div from the template and response object

...

Y.one("#out").setContent( Y.Lang.sub(template, module) );

// After 7 seconds, call the API for a new module

Y.later(7000, this, this.send);

},

failure: function () {

Y.one("#out").setContent( failureTemplate );

}

}

});

gallery.send();

```

<h3>Add flare</h3>

<p>Now we'll add a bit of flourish, by adding a visual indicator of how long until the next module is requested. We'll replace the call to `Y.later()` with a call to `node.transition()` using a shrinking border to show the remaining time. Then when the transition is complete, we call `send()` again.

```

var gallery = new Y.JSONPRequest(url, {

on: {

success: function (response) {

// populate output div from the template and response object

...

Y.one("#out").setContent( Y.Lang.sub(template, module) );

// Add some flare to the poll interval by showing a "time left"

// indicator via the header's border

Y.one("#out h4")

.setStyle("borderRightWidth", "100px")

.transition({

borderRightWidth: 0,

duration: 7

}, function () {

gallery.send();

});

},

failure: function () {

Y.one("#out").setContent( failureTemplate );

}

}

});

gallery.send();

```

<h3>Stop the poll</h3>

<p>The final step is to add the ability to start and stop the polling. We'll manage this by adding a property to the `gallery` JSONPRequest instance named `gallery.polling`. See the full code listing below for the implementation.

<h3 id="fullcode">Full Code Listing</h3>

<h4>HTML</h4>

```

{{>jsonp-gallery-markup}}

```

<h4>JavaScript</h4>

```

{{>jsonp-gallery-js}}

```