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

Forums / Developing with Sitefinity / How to make Javascript of Jquery work in Generic Content Control

How to make Javascript of Jquery work in Generic Content Control

9 posts, 0 answered
  1. Bo Sep
    Bo Sep avatar
    21 posts
    Registered:
    27 May 2010
    03 Aug 2010
    Link to this post
    Hi all,
    I'm having trouble making the javascript or jquery work in Generic Content Control.
    I've tried all possible ways explained in the forum, but none worked for me. So I'm hoping someone can help me with this>
    Here's what I have on my master page:
    <%@ Master Language="C#" %>
    <%@ Register Assembly="Telerik.Cms.Web.UI" Namespace="Telerik.Cms.Web.UI" TagPrefix="sf" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1" runat="server">
        <title></title>
       </head>
    <body>
        <sf:JsFileLink ID="banner" runat="server" FileName="~/App_Master/JS_Call/HS_jquery.cycle.all.2.72.js" />
        <sf:JsFileLink ID="superleight" runat="server" FileName="~/App_Master/JS_Call/HS_supersleight.plugin.js" />
        <sf:JsFileLink ID="maplight" runat="server" FileName="~/App_Master/JS_Call/jquery.maphilight.min.js" />
        <sf:JsFileLink ID="contentflow" runat="server" FileName="~/App_Master/JS_Call/contentflow.js" />
        <sf:JsFileLink ID="contentflow_src" runat="server" FileName="~/App_Master/JS_Call/contentflow_src.js" />
        <sf:JsFileLink ID="contentflowAddOn" runat="server" FileName="~/App_Master/JS_Call/ContentFlowAddOn_DEFAULT.js" />
        <sf:JsFileLink ID="JQtabs" runat="server" FileName="~/App_Master/JS_Call/HS_ui.tabs.js" />
        <sf:JsFileLink ID="jqscripts" runat="server" FileName="~/App_Master/JS_Call/scripts.js" />
        <sf:JsFileLink ID="jqcall" runat="server" FileName="~/App_Master/JS_Call/SFblk.js" />
        <form id="form1" runat="server">
     
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Path="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></asp:ScriptReference>
             
        </Scripts>
        </telerik:RadScriptManager>
    and here what I have in the master page code behind:
    public partial class App_Master_MasterPage : System.Web.UI.MasterPage
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (Request.Browser.Browser.ToLower() == "ie")
            {
                var link = new HtmlLink { href = "~/App_Themes/HS/banner.css" };
                link.Attributes.Add("rel", "stylesheet");
                link.Attributes.Add("type", "text/css");
                Page.Header.Controls.Add(link);
            }
        }
    }
    And here is what id did:
    I copied the master page in Sitefinity and created a template, then dropped a Generic Content Control and placed the relevant codes in the editor.
    Everything looks good except javascript does not function.

    Your help in resolving this issue is greatly appreciated.

    Bo
  2. Pam
    Pam avatar
    11 posts
    Registered:
    24 Nov 2009
    04 Aug 2010
    Link to this post
    Bo,

     I also had trouble with getting a jQuery Slideshow working on a Sitefinity webpage. Here is the steps I took to get it working. I created a Web User Control and placed my jQuery Slideshow markup in the ascx file.
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="jQuerySlideShow.ascx.cs" Inherits="UserControls_jQuerySlideShow" %>
     
      
    <script type="text/javascript"charset="utf-8">
        $(document).ready(function() {
            $("#slideshow1").slideshow({
                pauseSeconds: 8,
                height: 370,
                width: 600,
                caption: true
            });
        });
        </script>
      
    <div id="slideshow1">
            <img src="/NCTCDev/App_Themes/nctc/img/slides/photo1.jpg"  alt="Great place to start. Great place to start over."/>       
            <img src="/NCTCDev/App_Themes/nctc/img/slides/students12.jpg" alt="Students on the way to class."/>
            <img src="/NCTCDev/App_Themes/nctc/img/slides/photo2.jpg" alt="Vist a NCTC Campus near you today."/>
            <img src="/NCTCDev/App_Themes/nctc/img/slides/photo3.jpg" alt="Proudly serving Cooke, Denton, Montague Counties."/>
            <img src="/NCTCDev/App_Themes/nctc/img/slides/students13.jpg" alt="Students doing some studying."/>
             
    </div>

    Next I added the necessary link references to my master page:
    <form id="form1" runat="server">
                  <asp:ToolkitScriptManager ID="somename" runat="server" EnablePartialRendering="true" CombineScripts="false"> </asp:ToolkitScriptManager>  
                 <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1"></telerik:RadAjaxManager>
                  <telerik:JsFileLink runat="server" ID="JsFileLink2" FileName="~/App_Themes/nctc/js/jquery-1.3.2.min.js" ScriptType="Custom"/>
            <telerik:JsFileLink runat="server" ID="JsFileLink1" FileName="~/App_Themes/nctc/js/jquery.slideshow.lite-0.5.3.js" ScriptType="Custom"/>
        <telerik:CssFileLink runat="server" ID="CssFileLink1" FileName="~/App_Themes/nctc/slideshow.css" Media="screen"/>
      <div id="topLevelImageRotator">
        <asp:ContentPlaceHolder ID="ImageSliderPhotos" runat="server"></asp:ContentPlaceHolder>
      </div> <!-- topLevelImageRotator -->

    Then I added my new Web User Control( jQuerySlideShow.ascx) to my web config file.
    <add name="jQuery Slideshow" section="Images & Documents" url="~/UserControls/jQuerySlideshow.ascx" />

    then placed my new jQuerySlideshow Control into my ContentPlaceHolder ( ImageSliderPhotos) on my master page. 
    I know this might be a little different from your jQuery events but just wanted to pass along my jQuery experience.  Finally I can get a jQuery event to work on my Sitefinity web page after many hours of trying and some help from Ivan the Great.

    Thanks, Darren
  3. Bo Sep
    Bo Sep avatar
    21 posts
    Registered:
    27 May 2010
    04 Aug 2010
    Link to this post
    Hi Darren,
    Thank you for sharing your experience with me. I really appreciate it. I did exactly as you described but still can not get it to work ;(
    <%@ Master Language="C#" %>
    <%@ Register Assembly="Telerik.Cms.Engine" Namespace="Telerik.Cms.Engine.WebControls" TagPrefix="cc" %>
    <%@ Register Assembly="Telerik.Cms.Web.UI" Namespace="Telerik.Cms.Web.UI" TagPrefix="sf" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1" runat="server">
        <title></title>
        <link href="~/App_Themes/HS/banner.css" rel="stylesheet" type="text/css" />
         
       </head>
    <body>
         
        <form id="form1" runat="server">
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Path="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></asp:ScriptReference>
        </Scripts>
        </telerik:RadScriptManager>
        <telerik:JsFileLink runat="server" ID="banner" FileName="~/App_Master/JS_Call/HS_jquery.cycle.all.2.72.js" ScriptType="Custom"/>
        <telerik:JsFileLink runat="server" ID="superleight" FileName="~/App_Master/JS_Call/HS_supersleight.plugin.js" ScriptType="Custom"/>
        <telerik:JsFileLink runat="server" ID="maplight" FileName="~/App_Master/JS_Call/jquery.maphilight.min.js" ScriptType="Custom"/>
        <telerik:JsFileLink runat="server" ID="contentflow" FileName="~/App_Master/JS_Call/contentflow.js" ScriptType="Custom"/>
        <telerik:JsFileLink runat="server" ID="contentflow_src" FileName="~/App_Master/JS_Call/contentflow_src.js" ScriptType="Custom"/>
        <telerik:JsFileLink runat="server" ID="contentflowadon" FileName="~/App_Master/JS_Call/ContentFlowAddOn_DEFAULT.js" ScriptType="Custom"/>
        <telerik:JsFileLink runat="server" ID="Jqtabs" FileName="~/App_Master/JS_Call/HS_ui.tabs.js" ScriptType="Custom"/>
        <telerik:JsFileLink runat="server" ID="Jqcontact" FileName="~/App_Master/JS_Call/scripts.js" ScriptType="Custom"/>
        <telerik:JsFileLink runat="server" ID="jscall" FileName="~/App_Master/JS_Call/SFblk.js"  ScriptType="Custom"/>
    I created:I created:
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="jQuerySlideShow.ascx.cs" Inherits="Sitefinity_UserControls_jQuerySlideShow" %>
    added to web.config:added to web.config:
    <add name="jQuery Slideshow" section="HSlider" url="~/UserControls/jQuerySlideshow.ascx" />
    and then dropped the new jQuerySlideshow Control into my ContentPlaceHolder on my master-page.

    Everything looks the same. All components are visible but there is no sign of Jquery action!
    Anything else come to mind?? I don't know what else I can do......

    Thank you
    Bo
  4. Pam
    Pam avatar
    11 posts
    Registered:
    24 Nov 2009
    05 Aug 2010
    Link to this post
    Bo,

    one difference is I included my main jQuery event in my web control ascx page. From the code you pasted what else is in your web control you created. You only show the first line. I also have a div with my images in my control. 

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="jQuerySlideShow.ascx.cs" Inherits="UserControls_jQuerySlideShow" %>
      
       
    <script type="text/javascript"charset="utf-8">
        $(document).ready(function() {
            $("#slideshow1").slideshow({
                pauseSeconds: 8,
                height: 370,
                width: 600,
                caption: true
            });
        });
        </script>

    Good Luck! Let me know how it goes. Would love to know how you got it working for future reference.

    Thanks, Darren

      PS. another difference I can see is that you are referencing the jQuery library from google and I have my included. I know it should work by referencing but that is the one difference I can see.  


    <asp:ScriptReference Path="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></asp:ScriptReference>
        </Scripts>   YOURS
    <telerik:JsFileLink runat="server" ID="JsFileLink2" FileName="~/App_Themes/nctc/js/jquery-1.3.2.min.js" ScriptType="Custom"/>  MINE
  5. Bo Sep
    Bo Sep avatar
    21 posts
    Registered:
    27 May 2010
    05 Aug 2010
    Link to this post
    Darren,
    I also have my main jQuery event in my web control ascx page. But it doesn't work.
    The interesting thing is that one of my plugins work, but 3 other don't!!
    I have no issue running them all in a regular ASP.net format.
    This is crazy!!
  6. Pam
    Pam avatar
    11 posts
    Registered:
    24 Nov 2009
    05 Aug 2010
    Link to this post
    Bo,

     One more thing to try. I have had issues with multiple files and referencing where one file was being overlooked by another file. Especially since you are putting some jQuery in your web control and it looks like you are referencing multiple jQuery files. What if you placed everything you need into one jQuery file, keep the single jQuery event in the web control and then references only that one file in your master page.

    Thanks, Darren
  7. Bo Sep
    Bo Sep avatar
    21 posts
    Registered:
    27 May 2010
    06 Aug 2010
    Link to this post
    Hi Darren,
    I tried it, but no luck. I'm thinking to enable Javascript in EditorConfigFile.xml but I can't locate the file in Sitefinity SP3.
    Maybe that will do the trick! Do you know how I can access this file?

    Thank you
    Bo
  8. Bo Sep
    Bo Sep avatar
    21 posts
    Registered:
    27 May 2010
    06 Aug 2010
    Link to this post
    Hey Darren,
    I solved it....
    This is what I did:
    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="App_Master_MasterPage" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
     
          <asp:ScriptManager ID="TheScriptManager" runat="server" EnablePartialRendering="true" AsyncPostBackTimeout="600" EnableScriptGlobalization="true">
                <Scripts>
                <asp:ScriptReference Path="Script/jquery-1.3.2.js" />
                <asp:ScriptReference  Path="Script/jquery.maphilight.min.js" />
                </Scripts>
            </asp:ScriptManager>
        <div>
    I couldn't find the editorConfigFile.xml, so I thought I set EnableScriptGlobalization to "true". and it did the trick...

    Take care and thanks again for sharing your experience with me.
    Regards
    Bo
  9. Nwe Nwe
    Nwe Nwe avatar
    3 posts
    Registered:
    14 Mar 2012
    14 Mar 2012
    Link to this post
    Hi Bo & Pam,

    I've the same issue and trying to replicate as you guys suggested.
    One question here: where should I put the following in web.config file?
    <add name="jQuery Slideshow" section="HSlider" url="~/UserControls/jQuerySlideshow.ascx" />

    Best Regards,
    Nwe
Register for webinar
9 posts, 0 answered