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

Forums / Developing with Sitefinity / Disabling jQuery on page edit

Disabling jQuery on page edit

21 posts, 0 answered
  1. Patrick Shannon
    Patrick Shannon avatar
    4 posts
    Registered:
    08 Jul 2009
    15 Oct 2009
    Link to this post
    Hello,

    I'm a little bit slow with ASP.NET programming stuff (much more experienced with PHP/PHP-based CMS's), so bear with me.

    A client is having their static website set up in Sitefinity which utilizes a lot of jQuery hover-over stuff. Namely changing divs whenever you hover over something, this is a perfect example of what I'm trying to port over: http://avala.patrickshannon.com/capabilities/index.html

    Of course the client wants the ability to edit the different boxes, so in porting over the code into the Sitefinity template/Master pages I placed a placeholder into each box for them to drag generic content controls into.

    Now here's the flaw: because jQuery is hiding the divs, it also hides each of those divs on the editing page when logged into the backend. What I need is some way to tell the page to disable/not load the jQuery when editing the page, therefor showing all three boxes. Is there an easy way to do this?
  2. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    16 Oct 2009
    Link to this post
    Hello Patrick Shannon,

    Thank you for using our services.

    Here is what I have done to disable the jQuery scripts when a page is in edit mode. I have added the script using a <telerik:JsFileLink> control like this:
    <telerik:JsFileLink ID="jQuery" runat="server" ScriptType="jQuery" />

    Then I can disable the server control with ID="jQuery" with a C# server script, like this:
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
                Telerik.Cms.Web.CmsPageBase cmsPage = this.Page as Telerik.Cms.Web.CmsPageBase;
                if (cmsPage.PageMode == Telerik.Cms.Web.CmsPageMode.Edit)
                {
                    this.jQuery.Enabled = false;
                }
        }
    </script>


    Can you give this a try and see how it goes. Looking forward for your response.

    Regards,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. Patrick Shannon
    Patrick Shannon avatar
    4 posts
    Registered:
    08 Jul 2009
    16 Oct 2009
    Link to this post
    Thanks for your help,

    I'm afraid it doesn't work for me...but maybe I'm not placing that code in the right spots. Here is what I have in my master page...

    <%@ Master Language="C#" %> 
    <telerik:JsFileLink ID="jQuery" runat="server" ScriptType="jQuery" /> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <script runat="server"
        protected void Page_Load(object sender, EventArgs e) 
        { 
                Telerik.Cms.Web.CmsPageBase cmsPage = this.Page as Telerik.Cms.Web.CmsPageBase; 
                if (cmsPage.PageMode == Telerik.Cms.Web.CmsPageMode.Edit) 
                { 
                    this.jQuery.Enabled = false
                } 
        } 
    </script> 
     
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server"
        <title></title
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
         
        <script type="text/javascript" src="/Javascript/jquery-1.3.2.min.js"></script> 
        <script type="text/javascript"
         
            $(document).ready(function(){ 
             
                /* JQuery code stuff here */ 
                             
            }); 
             
        </script> 
     
    </head> 
    <body> 
        <form id="form1" runat="server"
            <asp:ScriptManager ID="ScriptManager1" runat="server"
            </asp:ScriptManager> 
             
         <div id="container"
            <!-- Rest of site HTML code here --> 
                 
            </div> 
     
       </form> 
    </body> 
    </html> 
     

    I thought that perhaps that "telerik:JsFileLink ID="jQuery" tag would enable jQuery in Sitefinity without me having that external js file referenced in the <head>, but when I took the jquery-1.3.2.min.js away, the jQuery no longer worked on the main page.

    It's worth noting I'm using Community Edition; is that jQuery control a part of the Community Edition? I'm currently having to develop on the Community Edition while the client drags their butt on purchasing the full thing.

  4. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    16 Oct 2009
    Link to this post
    Hi Patrick Shannon,

    Thank you for getting back to me.

    Notice from my previous post that I am using a server control to load the jquery scripts. Instead of using <script> tags try using the following control and then, point it to the jQuery script file:
    <telerik:JsFileLink ID="jQuery" runat="server" FileName=""/>

     
    Kind regards,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  5. Patrick Shannon
    Patrick Shannon avatar
    4 posts
    Registered:
    08 Jul 2009
    16 Oct 2009
    Link to this post
    I'm a little further along now, but not quite there yet. I should have checked my source code, the jQuery *was* being loaded in, but oddly my javascript for the page wasn't working. What I figured out is that I moved the javascript code into a second .js file and loaded that in the same way as the external jQuery source, and the jQuery effects worked on the page once again.

    Unfortunately back to square one though...the jQuery still appears and hides everything when trying to edit the page. (Tried refreshing cache, no go.) The following is what I currently have in the head of my master file...

    <%@ Master Language="C#" %> 
    <telerik:JsFileLink ID="jQuery" runat="server" FileName="/Javascript/jquery-1.3.2.min.js" /> 
    <telerik:JsFileLink ID="jsCapabilities" runat="server" FileName="/Javascript/capabilities.js" /> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <script runat="server"
        protected void Page_Load(object sender, EventArgs e) 
        { 
            Telerik.Cms.Web.CmsPageBase cmsPage = this.Page as Telerik.Cms.Web.CmsPageBase; 
            if (cmsPage.PageMode == Telerik.Cms.Web.CmsPageMode.Edit) 
            { 
                this.jQuery.Enabled = false
            } 
        } 
    </script> 
     
    <html xmlns="http://www.w3.org/1999/xhtml" > ... 

  6. Patrick Shannon
    Patrick Shannon avatar
    4 posts
    Registered:
    08 Jul 2009
    16 Oct 2009
    Link to this post
    I ended up getting this to work by going at this from another direction...I put some javascript in the jQuery to test to see if the URL was currently editing a page, it it was, then do nothing with the jQuery, otherwise print it out.
  7. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    19 Oct 2009
    Link to this post
    Hi Patrick Shannon,

    Thank you for getting back to us.

    I am not quite sure why it might not have worked on your side, however we are happy to see that you have managed to find a way to disable jQuery in runtime.

    If you have more questions, please feel free to contact Telerik Support or post in our community forums.

    Greetings,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  8. Ivan
    Ivan avatar
    51 posts
    Registered:
    22 Aug 2007
    23 Oct 2009
    Link to this post
    Hi Radoslav,

    I implemented a custom base class that inherits InternalPage and contains the following code you specified in the earlier post.

    protected void Page_Load(object sender, EventArgs e) 
            { 
                Telerik.Cms.Web.CmsPageBase cmsPage = this.Page as Telerik.Cms.Web.CmsPageBase; 
                if (cmsPage.PageMode == Telerik.Cms.Web.CmsPageMode.Edit) 
                { 
     
                    List<Control> csslist = FindControlRecursiveSet("CssFileLink"); 
                    foreach (Control c in csslist) 
                    { 
                        c.Visible = false
                    } 
     
                    List<Control> jslist = FindControlRecursiveSet("JsFileLink"); 
                    foreach (Control c in csslist) 
                    { 
                        c.Visible = false
                    } 
                } 
            } 

    However, this code doesn't seem to be triggered when I am in trying to edit code and the jquery and css styles cause some content placeholders to be hidden like the live page.

    Is there another flag or indicator that I can use to determine if I am in the admin portion of the site versus the live site?  Am I missing a step some where?

    Thanks.
    -Ivan
  9. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    23 Oct 2009
    Link to this post
    Hi Ivan,

    You can try using

    if( HttpContext.Current.Request.QueryString[ "cmspagemode" ] == "edit" )
    {
      
        // do something here
     
    }

    Greetings,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  10. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    23 Oct 2009
    Link to this post
    Hi Ivan,

    Just a follow up. in the code you have pasted I see that both foreach loops go through the same controls collection:
    List<Control> csslist = FindControlRecursiveSet("CssFileLink");
    foreach (Control c in csslist)
    {
            c.Visible = false;
    }
    List<Control> jslist = FindControlRecursiveSet("JsFileLink");
    foreach (Control c in csslist)
    {
            c.Visible = false;
    }

    Kind regards,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  11. Ivan
    Ivan avatar
    51 posts
    Registered:
    22 Aug 2007
    23 Oct 2009
    Link to this post
    Hi Ivan, Radoslav,

    I have updated my code per your instructions but it still appears that the Page_Load method is not invoked when I select the "Edit This Page option" in the admin console.  Is the cmsentrypoint.aspx ignored when you viewing pages through the admin console?

    As indicated in other posts, I created a custom class deriving from InternalPage and updated the reference in the cmsentrypoint.aspx.

    Is there some other configuration step that needs to be done?

    Thanks.
    -Ivan
  12. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    23 Oct 2009
    Link to this post
    Hello Ivan,

    You can try an alternative approach. See if the page is in live mode and then make the control enabled. It will be disabled by default:
    {
        Telerik.Cms.Web.CmsPageBase cmsPage = this.Page as Telerik.Cms.Web.CmsPageBase;
        if (cmsPage.PageMode == Telerik.Cms.Web.CmsPageMode.Live)
        {
          //enable jquery
        }
    }

    Kind regards,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  13. Ivan
    Ivan avatar
    51 posts
    Registered:
    22 Aug 2007
    23 Oct 2009
    Link to this post
    Hi Radoslav,

    It seems like setting CssFileLink and JsFileLink tags to Enabled="false" has no effect.  I've tried both programmatically in the codebehind and declaratively in the aspx.

    Any ideas why this may not be working as expected?  I am running version Sitefinity 3.7.1990.2:0.  

    I need to get this working ASAP and didn't anticipate such difficulties.

    Thanks.
    -Ivan
  14. Ivan
    Ivan avatar
    51 posts
    Registered:
    22 Aug 2007
    23 Oct 2009
    Link to this post
    Hi Radoslav,

    To clarify, the Enabled attribute is working correctly.  The specific issue I am encountering is on the inline preview from the Sitemap page.  One of my pages has some javascript that seemingly causes a reload on page load.  I was hoping that using the JsFileLink would allow me to disable it.  As I was debugging my solution, it seems that 2 postbacks are made, the first pass is as the admin_editentry.aspx (sorry if this is not the exact name) and this does properly set the JsFileLink and CssFileLink tags to disabled.  However, there is immediately a second postback that comes through as cmsentrypoint.aspx which has a CmsPageMode of Live.

    Can you explain why this happens?  Is it expected behavior?  If so, is it possible to prevent it so my page properly displays in edit mode?

    Any insight would be appreciated.  Thanks.
    -Ivan
  15. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    26 Oct 2009
    Link to this post
    Hello Ivan,

    Thank you for getting back to me.

    Well I am not quite sure why this will not work on your side. However I have came up with a sort of a work around. Point the JsFileLink and CssFileLink controls to point to empty js, and css files. then in the page is live set them to the correct file name:
    <script type="text/C#" runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            Telerik.Cms.Web.CmsPageBase page = this.Page as Telerik.Cms.Web.CmsPageBase;
            if (page.PageMode == Telerik.Cms.Web.CmsPageMode.Live)
            {
                jQueryLink.FileName = "~/Sitefinity/ExternalLibraries/jcarousel/lib/jquery-1.2.3.pack.js";
            }
        }
    </script>
    <sf:JsFileLink ID="jQueryLink" runat="server"  FileName="~/emptyjsfile" />

    Kind regards,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  16. Ivan
    Ivan avatar
    51 posts
    Registered:
    22 Aug 2007
    26 Oct 2009
    Link to this post
    Thanks Radoslav,

    This approach seems to be the most successful.  I did notice again though that the enabled flag actually didn't work for me and I needed to set the value of FileName to space (FileName=" ").

    -Ivan
  17. Chris Emerson
    Chris Emerson avatar
    13 posts
    Registered:
    17 Apr 2009
    29 Jan 2010
    Link to this post
    Is there an updated or more official post on this topic? I'm facing same issue (jquery preventing me from working with template/master in the RadEditor) but I'm having trouble getting the code snippets in this thread implemented in my project.
  18. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    30 Jan 2010
    Link to this post
    Hi Chris Emerson,

    Try using QueryString keys to identify the mode and disable/enable execution of some code as suggested in one of the posts above

    QueryString[ "cmspagemode" ] == "edit"


    Greetings,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  19. Ivan
    Ivan avatar
    51 posts
    Registered:
    22 Aug 2007
    01 Feb 2010
    Link to this post
    Hi Chris,

    Here is how I implemented the solution suggested by the support team:

    page1.master
    <body> 
        <form id="form1" runat="server">  
        <%-- 
            To properly function in cms CSS and JS includes need to be set as such with actual file values only being set when live content is viewed. 
            Note the space in FileName is intentional due to a bug in the CMS code.  See codebehind. 
        --%> 
        <sf:CssFileLink ID="CssFileLink1" runat="server" FileName="~/css/nav.css" /> 
        <sf:CssFileLink ID="CssFileLink2" runat="server" FileName=" " /> 
        <sf:CssFileLink ID="CssFileLink3" runat="server" FileName="~/css/home.css" /> 
        <sf:JsFileLink ID="JsFileLink1" runat="server" FileName="~/js/jquery.js" /> 
        <sf:JsFileLink ID="JsFileLink2" runat="server" FileName=" " /> 
        <sf:JsFileLink ID="JsFileLink3" runat="server" FileName="~/js/global.js" /> 
        <sf:JsFileLink ID="JsFileLink4" runat="server" FileName="~/js/jquery.taconite.js" /> 
        <sf:JsFileLink ID="JsFileLink5" runat="server" FileName="~/js/swfobject.js" /> 
        <sf:JsFileLink ID="JsFileLink6" runat="server" FileName="~/js/drawers.js" /> 
         
        <div id="Wrapper"
    ... 
    </body> 

    page1.cs

        protected void Page_Load(object sender, EventArgs e) 
        { 
            Telerik.Cms.Web.CmsPageBase cmsPage = this.Page as Telerik.Cms.Web.CmsPageBase; 
            if (cmsPage.PageMode == Telerik.Cms.Web.CmsPageMode.Live) 
            { 
                JsFileLink2.FileName = "~/js/thickbox.js"
            } 
     
            if (cmsPage.PageMode == Telerik.Cms.Web.CmsPageMode.Live || cmsPage.PageMode == Telerik.Cms.Web.CmsPageMode.Preview) 
            { 
                CssFileLink2.FileName = "~/css/global.css"
            } 
        } 

    Any file that doesn't affect the rendering in edit or any other mode should just be declared in the .master page.  The files that do affect the rendering should have the FileName attribute set to space (" ") not empty (""), otherwise a null error or something similar would occur.  Then in the code behind, set the proper filename value for the required mode.

    It gets the job done if not exactly pretty.  Hope this helps.
    -Ivan
  20. Chris Emerson
    Chris Emerson avatar
    13 posts
    Registered:
    17 Apr 2009
    02 Feb 2010
    Link to this post
    Thanks alot, Ivan - your post was what I needed (just had to change the "<sf:" to "<telerik:". I've got the master behaving well enough in the Sitefinity editor now. I'm still having layering/z-index issues w/the Overlay (and Classic) edit mode - but at least the jquery isn't adding to the mess now!

    Thanks again.
  21. Ivan
    Ivan avatar
    51 posts
    Registered:
    22 Aug 2007
    02 Feb 2010
    Link to this post
    Hi Chris,

    I'm glad this was helpful.  I also prefer the Classic mode as Overlay always seems to behave oddly.

    Good luck.
    -Ivan
Register for webinar
21 posts, 0 answered