Forum Discussion

DylanCross's avatar
10 years ago

jQueryUI question

I can see in the LITHIUM.ReferencedScripts object there is: jquery.ui.widget.js

 

I can't find how to create jQueryUI widgets anywhere. Is it possible to create widgets without having to include my jqueryUI file?

4 Replies

  • DougS's avatar
    DougS
    Khoros Oracle
    10 years ago

    Hi Dylan,

     

    The javascript your Lithium Community adds gets added near the bottom of the page so you need to make sure that your javascript runs below it if you'd like to use the jQuery libraries we add (so you don't have to add it again which will increase the loading time of the page).  We have a special directive you can use in any component called <@liaAddScript> that allows you to add javascript that will be placed just below the javascript added by the Lithium community core app.  This page has a good example of using the <@liaAddScript> directive:

     

    http://community.lithium.com/t5/Developers-Discussion/Call-Endpoint-from-Custom-Component/m-p/159554#M6337

     

    -Doug

  • DylanCross's avatar
    DylanCross
    Helper
    10 years ago

    Hi Doug,

     

    Thanks for your response. 

     

    I have created a few custom components that make use of <@liaAddScript> and they all work fine. I have done the same in this instance but the problem I am having is trying to get the jQueryUI library to make use of the jQuery library that Lithium add.

     

    I have tried using jQuery's $.getScript function to import the jQueryUI library and I couldn't get that to work either.

     

    Cheers,

    Dylan

  • DougS's avatar
    DougS
    Khoros Oracle
    10 years ago

    Since the <@liaAddScript> directive places your script below the scripts that have already been loaded by the Lithium core app, you should be able to use any of the jQuery UI functionality that has already been loaded.  For example, try this and see what gets logged:

     

    <@liaAddScript>
      ;(function($) {
        console.log($.widget);
      })(LITHIUM.jQuery);
    </@liaAddScript>

    -Doug

  • DylanCross's avatar
    DylanCross
    Helper
    10 years ago

    Here is the snippet of code that I used to try to achieve what I was trying to achieve.

     

     

    <@liaAddScript>
    ;(function($) {
      $.getScript("${asset.get("/html/assets/jquery-ui-tabs.min.js")}")
        .done(function(){
          $("#id-of-tab-widget").tabs();
        })
        .fail(function(){
          console.log("library loading failed");
        });
      });
    })(LITHIUM.jQuery);
    </@liaAddScript>

     

    When I looked in the console in chrome, all I get is: undefined

     

    When I expand the console error, It points to the line:  

    $("#id-of-tab-widget").tabs();

     

     

    Cheers Again,

    Dylan