3 Replies Latest reply on Dec 14, 2015 1:42 AM by mcollinge

    JSZip and jive themes

    mbrybag

      Hello community!

       

      Has anyone had any success in implementing JSZip within their Jive theme? I am having trouble instantiating the JSZip object. Here is the setup:

      I have a Jive theme that has some custom JS files within a script folder. The JS files are included via script tags in the javascript.soy template like this:

       

         /*javascript.soy*/

        <script src="{themeUrl('/scripts/carousel.js')}"></script>

        <script src="{themeUrl('/scripts/jszip.min.js')}"></script>

        <script src="{themeUrl('/scripts/our-theme.js')}"></script>

       

      our-theme.js attempts to instantiate a new isntance of JSZip like this:

      var zip = new JSZip();

       

      The browser throws an error (visible in firebug or Chrome Developer Console) of "ReferenceError: JSZip is not defined". This is strange because I can view the script file via Firebug or by clicking "View Page Source" I can verify that the proper script tag for jszip.min.js which has the JSZip definition, has been generated and is accessible.

       

      I am able to call functions in other external JS files so the only thing I can think of is that I am instantiating this object incorrectly. Per the JSZip documentation:

       

      For a browser, there are two interesting files : dist/jszip.js and dist/jszip.min.js (include just one).

      If you use an AMD loader (RequireJS for example) JSZip will register itself : you just have to put the js file at the right place, or configure the loader (see here for RequireJS).

      Without any loader, JSZip will declare in the global scope a variable named JSZip.

       

      I am not using RequireJS. So JSZip should be registered as a glabal variable but I cant access it and down see it in the window collection.

       

      I looked through the community but couldnt see anyone else that used JSZip with Jive but I figure it doesn't hurt to try:)

        • Re: JSZip and jive themes
          mcollinge

          If you use something like Chrome dev tools, maybe check that the jszip.min is being loaded at all. Are each of the JS files being loaded separately (you'll see them as individual calls in the Network tab), or are they getting rolled into a bundle (you can search All Files to see if JSZIP exists somewhere).

            • Re: JSZip and jive themes
              mbrybag

              Hi Matt,

               

              Yes the jszip.min.jis file is being loaded. All the js files are loaded in separate calls. I can see them in Chrome dev tools. I can call js functions in other files but for some reason cant with this file. I even tried the JSZIP cdn and that also loads succesfully but still cant access JSZip. I wonder if its a scoping problem. All my code in the theme.js file is enclosed to allow for jquery to be referenced with '$'

              $j(function($){ ... });

                • Re: JSZip and jive themes
                  mcollinge

                  Yeah, it's either scoping, or maybe jszip is loading, but hasn't loaded by the time it hits the code in theme.js.

                   

                  You could try removing the <script src="{themeUrl('/scripts/jszip.min.js')}"></script> from your code, and in theme.js try this to dynamically load the script & execute code only when the file is fully loaded;

                   

                  $j.getScript( "pathto/jszip.min.js", function( data, textStatus, jqxhr ) {
                    console.log( data ); // Data returned
                    console.log( textStatus ); // Success
                    console.log( jqxhr.status ); // 200
                    console.log( "Load was performed." );
                  });
                  

                   

                  We do this on a bunch of our JS code so that it's loaded on demand, rather than loaded regardless of whether a page uses the feature or not.