6 Replies Latest reply on Jun 9, 2016 12:29 AM by mattdickens

    JQuery functions are not working properly in HTML Tile

    sumeet812gupta

      Hi All,

       

      In the recent 2016.1 release, Jive has enabled support for external.js files in HTML Tile ( HTML Tile changes in 2016.1 )

      However when we are using JQuery for one of our HTML Tile, it fails to load the javascript component that calls jQuery.

      Most of the time the result is not getting displayed however, it works sometimes after many page refresh.

      please let me know if you have any solution for this issue.

       

      Thanks,

      Sumeet

        • Re: JQuery functions are not working properly in HTML Tile

          Hey Sumeet, sorry to hear about that.

          Can you give code example that fails?

          Could it be some racing condition that originates from your code?

           

          Have you opened a support case?

          Would love to help, but will need more information to be able to assist here,

            • Re: JQuery functions are not working properly in HTML Tile
              sumeet812gupta

              Hi Yuval Twig ,

               

              Thanks for the response. Here is the code which I am trying to use in HTML Tile.

              I am constantly getting "jQuery is not defined" error in my browser console, it seems JQuery library is not getting loaded at runtime.

              I have not opened any support case as of now but If required, I can create it.

              Please let me know if you need any other details.

               

               

               

              <html>

              <head>

              <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

              <script type="text/javascript">

                var defaultTab = "";

                var priorityCode = "000681180";

                var defaultKeycode = priorityCode;

                var showRegistration = 0;

                var forceFormView = 0; // true will show the iframe open, showing the form. // false hide the iframe

                var defaultTab = 'home'; // this will be the active tab on open page

                var regCodePrefix = "https://tools.cisco.com/gems/cust/customerQA.do?METHOD=W&LANGUAGE_ID=E&SEMINAR_CODE=S22295&PRIORITY_CODE=";

               

               

              </script>

                <style>

                body {

                color: #5e5e5e;

                font: 13px "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

                }

                </style>

               

               

                <link rel="stylesheet" href="/resources/statics/3931/newsEvents.css?a=1458850791387" type="text/css" media="all"></link>

                <link rel="stylesheet" type="text/css" href="/resources/statics/3931/dynoBanner.css?a=1458850480416"></link>

               

               

               

              </head>

               

               

              <body>

               

               

              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>

               

               

              <div id="banner_wrapper" class="group">

                <div id="banner_list" class="group">

                <!--items-->

                </div>

                <div id="banner_group">

                <div class="banner_content group">

                <div class="banner_title">

                <!--TITLE-->

                </div>

                <div class="banner_image">

                <!--IMAGE-->

                </div>

                <div class="banner_text">

                <!--CONTENT-->

                </div>

                </div>

                </div>

              </div>

               

               

              <div class="dyno_BannerContent" style="display:none">

                <table border="1">

                <thead>

                <tr><th colspan="3" style="text-align: center; background-color: #6690bc; color: #ffffff; padding: 2px;" valign="middle"><strong>Color Code</strong> (see the color palette below)</th><th colspan="3" style="text-align: center; background-color: #ffffff; color: #000000; padding: 2px;" valign="middle"><span style="color: #ffffff; font-size: 13.3333px; text-align: center; background-color: #005c21;">W12</span></th></tr>

                <tr><th style="text-align: center; background-color: #6690bc; color: #ffffff; padding: 2px;" valign="middle"><strong>Index title</strong><br />(the list on the right)</th><th style="text-align: center; background-color: #6690bc; color: #ffffff; padding: 2px;" valign="middle"><strong>Header Title</strong><br />(the title over the image and text)</th><th style="text-align: center; background-color: #6690bc; color: #ffffff; padding: 2px;" valign="middle"><strong>Text</strong><br />(text next to the image)</th><th style="text-align: center; background-color: #6690bc; color: #ffffff; padding: 2px;" valign="middle"><strong>Image</strong><br />(size to 160px wide by 130px tall</th><th style="text-align: center; background-color: #6690bc; color: #ffffff; padding: 2px;" valign="middle"><strong>Linked Text</strong><br />(EX: Learn Move)</th><th style="text-align: center; background-color: #6690bc; color: #ffffff; padding: 2px;" valign="middle">URL<br />(enter as plain text)</th></tr>

                </thead>

                <tbody>

                <tr>

                <td>Blog: CMX 10 Delivers Superior Performance</td>

                <td>Cisco Connect Mobile Experiences (CMX) 10 Delivers Superior Performance</td>

                <td>Nihar Desai, Software Technical Leader at Cisco, explains how CMX 10 performance improvements enable you to uncover data and customer insights to improve and optimize each customer&rsquo;s experience.</td>

                <td><img alt="Scaling Improvements thumbnail full 2.png" class="jive-image image-3" src="https://cisco-ecommunities.jiveon.com/resources/statics/3931/IMG_0002.jpg?a=1458871173517" style="height: auto;" __jive_id="92416" /></td>

                <td>Read the blog</td>

                <td>/community/technology/enterprise_networks/enterprise_mobility/blog/2016/01/15/superior-cmx-10-performance</td>

                </tr>

                <tr>

                <td>Blog: Cisco WAAS Outperforms the Competition</td>

                <td>Cisco WAAS Outperforms the Competition ... Again</td>

                <td>The results are in! Key findings from the Miercom report showcase the superior acceleration capabilities of Cisco WAAS with Akamai Connect.</td>

                <td><img alt="miercom_logo.jpg" class="jive-image image-6" src="/resources/statics/3931/IMG_0002.jpg?a=1458871173517" style="height: auto;" __jive_id="92457" /></td>

                <td>Read the blog</td>

                <td>/community/technology/enterprise_networks/enterprise_mobility/blog/2016/01/15/superior-cmx-10-performance</td>

                </tr>

                <tr>

                <td>Catalyst 3850 Multigigabit and 10G Aggregation Switches</td>

                <td>Cisco Catalyst 3850 Multigigabit and 10G Aggregation Switches</td>

                <td>Get converged wired and wireless access with the Cisco Catalyst 3850 switches.</td>

                <td><img alt="KQ19028.jpg" class="jive-image image-5" src="/resources/statics/3931/IMG_0002.jpg?a=1458871173517" style="height: auto;" __jive_id="92456" /></td>

                <td>Watch the video</td>

                <td>/videos/13786</td>

                </tr>

                </tbody>

                </table>

                <p>White text over color</p>

                <div style="display: flex;">

                <div style="background-color: #f3f6f9; color: #fff; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">W01</div>

                <div style="background-color: #f3f6f9; color: #fff; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">W01</div>

                <div style="background-color: #e8ebf1; color: #fff; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">W02</div>

                <div style="background-color: #ffffff; color: #fff; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">W03</div>

                <div style="background-color: #dfdfdf; color: #fff; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">W04</div>

                <div style="background-color: #abc233; color: #fff; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">W05</div>

                <div style="background-color: #6cc04a; color: #fff; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">W06</div>

                <div style="background-color: #005c21; color: #fff; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">W07</div>

                <div style="background-color: #ffa000; color: #fff; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">W08</div>

                <div style="background-color: #ff7300; color: #fff; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">W09</div>

                <div style="background-color: #8b1001; color: #fff; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">W10</div>

                <div style="background-color: #64bbe3; color: #fff; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">W11</div>

                <div style="background-color: #2b5592; color: #fff; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">W12</div>

                <div style="background-color: #c4d6ed; color: #fff; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">W13</div>

                <div style="background-color: #004baf; color: #fff; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">W14</div>

                <div style="background-color: #58585b; color: #fff; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">W15</div>

                <div style="background-color: #39393b; color: #fff; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">W16</div>

                <div style="background-color: #a7a9ab; color: #fff; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">W17</div>

                <div style="background-color: #000000; color: #fff; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">W18</div>

                </div>

                <p></p>

                <p>Black text over color</p>

                <div style="display: flex;">

                <div style="background-color: #f3f6f9; color: #000; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">B01</div>

                <div style="background-color: #e8ebf1; color: #000; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">B02</div>

                <div style="background-color: #ffffff; color: #000; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">B03</div>

                <div style="background-color: #dfdfdf; color: #000; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">B04</div>

                <div style="background-color: #abc233; color: #000; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">B05</div>

                <div style="background-color: #6cc04a; color: #000; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">B06</div>

                <div style="background-color: #005c21; color: #000; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">B07</div>

                <div style="background-color: #ffa000; color: #000; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">B08</div>

                <div style="background-color: #ff7300; color: #000; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">B09</div>

                <div style="background-color: #8b1001; color: #000; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">B10</div>

                <div style="background-color: #64bbe3; color: #000; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">B11</div>

                <div style="background-color: #2b5592; color: #000; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">B12</div>

                <div style="background-color: #c4d6ed; color: #000; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">B13</div>

                <div style="background-color: #004baf; color: #000; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">B14</div>

                <div style="background-color: #58585b; color: #000; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">B15</div>

                <div style="background-color: #39393b; color: #000; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">B16</div>

                <div style="background-color: #a7a9ab; color: #000; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">B17</div>

                <div style="background-color: #000000; color: #000; width: 20px; height: 30px; display: inline; flex-grow: 1; text-align: center; line-height: 30px;">B18</div>

                </div>

              </div>

               

               

               

               

              <script src="/resources/statics/3931/dynoBanner.js?a=1458850488911"></script>

               

               

              </body>

               

               

              </html>