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

Forums / General Discussions / Trouble including JQuery

Trouble including JQuery

64 posts, 0 answered
  1. Jae Hong
    Jae Hong avatar
    29 posts
    Registered:
    07 May 2012
    12 May 2012
    Link to this post
    I also tried with 'ResourceFile' tag but it didn't work with multiple jquery scripts.
    For CSS, I go to admin page -> Administration -> Settings -> Appearance (advanced) ->  Frontendthemes and then create one. Of cource I assume that all css files are located in ~/App_Data/Sitefinity/WebsiteTemplates/[Custom Template name]/App_Themes/[Custom Theme folder name]. I created this one using Thunder.
    then you don't need to worry about loading css.

    Here is the code that I successfully loaded multiple jQuery scripts in Master page:
    <%@ Register TagPrefix="sf" Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" %>
    <%@ Register TagPrefix="sf" Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.PublicControls" %>
     
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <sf:ResourceLinks ID="ResourceLinks1" runat="server"><sf:ResourceFile JavaScriptLibrary="JQuery" /></sf:ResourceLinks>
            <sf:JavaScriptEmbedControl ID="JSEmbedControl1" runat="server" ScriptEmbedPosition="BeforeBodyEndTag" Url="~/Scripts/jQuery/jquery.xxxxxxx.js"></sf:JavaScriptEmbedControl>
            <sf:JavaScriptEmbedControl ID="JSEmbedControl2" runat="server" ScriptEmbedPosition="BeforeBodyEndTag" Url="~/Scripts/jQuery/jquery.tttttttt.minified.js"></sf:JavaScriptEmbedControl>
            <sf:JavaScriptEmbedControl ID="JSEmbedControl3" runat="server" ScriptEmbedPosition="BeforeBodyEndTag" Url="~/Scripts/jQuery/jquery.aaaaaaa.min.js"></sf:JavaScriptEmbedControl>
            <sf:JavaScriptEmbedControl ID="JSEmbedControl4" runat="server" ScriptEmbedPosition="BeforeBodyEndTag" Url="~/Scripts/jQuery/jquery.wwwwww.js"></sf:JavaScriptEmbedControl>
            <sf:JavaScriptEmbedControl ID="JSEmbedControl5" runat="server" ScriptEmbedPosition="BeforeBodyEndTag" Url="~/Scripts/Global/searchbox.js"></sf:JavaScriptEmbedControl>
         
            <!-- jQuery Scripts Config -->
            <script type="text/javascript">
                $(document).ready(function ($) {
                    $('#example1').hMenu({
                        rowItems: '2',
                        speed: 'fast'
                    });
                });
     
                $(document).ready(function ($) {
                    $('#example2').vMenu({
                        eventType: 'click',
                        autoClose: true,
                        saveState: true,
                        disableLink: true,
                        .....so on
                    });
                });
            </script>
            <!-- jQuery Scripts Config  End-->

    Web.UI is for ResourceLink all jQuery scripts works fine...
  2. George
    George  avatar
    204 posts
    Registered:
    05 Sep 2006
    13 May 2012
    Link to this post
    I wrote an example on how to use jQuery with Sitefinity. You might wanna take a look at it.

     http://blog.falafel.com/Blogs/george-saadeh/2012/05/09/using-jquery-and-other-javascript-libraries-in-sitefinity

     G
  3. Mike
    Mike avatar
    4 posts
    Registered:
    23 Feb 2011
    19 Jun 2012
    Link to this post
    I have been working on a KendoUI enabled TabStrip widget for Sitefinity.  The problem that I had was I could get it to work 100% correctly on the front end by loading my jQuery & KendoUI scripts inside my widget.  The problem is on the backend and in design & edit mode.  If I load my scripts it would later be overwritten by Sitefinity when the backend or design and edit mode loads jQuery.

    The "solution" (at best another hack) that I came up with is to load my own jQuery & KendoUI files that I move to another variable (I called mine $kendo).  This way my JS code will not be overwritten at a later point by anything that Sitefinity is loading.  This is probably not the best way to handle this because that would mean that on the backend & in design and edit mode there are at least 3 copies of jQuery loaded.  Sitefinity loads one into jQuery ($), they load another into $telerik.$, and then the one that I load into $kendo.

    Do you think that Telerik would be able to always load jQuery & KendoUI on all pages so that us programmers do not have to worry about loading it or having it overwritten by something else down the road?

    I hope this can help someone out!

    Mike
  4. Mehdi Aliakbari
    Mehdi Aliakbari avatar
    7 posts
    Registered:
    25 May 2010
    10 Jul 2012
    Link to this post
    Hi There,

    For those who want to use ResourceLinks control like me to include embedded resources, here is the working solution at the end:

    <sf:ResourceLinks ID="ResourceLinks3" runat="server">
        <sf:ResourceFile AssemblyInfo="DGANovin.Web.Resources,DGANovin.Web" Name="DGANovin.Web.Resources.crockfordPattern.min.js" />
    </sf:ResourceLinks>

    Here is a little description:
    After decompiling ResourceLinks class, I've found out the reason of "Object not reference..." error; ResourceLinks tries to get assembly's Fullname from assembly info we provided with the following line of code:

    resourcesAssemblyInfo = Type.GetType(resource.AssemblyInfo);

    and later in the code, it wants to get the fullname by:
    resourcesAssemblyInfo.Assembly.FullName

    and it is obviously not work when you set the AssemblyInfo to something like "DGANovin.Web" that causes the resourcesAssemblyInfo be null.

    So we must provide the fully qualified name of an existing class within our assemby like this: "DGANovin.Web.Resources,DGANovin.Web". 

    Hope it helps.
    Regards,
    Mehdi
  5. Caleb
    Caleb avatar
    10 posts
    Registered:
    15 Oct 2012
    15 Oct 2012
    Link to this post
    I am currently using Sitefinity 5.0 and having pretty much the same issue with not being able to get jQuery functions to work.  I am trying to create a simple jQuery menu dock slider widget but when the page loads it doesn't apply the javascript.  I can get the css file to work through the ResourceFile link but I am not sure if the Javascript files are loading.  I do not get any errors on the page either. 

    Also tried using the javascript widgets to link the files and pasting in the entire script library - applying to the header section and just to the widget using the radio button selections. Also tried adding them through the Title and Properties section of the page. Besides all of this I've also tried using just plain old script tags to reference the files and still nothing.

    In my master page I've tried adding the jquery ReferenceLinks and also without and just putting them in the widget ascx file. 

    Here is the top part of my code:

    <%@ Control Language="C#" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf"  %>
    <%@ Register Assembly="SitefinityWebApp" Namespace="SitefinityWebApp.Custom.Wigets"TagPrefix="cc1" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" TagPrefix="sfFields"  %>

    <sf:ResourceLinks ID="resourcesLinks" runat="server">
        <sf:ResourceFile Name="~/App_Themes/LaunchIT/css/jDock.css" />
        <sf:ResourceFile JavaScriptLibrary="JQuery" />
        <sf:ResourceFile Name="~/App_Data/js/jquery.jqDock.min.js" />
    </sf:ResourceLinks>

    <script type="text/javascript" >
        jQuery(document).ready(function ($) {
            // Apply jqDock with no options...
            $('#menudock').jqDock();
        });
    </script> 

    At this point I've exhausted all of my ideas and I'm not sure what to do.  I was able to get it sort of working, if I pasted in the entire jqDock.min.js file, all 1500 lines of it on the entire page within script tags. What I mean by sort of working is that in the editing mode in Sitefinity it actually applied the dock and worked, but when you clicked on "Preview," then it didn't apply the dock.  

    Any help or suggestions would be appreciated.  I've searched and looked through most of the articles on this forum that have anything with jQuery or javascript referencing. 





  6. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    16 Oct 2012 in reply to Mike
    Link to this post
    5.3 is supposed to be nothing but PITS issues and bug fixes, so lets hope they address this somehow.

    There's a script loader control in the marketplace, but it's an external control, and doesn't really address the fundamental problems we're having.

    Steve
  7. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    16 Oct 2012 in reply to Mike
    Link to this post
    Here;s PITS #1:
    http://www.telerik.com/support/pits.aspx#/details/Issue=12113

    Here's PITS #2:
    http://www.telerik.com/support/pits.aspx#/details/Issue=6423

    I'll send another when I get it
  8. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    16 Oct 2012 in reply to Mike
    Link to this post
    Hey Caleb,

    Take a look at this Gist I created (https://gist.github.com/3899224).
    At the moment this is the fail-safe-all-browser-proof way of loading jQuery & Kendo conflict free.

    In the <header> section you can use JavaScriptEmbedControl to load any .JS functionality needed prior to jQuery (like Modernizr). Then use ResourceFile to reference jQuery and Kendo conflict free.

    At the bottom of the Masterpage you can then include 1,2 (or 10 if you like) scriptlinks. In my script.bottom.js I have included a snippet where I trigger the Kendo-fi of a #sitepanelnav.

    This approach works both Frontend, backend and preview mode without any conflict, according to Telerik support http://www.sitefinity.com/devnet/forums/general-discussions-/how-do-i-incorporate-jquery-into-a-master-page it currently also is the best approach...

    Jochem.
    )
  9. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    16 Oct 2012 in reply to Jochem Bökkers
    Link to this post
    @Jochem @Telerik
      Yeah here's the problem with that (not techinical)...SF doesnt include kendo web or dataviz seperate.  So Kendo All is about 200k larger than web, so if you never need graphs (and who does on every page), then it's very wasteful.

    Perhaps workaround is to just embed it (.web) and expose it yourself via the resourcelinks control (embedded, not relative)
  10. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    16 Oct 2012 in reply to Steve
    Link to this post
    @Steve,

    I know this will load 'all' Kendo, but as soon as you don't use the resourcelink you'll end up in backend conflict mode so at the moment we're stuck with this approach...

    Next version of Sitefinity will be fun with RadControls sporting jQuery 1.7.2 (released march 2012) and Kendo & Sitefinity still on 1.7.1 (released november 2011) and jQuery itself already being at 1.8.2 (september 2012)
  11. Basem
    Basem avatar
    131 posts
    Registered:
    22 Dec 2010
    07 Dec 2012
    Link to this post
    It looks like I ran into some new jQuery issues when upgrading from 5.2 to SP1. I was shocked to hear that SF modifies jQuery for the admin. Is this true??! This along with the load order and placement of the scripts makes this a pain. The most beautiful workaround is using Javascript AMD or script loader like RequireJS. This will make your scripts self-contained with no possibilities of conflicting with other loaded libraries outside of it: http://goo.gl/oz5pv
  12. Marko
    Marko avatar
    148 posts
    Registered:
    30 Jul 2008
    28 Feb 2013
    Link to this post

    So after reading all this, I'm still a bit confused about where things are at the moment.  SF 5.4 is out (although I'm still on 5.3).  Any improvements on this?  How is one supposed to reference JQuery in a custom widget?

     I tried this (in my custom widget):

    <sitefinity:ResourceLinks ID="resourceLinks1" runat="server" UseEmbeddedThemes="false">
        <sitefinity:ResourceFile JavaScriptLibrary="JQuery" />
        <sitefinity:ResourceFile Name="~/scripts/myScripts.js" Static="true" />
    </sitefinity:ResourceLinks>

    But I get "$ is not defined" javascript error.

    Is the problem with js loading order still present in 5.4?

  13. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    28 Feb 2013 in reply to Marko
    Link to this post

    Hey Marko,

    First regarding changes to v5.3/v5.4.
    Sitefinity clearly states that from now on you have to manage your jQuery dependency on your own. Where Telerik's RadControls are still on v1.7.2, Sitefinity moved forward and included v1.8.3

    So basically as of v5.4 we must provide it ourselves if we want to ensure it's loaded and addressable. 

    Secondly regarding your question of loading jQuery from a custom control.
    The code in itself is good, the problem is that we don't have control over the load order of ResourceLinks.

    If you check the attachment, you'll see a usercontrol on top, first referencing jQuery, then a .js file and then an inline script to show an alert box when jQuery's done.

    Beneath that source code, you'll see how the source gets rendered. The Kendo script is neatly transformed into a script tag on line 32 but our jQuery doesn't get referred to until line 34.

    In the firebug NET panel you see it as well, first kendo.min.js gets loaded and afterwards our jQuery library gets loaded.

    So unless you wrap your script inside something as a $document.ready function like the alert box, it'll try and execute before jQuery gets loaded and throw an undefined error...

    Jochem

  14. Marko
    Marko avatar
    148 posts
    Registered:
    30 Jul 2008
    28 Feb 2013
    Link to this post

    Hi Jochem.  Thanks for replying.

    So, what exactly is meant by us having to manage our own JQuery dependencies?  Does that mean we should not be using this any more:

    <sitefinity:ResourceFile JavaScriptLibrary="JQuery" />

     

    ...but instead something like this?

    <sitefinity:ResourceFile Name="~/scripts/jquery-1.4.4.min.js" />

     

    In other words, they're not recommending that we rely on "built-in" JQuery library and not try to reference it?

    And regarding the second part of your post.... Were you just explaining this "problematic" behavior, or were you recommending a specific way in which we have to write our jQuery-based scripts?

    Or is the answer to "how to properly reference jQuery in a user control?" that we should simply link to our own jQuery file, followed by our own scripts, therefore bypassing the loading order issue altogether?

    Sorry, just a little confused about this whole thing.  I'm relatively new to jQuery, as well as SF 5 (having just migrated from 3.7 recently).

    Thanks!

  15. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    01 Mar 2013 in reply to Marko
    Link to this post

    @Marko

    That info is misleading...so yes there still appears to be a lingering bug where embedded load AFTER relative urls.  HOWEVER you should **NOT** load jquery external like that.

    Reason being that there's till tons of control templates that reference jquery like this:
    <sitefinity:ResourceFile JavaScriptLibrary="JQuery" />

    So if you load your jquery like this:
    <sitefinity:ResourceFile Name="~/scripts/jquery-1.4.4.min.js" />

    ...sitefinity doesn't know they're the same thing so you'd get 2 jQuery instances loaded.

    So my controls for example reference the first "JavaScriptLibrary" syntax...this lets me always know that my controls will always just work because I'm telling sitefinity to load jquery when my controls are on the page.  The way to properly do it in a widget is to set your script\style to load as embedded then it will render after jquery...like this

    <sitefinity:ResourceLinks runat="server" UseEmbeddedThemes="true" Theme="Basic">
        <sitefinity:ResourceFile JavaScriptLibrary="JQuery"/>
        <sitefinity:ResourceFile Name="RandomSiteControls.TabStrip.Resources.TabStrip.min.css" AssemblyInfo="RandomSiteControls.TabStrip.TabStripLayout, RandomSiteControls" Static="True" />
        <sitefinity:ResourceFile Name="RandomSiteControls.TabStrip.Resources.TabStrip.min.js" AssemblyInfo="RandomSiteControls.TabStrip.TabStripLayout, RandomSiteControls" Static="True" />
    </sitefinity:ResourceLinks>

  16. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    01 Mar 2013 in reply to Steve
    Link to this post
    Hey Marko,

    Steve's right, you misunderstood me (or better said - I explained it wrong). The 5.4 has a breaking change announcement: 

    "JavaScript libraries (JQuery, JQuery Cookie, JQuery Validate and etc.) are not always loaded on front-end. So, if you explicitly use some of these libraries, you need to take care to add them on the page"

    It just means that because the Sitefinity team optmized and refactored alot in this release, they don't need to load jQuery everywhere and thus we're responsible ourselves for including it onto a page.

    ---
    While <sitefinity:ResourceFile JavaScriptLibrary="JQuery"/> do just as Steve said with regards from stopping the system from loading the same jQuery twice, it won't stop the system from loading the 1.8.3 version that's included by Sitefinity and on many occasions the 1.7.2 from the RadControls.


    Also from a performance standpoint, ResourceLinks should be used in moderation and not as a default method of loading scripts, after all they end up at the top of the rendered page and not at the bottom where scripts belong.

    Jochem

  17. Basem
    Basem avatar
    131 posts
    Registered:
    22 Dec 2010
    01 Mar 2013 in reply to Jochem Bökkers
    Link to this post

    There are a two ways to handle this dreaded problem: server-side or client-side.

    For server-side, use the PageManager.ConfigureScriptManager to load jQuery and to add your custom scripts. This will add it in the right order if you use this same PageManager object:

    PageManager.ConfigureScriptManager(this.Page, ScriptRef.JQuery);
      
    var scripts = PageManager.ConfigureScriptManager(this.Page, ScriptRef.Empty);
    scripts.Scripts.Add(new ScriptReference("~/Scripts/mypluginA.js"));
    scripts.Scripts.Add(new ScriptReference("~/Scripts/mypluginB.js"));

    With this code, it using the script manager Sitefinity uses and adds jQuery, then all the script references AFTER (as they apear in your code). The PageManager.ConfigureManager will not add jQuery again if it was already loaded.

    Second way is using RequireJS on the client-side. This will asynchronously load scripts on demand. You would configure RequireJS to reuse the existing jQuery object or load it's own:

    ;(function () {
      var paths = { ... };
          
        //HANDLE JQUERY IF LOADED ALREADY TO AVOID OVERWRITING EXISTING JQUERY PROPERTIES AND PLUGINS
        //CHECK FOR OLD VERSIONS OF JQUERY
        var oldjQuery = !!(window.jQuery && !!window.jQuery.fn.jquery.match(/^1\.[0-4]/));
       
        //LOAD JQUERY IF NOT AVAILABLE OR BELOW MIN
        if (!window.jQuery || oldjQuery) {
            paths.jquery = [
                '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min',
                //If the CDN location fails, load from this location
                'libs/jquery/jquery.min'
            ];
        } else {
            //REGISTER THE CURRENT JQUERY
            define('jquery', [], function () { return window.jQuery; });
        }
          
        //CONFIGURE REQUIRE JS
        require.config({
            ...
            paths: paths,
            ...
        });
       
        //START REQUIRE JS
        require([
            'jquery',
            'app'
        ], function ($, App) {
            //HANDLE MULTIPLE JQUERY VERSIONS IF NECESSARY
            if (oldjQuery) $.noConflict(true);
       
            //INITIALIZE APP
            App.init();
        });
    })();

    I wrote a blog about this for more details:
    http://blog.falafel.com/Blogs/basem-emara/2013/03/01/how-to-avoid-loading-jquery-twice-with-requirejs

  18. Marko
    Marko avatar
    148 posts
    Registered:
    30 Jul 2008
    01 Mar 2013
    Link to this post

    Thanks for clarifying, everybody!

    Ugh, why is this such a major pain?  :-(  The reason I wanted to use ResourceLinks was because I needed a simple way to connect custom JS scripts directly from the ASCX file, rather than having to code it in code-behind each time.  

    Seems to me that perhaps one way of achieving that is to create a simple UserControl solely for this purpose.  Basically, it'd be my own JS resource control, taking js file path as a property, and maybe maybe a boolean for EnsureJQuery, too... or something like that.

    <MyControls:IncludeJS FilePath="~/scripts/myfile.js" IsJquery="true" />

    ...and in code-behind then doing what Basem said:

    if (IsJquery)
       PageManager.ConfigureScriptManager(this.Page, ScriptRef.JQuery);
       
    var scripts = PageManager.ConfigureScriptManager(this.Page, ScriptRef.Empty);
    scripts.Scripts.Add(new ScriptReference(FilePath));

    <not tested yet...>

    I know this is very specialized for this purpose, and could be made a lot more general/flexible.  but I don't really want to write my own ResourceLinks control.  Just need something reusable for relatively simple JS stuff.

  19. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    01 Mar 2013 in reply to Marko
    Link to this post
    @Marko, it's not that complex, just click the .js, set the Build Action to "Embedded Resource" then define as I did above, will work fine :)
  20. Marko
    Marko avatar
    148 posts
    Registered:
    30 Jul 2008
    01 Mar 2013
    Link to this post
    True, but then I have to make sure to manage all the JS file entries in the AssemblyInfo.cs, right?
  21. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    01 Mar 2013 in reply to Marko
    Link to this post

    "Manage"? :)  Put them in there once yeah...

     If you're making widgets, embedded is just so much less painful...it'll always just work

  22. Marko
    Marko avatar
    148 posts
    Registered:
    30 Jul 2008
    01 Mar 2013
    Link to this post

    I hear ya...  Now that I have a few options (and I now know what NOT to do :-) ), I'll think about it some more and figure out what's most appropriate and when.

    On a related note... With these breaking changes in 5.4 (with jQuery not always being present in front-end), how would I use a jQuery script in the built-in Telerik widget "Javascript" when dropping it on a page?  For example, I have a couple of pages that have some GenericContent which is relying on jQuery UI "tabs".  So what I've done in the past was drop 2 JavaScript widgets on the page:  one to reference JQuery UI library in /scripts/jquery-ui-xxxx-min.js and one to initialize the "tabs" element.  Obviously, I was relying on jQuery being present (and this does work in 5.3).  But will it break in 5.4?

  23. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    01 Mar 2013 in reply to Marko
    Link to this post

    "With these breaking changes in 5.4 (with jQuery not always being present in front-end)". They didn't say "SCREW YOU DEVS, NO MORE jQUERY, DO IT YOURSELVES!" :)  ...they just removed all unnessesary scripts from the control templates that didn't need them. So jquery being there is dependant on the controls you have on your page...because some controls still reference the jQuery resourcelink (so it gets added)

    All you need to do is have the jQuery Resourcelink on your masterpage and there isn't an issue anywhere (I never encountered any problems on any upgrade relating to jquery)

    I use this on my master

    <sf:ResourceLinks ID="resourcesLinks" runat="server">
            <sf:ResourceFile JavaScriptLibrary="JQuery" />
            <sf:ResourceFile Name="SitefinityWebApp.scripts.kendoui.kendo.web.min.js" AssemblyInfo="SitefinityWebApp.Code.Util, SitefinityWebApp" />
        </sf:ResourceLinks>
    (I embed my own kendo web instance...don't have to anymore though I guess)

  24. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    01 Mar 2013 in reply to Steve
    Link to this post

    Marko,

    My advice, just take a dependency on jQuery, just like Microsoft does and simply ensure it gets loaded on a masterpage/template level.

    Whether you use George's code example, Steve's resourceLinks, or Basem's client-side approach they all work and all have their pros and cons. 

    These solutions will on occasion double load jQuery (when a RadControl references jQuery) but its a mere 100Kb trade off against alot of headaches in trying to do it properly. 

  25. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    01 Mar 2013 in reply to Jochem Bökkers
    Link to this post

    Just to add to Jochems post, to avoid potential confusion\worry...you will double load jquery when the radcontrols need them, however they won't conflict, so you'll just get that extra page size, no script errors.

     But you *could* opt to shutoff the radcontrols jquery as well in your web.config...I've done this on a couple sites with no negative side effects....but it's always safer on eh :)

    Steve

  26. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    01 Mar 2013 in reply to Steve
    Link to this post

    @Steve,

    Well it seems there's lots of confusion already :) Lets just end our debate and keep it simple:

    If you're not OCD about performance and mobile, use <sf:ResourceFile JavaScriptLibrary="JQuery" /> and ensure its loaded at earliest convenience, preferably at a template/master level.

    If number of requests, page speed and kb transferred is an issue, tweak the system.

    Jochem

  27. Marko
    Marko avatar
    148 posts
    Registered:
    30 Jul 2008
    01 Mar 2013
    Link to this post
    Thanks, Steve and Jochem!
  28. Marko
    Marko avatar
    148 posts
    Registered:
    30 Jul 2008
    11 Mar 2013
    Link to this post

    After upgrading from 5.3 to 5.4, and playing some more with jQuery inclusion/placement/etc. I came to realize (probably as others might have, already) that one nice solution (for at least a part of this issue) might be the following:

    In the existing widget Java Script Embed Control (found in page edit mode under widget toolbox as Scripts and Styles as Java Script widget), there could be an option to include jQuery, jQuery UI, etc.  These could be list of checkboxes underneath the radio buttons for "Where to include in HTML"  (head/wherDropped/beforeBodyEnd) section.  The new section could be called "Libraries to include" with a list of checkboxes for JQuery, JQueryUI, etc.

    The assumption being that, if you're linking to an external js file or embedding some js text right there in the widget, either of which rely on jQuery, for example, you'd have an option RIGHT THERE to tell the widget to also pull in the needed libraries. 

    Similarly, when using the widget in your own user controls, you could do something like this:

    <sf:JavaScriptEmbedControl runat="server" ScriptEmbedPosition="BeforeBodyEndTag" Url="~/MyScripts/script1.js" IncludeJQuery="true" IncludeJQueryUI="true" />

    IncludeJQuery and IncludeJQueryUI would be optional (they would default to false, unless specified otherwise).

    This way, you wouldn't have to include JQuery in master pages, and you'd have a way to ensure that it's pulled in alongside your jquery scripts ONLY where they are being needed.

    Anyways.. perhaps this has been discussed already... But it was a bit of an epiphany for me.  Unless I'm missing something...  :-)

  29. Aseem
    Aseem avatar
    2 posts
    Registered:
    14 Sep 2012
    20 Jul 2013
    Link to this post
    Hello,

    We are facing an issue with the below js:

    jquery-1.4.4.min.js If this js file is added on any page in the application, then we are not able to edit contents in the sitefinity admin panel. 
    If the file is removed, then we are able to edit the contents

    For say: we have added one given JavaScript on the master page to scrollbar but it is clashing and due to this reason it does not allow us to update content via Sitefinity admin panel.

    Can anyone help us out for this?


    Thanks
  30. Jen Peleva
    Jen Peleva avatar
    568 posts
    Registered:
    10 Nov 2016
    24 Jul 2013
    Link to this post
    Hi Aseem,

     The reason comes from the fact that in Sitefinity we're using a different version of jQuery. This is why we strongly recommend you to use and load on pages the same version. To do so you can use the resourceLinks control like this:

    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
    <sf:ResourceLinks ID="resourcesLinks" runat="server">
     <sf:ResourceFile JavaScriptLibrary="JQuery"/>
    </sf:ResourceLinks>

    Where the javascript library property accepts the following values:

    public enum JavaScriptLibrary
       {
           /// <summary>
           /// No library
           /// </summary>
           None,
           /// <summary>
           /// jQuery JavaScript library
           /// </summary>
           JQuery,
           /// <summary>
           /// Mootools JavaScript library
           /// </summary>
           Mootools,
           /// <summary>
           /// prototype JavaScript library
           /// </summary>
           Prototype,
           /// <summary>
           /// JQuery FancyBox
           /// </summary>
           JQueryFancyBox,
           /// <summary>
           /// Kendo.all scripts
           /// </summary>
           KendoAll,
           /// <summary>
           /// Kendo.web scripts. These scripts are included in Kendo.all.
           /// </summary>
           KendoWeb,
           /// <summary>
           /// jQuery Cookie library
           /// </summary>
           JQueryCookie,
           /// <summary>
           /// jQuery Validate library
           /// </summary>
           JQueryValidate,
           /// <summary>
           /// jQuery UI library
           /// </summary>
           JQueryUI
       }
    This way you can also load jQuery Ui from our dlls, as well as other plugins. 
    The important part is that this way you don't need to know the current jQuery (or other js libraries) versions in Sitefinity.

    Regards,
    Jen Peleva
    Telerik
    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
64 posts, 0 answered
1 2 3