1-888-365-2779
+1-888-365-2779
Try Now
More in this section

Forums / General Discussions / jQuery Plugins and/or authoring custom jQuery functions not supported?

jQuery Plugins and/or authoring custom jQuery functions not supported?

10 posts, 1 answered
  1. Bob Evans
    Bob Evans avatar
    19 posts
    Registered:
    22 Jun 2012
    07 Jan 2011
    Link to this post
    I can't get any jQuery plugins or custom authored functions to run within my Sitefinity 4 RC2 (4.0.1030.0) site.  I even went the most-basic route of creating the following extension method:

    (function ($) {
        // to equalize the heights of a set of panels
        $.fn.customFunction = function () {
            alert('Hello world!')
        }
    })(jQuery);

    Then attempting to call this function:

    $('.myClass').customFunction();

    I receive an error stating "Error: $(".myClass").customFunction is not a function".  Anyone have an idea what's going on here?
  2. Eric
    Eric avatar
    147 posts
    Registered:
    12 Nov 2007
    07 Jan 2011
    Link to this post
    I ran into this yesterday. For me, it was happening when I was editing a page. What was happening was my MasterPage would include the jQuery source file via the ScriptManager, then I would extend jQuery with custom functions. But then SF would add its own jQuery source file later on, which reset jQuery to its initial state (bye-bye custom functions).

    I got around this by moving my JavaScript source files outside the ScriptManager, inside the body of the page (after when SF includes its JavaScript). I then modified my jQuery source file to check if jQuery was already defined (see below) and if so, not to redefine it (so I don't overwrite SF's custom jQuery functions).

    I don't like my solution, because now I can't combine my JavaScript files into a single request (and it's hacky). Hopefully Telerik will come up with a better solution. I'd take either them including their JavaScript files before mine or them checking if jQuery was already defined before redefining it.

    Not sure if it's perfect, but it seems to work. The code I used was...
    if (typeof jQuery === "undefined") {
       (function(A,w){function ma ... ;A.jQuery=A.$=c})(window);
    }
    Answered
  3. Bob Evans
    Bob Evans avatar
    19 posts
    Registered:
    22 Jun 2012
    07 Jan 2011
    Link to this post
    Thanks Eric -- This solved my issue perfectly (and saved me from losing my mind).
  4. Phil
    Phil avatar
    89 posts
    Registered:
    19 Oct 2010
    08 Jan 2011
    Link to this post
    I believe that I am having the same problem: jQuery files loading and wiping out previous objects.  I want to apply Eric's solution but I dont see how.

    I am using an edited js file that I got from a SF tutorial (see box).  Where would I put the jQuery === undefined test, without breaking the functionality of the code?  Thanks.

    Here is the js file that I am using
    Type.registerNamespace("LessonBuilder.Widgets");
     
    LessonBuilder.Widgets.VennDiagramDesigner = function (element) 
        {
            LessonBuilder.Widgets.VennDiagramDesigner.initializeBase(this, [element]);
        }
    // This has 4 functions in it, separated by commas =============================================
    LessonBuilder.Widgets.VennDiagramDesigner.prototype =
    {
             
            initialize: function () {
                LessonBuilder.Widgets.VennDiagramDesigner.callBaseMethod(this, 'initialize');
                 
                this._toogleGroupSettingsDelegate = Function.createDelegate(this, function () {
                    dialogBase.resizeToContent();
                });
     
                
                jQuery(".sfExpandableSection a").click(this._toogleGroupSettingsDelegate).click(function(){
                $(this).parents(".sfExpandableSection:first").toggleClass("sfExpandedSection");
                });
            },
     
            dispose: function () {
                LessonBuilder.Widgets.VennDiagramDesigner.callBaseMethod(this, 'dispose');
                // NewsRotator.RotatorDesigner.callBaseMethod(this, 'dispose');
            },
     
            /* --------------------------------- public methods --------------------------------- */
            // implementation of IControlDesigner: Forces the control to refersh from the control Data
            // populate the Designer from Edit-A-Page ==================================================
            // refreshUI: function () {
            // updateUI: function () {
            refreshUI: function () {
                // this._refreshMode = true;
                var data = this.get_controlData();
                // the Designer         the Edit-A-Page screen  PUBLIC PROPERTY NAMES
                jQuery("#lblHeader").val(data.HeadingText);  
                jQuery("#lblSetOne").val(data.LabelOne);  
                jQuery("#lblSetTwo").val(data.LabelTwo);    
                jQuery("#lblSetThree").val(data.LabelThree);  
            },
     
            // implementation of IControlDesigner:
            // forces the designer view to apply the changes on UI to the control Data
            // from the Designer >>> Edit-A-Page =======================================================
            applyChanges: function () {
                var controlData = this.get_controlData();
                  controlData.HeadingText = jQuery("#lblHeader").val();
                  controlData.LabelOne = jQuery("#lblSetOne").val();
                  controlData.LabelTwo = jQuery("#lblSetTwo").val();
                  controlData.LabelThree = jQuery("#lblSetThree").val();
                  // jQuery("#lblSetThree").val().length = 8 for Animaltz
                  var isTwoSets = true;
                    if (jQuery("#lblSetThree").val().length > 0) isTwoSets = false; 
                  controlData.IsTwoSets = isTwoSets;
            },
        get_controlData: function () {
            return this.get_propertyEditor().get_control();
        },
        _getSelectedChoice: function (groupName) {
            return jQuery(this.get_element()).find("input[name='" + groupName + "']:checked").val();
        },
        _clickRadioChoice: function (groupName, value) {
            return jQuery(this.get_element()).find("input[name='" + groupName + "'][value='" + value + "']").click();
        },
        /* --------------------------------- event handlers --------------------------------- */
     
        /* --------------------------------- private methods --------------------------------- */
     
        /* --------------------------------- properties --------------------------------- */
     
        // gets the reference to the propertyEditor control
        get_propertyEditor: function () {
            return this._propertyEditor;
        },
        // sets the reference fo the propertyEditor control
        set_propertyEditor: function (value) {
            this._propertyEditor = value;
        }
     
     
    }  // end of prototype ===============================================================================
     
    LessonBuilder.Widgets.VennDiagramDesigner.registerClass('LessonBuilder.Widgets.VennDiagramDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);
     
    if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
  5. Eric
    Eric avatar
    147 posts
    Registered:
    12 Nov 2007
    10 Jan 2011
    Link to this post
    Sorry, no clue. I don't see in your code where you include jQuery itself. That's what I changed. I surrounded the initial declaration of jQuery (my inclusion of it) with the undefined check. Then I moved my script tags inside the body so that my inclusion would come after SF's.

    <script type="text/javascript" src="/scripts/jquery.js" />

    I don't like this because I lose script combining by the ScriptManager and I'm including the scripts in the body tag, not the head. Also, it seems fragile to me in that I'm relying on my script loading after SF's, but I'm not too worried about that not working.

    It'd be nice if SF prefaced all its JavaScript and CSS with sf_ (or something similar). Some of the CSS classes do this, but some (e.g. header, footer) are generic and conflict. If instead of jQuery they used sf_jQuery or $telerik, then that'd avoid the issue.

    Eric
  6. Georgi
    Georgi avatar
    3583 posts
    Registered:
    28 Oct 2016
    13 Jan 2011
    Link to this post
    Hi Eric,

    We too want to follow similar procedure. For most of the CSS we actually achieved this. With the time, we will try to unify the javascripts and css just like you proposed.
    Philip, not sure what you can do now, but, do you include the jQuery like it's shown here ?
    http://www.sitefinity.com/40/help/developer-manual/controls-utility-controls-resourcelinks-control.html

    Regards,
    Georgi
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. Joel
    Joel avatar
    40 posts
    Registered:
    30 Nov 2010
    18 Jun 2011
    Link to this post
    Hey Georgi, could you point me to your solution, that link seems to be invalid now.

    Thanks!
    Joel
  8. Georgi
    Georgi avatar
    3583 posts
    Registered:
    28 Oct 2016
    21 Jun 2011
    Link to this post
    Hello Joel,

    The topic was removed temporary, we are going to add it back by tomorrow. 
    Here's how you can use the control:

    The ResourceLinks control is of type Telerik.Sitefinity.Web.UI.ResourceLinks
    Here is an example on how it could be defined in a template:

    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sitefinity" %>
     
    <sf:ResourceLinks id="resourceLinks" runat="server">
     <sf:Resource Name="CSS/Layout.css" />
    </sf:ResourceLinks>

    You can insert the following JavaScript Libraries:

    • jQuery
    • MooTools
    • Prototype
    Here is an example with jQuery:
    <sitefinity:ResourceLinks ID="resourcesLinks" runat="server">
        <sitefinity:ResourceFile JavaScriptLibrary="JQuery"></sitefinity:ResourceFile>
    </sitefinity:ResourceLinks>
    Since this example is adding jQuery reference to the current page/template, jQuery can be used in the following way afterwards:
    ..
    <script type="text/javascript">
        $("body").addClass("sfNoSidebar");
        $("p > ul").addClass("red");
    </script>

    I hope this helps.

    All the best,
    Georgi
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  9. Joel
    Joel avatar
    40 posts
    Registered:
    30 Nov 2010
    21 Jun 2011
    Link to this post
    That does help me, thank you!

    Just one more piece to this: I'm using JQueryUI in our site as well. Is there a way for me to nest our custom jquery style sheets into /app-data/Sitefinity/WebSiteTemplates/... ?? Or how would you recommend keeping styles together with themes?

    When I put the JQuery UI style sheets into my themes, my Images seem to loose their pathing- unless I'm just doing it wrong.

    My solution was to go outside of /App_Data/:
    <sf:ResourceLinks id="resourcesLinks" runat="server">
         <sf:ResourceFile name="Telerik.Sitefinity.Resources.Scripts.jquery-1.5.2.min.js" JavaScriptLibrary="JQuery" />
          <sf:ResourceFile name="Telerik.Sitefinity.Resources.Scripts.jquery-ui-1.8.8.custom.min.js"  />
          <sf:ResourceFile Name="~/CSS/jquery-ui-1.8.13.custom.css" />
      </sf:ResourceLinks>

    but I'd like to try to make it easy for our infrastructure folks to move around between environments.

    Thanks!
    Joel
  10. Jordan
    Jordan avatar
    172 posts
    Registered:
    20 Oct 2015
    22 Jun 2011
    Link to this post
    Hi Joel,


    If you are loading the styles of jQueryUI on all pages you can just simply put them in the "Global" folder-
    ~/App_Data/Sitefinity/WebsiteTemplates/YourTemplate/App_Themes/YourTheme/Global

    and they will be loaded automatically.

    Greetings,
    Jordan
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
10 posts, 1 answered