jQuery Plugins and/or authoring custom jQuery functions not supported?
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);$('.myClass').customFunction();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);Thanks Eric -- This solved my issue perfectly (and saved me from losing my mind).
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();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" />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
Hey Georgi, could you point me to your solution, that link seems to be invalid now.
Thanks!
Joel
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:
<sitefinity:ResourceLinks ID="resourcesLinks" runat="server"> <sitefinity:ResourceFile JavaScriptLibrary="JQuery"></sitefinity:ResourceFile></sitefinity:ResourceLinks>..<script type="text/javascript"> $("body").addClass("sfNoSidebar"); $("p > ul").addClass("red");</script>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>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