Question

I’m trying to use a yui plugin that pulls from a json file and populates a div on the page. Everything should be a go, however, since the plugin never gets to the render stage, the rest of it does not run. It is successfully loaded otherwise (if I stick an alert or console.log at the beginning of the event, it works fine).

Here’s the code:

YUI.add('events', function(Y) {

   var urlEvents = //"/cgi-bin/eventview-json/?cal=admissions/events&days=10";
                       "/admissions/events/events.json";

   //var eventContainer = $("#insert-events");
   /* EventList class constructor */
   var EventList = function(config) {
      EventList.superclass.constructor.apply(this, arguments);
   };

   /*
    * Required NAME static field, to identify the class and
    * used as an event prefix, to generate class names etc. (set to the
    * class name in camel case).
    */
   EventList.NAME = "EventList";

   /*
    * Required NS static field, to identify the property on the host which will,
    * be used to refer to the plugin instance ( e.g. host.feature.doSomething() )
    */
   EventList.NS = "EventList";

   /*
    * The attribute configuration for the plugin. This defines the core user facing state of the plugin
    */
   EventList.ATTRS = {};


   var convertYYYYMMDDtoJS = function(s) {

      var a, jsdate = null;

      try {

         a = /^(\d\d\d\d)(\d\d)(\d\d)$/.exec(s);

         if (a) {
            jsdate = new Date(a[1], a[2]-1, a[3]);
         }
      } catch (ex) {
         /* Nothing */
      }

      return jsdate;
   };


   var insertEvents = function(id, response, e) {
    alert('hello');
      var i, resp, events, event, html, jsdate, label, seenevent, yyyymmdd;
      var maxevents = 5, eventcount;

      try {
         resp = Y.JSON.parse(response.responseText);
         events = resp.results;

         html = "";
         seenevent = {};
         eventcount = 0;
         yyyymmdd = "";
         for (i = 0; i < events.length; i++) {
            event = events[i];
            if (seenevent[event.title]) {
               continue;
            }
            seenevent[event.title] = true;

            if (event.date !== yyyymmdd) {
               // This is the first event on this date.

               // If we've seen maxevents events, then bail before starting a new day.
               if (eventcount >= maxevents) {
                  break;
               }

               // Put out a new label for this day.
               jsdate = convertYYYYMMDDtoJS(event.date);
               label = Y.DataType.Date.format(jsdate, {format: "%b %e %a"});

               /*
                * The first empty div below, "<div class='clear'></div>" is only needed for IE 7.
                * IE 7 does not properly clear both left and right floats when "clear: both" is specified
                * if the element itself is floated.  The extra div clears the floats, but isn't floated
                * itself.  The extra div doesn't cause any grief in newer browsers, so I add it always.
                */
               html += "<div class='clear'></div><div class='event-datelabel'>" + label + "</div>\n";
               yyyymmdd = event.date;
            }

            html += "<div class='event-text'>" + event.html + "</div>\n";
                        eventcount++;
         }
         this.get('host').setContent(html + "<div id='events-footer'><a href='/calendar/'>all events</a></div>");


      } catch(ex) {
         console.log("Error", ex);
         this.get('host').setContent("Event list not available");
         return;
      }
   };


var insertEventList = function(yyyy, mm, dd) {

   var url = urlEvents;

   if (yyyy) {
      url += '&yyyy=' + yyyy;
   }
   if (mm) {
      url += '&mm=' + mm;
   }
   if (dd) {
      url += '&dd=' + dd;
   }

   Y.io(url, {on: {success: insertEvents}, context: this});

};

   /* EventList extends the base Plugin.Base class */
   Y.extend(EventList, Y.Plugin.Base, {
        render: function() {
        insertEventList.call(this);
    }

   });
   //console.log("assigning", EventList);
   Y.namespace("Plugin").EventList = EventList;

}, '1.0.0' ,{requires:['node', 'base', 'plugin', "json-parse", "datatype-date"]});

Here’s the excerpt from the code with the render bit:

Y.extend(EventList, Y.Plugin.Base, {
        render: function() {
        insertEventList.call(this);
    }

Admittedly, YUI3 confuses me, and I would prefer other libraries, but I don’t have a choice in this situation. There’s likely one thing that I’ve just completely looked over.

Thanks guys

Answer 1

I’ve used YUI3 plugins before and they are a bit difficult to grasp, but I’ll try to help if I can. Once you’ve created the plugin, which, from what I can tell, you’ve already done so successfully, you plug it into an object somewhere else in your code:

someObj.plug(Y.Plugin.EventList, cfg);

After that, you can access the plugin’s methods from within the object’s plugin namespace. In your case you’d do this like so:

someObj.EventList.render();

Hopefully I’m understanding your question correctly and I hope that helps clear some stuff up for you. Good luck! 🙂