1 Reply Latest reply: Jul 9, 2012 6:27 AM by Miles Clement RSS

    Using Jquery and Javascript in an HTML widget

    Miles Clement

      I want to use Jquery and Javascript in an HTML widget

       

      I understand that to be able to put these into a widget you have to be an administrator - I am an administrator

       

      I am finding that only some script commands work

       

      1. Are there restrictions on the javascipt commands that can be used?

       

      2. Are there restrictions on using jquery?

       

      3. Does the java code have to be in a separate file?

       

      4. From other posts I understand that to use Jquery in Jive I have to use $j instead of $ when referencing a jquery command (eg $j("URL").replaceWith(MyUrl) in place of $j("URL").replaceWith(MyUrl)) is this true?

       

      5. Does this mean that i don't need to put in a link to the core jquery functions (eg <script src="http://code.jquery.com/jquery-latest.js"></script>)

       

      I have a pressing business need that requires me to do this so a quick response would be good

       

      In addition there do not appear to be any clear guidelines on how to do this on any of the forums if there are please can you link them to this thread

        • Re: Using Jquery and Javascript in an HTML widget
          Miles Clement

          The following answwered my problem. The use of scipt in an HTML widget is a bit flakey. If it is not perfect it does not work few error messages

           

          The following code shows how to create a personalized link that contains the jive user id and the jive username

          This can be used in a url to a survey gizmo survey to pass information about the user and link the survey to the current jive user

          It uses jQuery to query data on the current page.

          To access jquery you normally use $ at the start of a query line in jive you have to use $j

          You have to be an administrator to paste script into an html widget

           

          Script works as follows

           

          1. Create some place holders in the page where we will put data using jquery

           

          <p>The user's username: <span id='fred1'></span></p>

          <p>The user's jive id: <span id='fred2'></span></p>

          <p>A link containing user parameters: <span id='fred3'></span></p>

           

          The jquery will replace the <span> part. We give each span an id so that we can chose which one to put data into  (eg id='fred1')

           

          2. declare some variables:

           

          var Un = $j("img").attr("data-username");

          var UnID = _jive_effective_user_id;

          var MyUrl = "<a href='http://www.mysurvey.com/?userid=" + _jive_effective_user_id + "&username=" + Un + "'>Take the survey</a>";

           

          3. Use jquery to append text in place of the approriate span id

           

          $j("#fred1").append(Un);

          $j("#fred2").append(UnID);

          $j("#fred3").append(MyUrl);

           

          For example the line:  $j("#fred1").append(Un);  replaces <span id='fred1'></span> with the data stored in variable Un

           

          The full code to use is:

           

          <p>The user's username: <span id='fred1'></span></p>

          <p>The user's jive id: <span id='fred2'></span></p>

          <p>A link containing user parameters: <span id='fred3'></span></p>

          <script>

          var Un = $j("img").attr("data-username");

          var UnID = _jive_effective_user_id;

          var MyUrl = "<a href='http://www.mysurvey.com/?userid=" + _jive_effective_user_id + "&username=" + Un + "'>Take the survey</a>";

          $j("#fred1").append(Un);

          $j("#fred2").append(UnID);

          $j("#fred3").append(MyUrl);