Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • tesuji 95 posts 139 karma points
    Dec 20, 2010 @ 17:55
    tesuji
    0

    Add JavaScript to child template?

    Is there an easy way to add JavaScript to a child template? I would put it inside the SCRIPT tag in the HEAD tab but that's in the main parent template.

    I don't want the JavaScript in the main template, because it needs to be different for each of my several child templates.

     

  • Hendy Racher 863 posts 3849 karma points MVP 2x admin c-trib
    Dec 20, 2010 @ 18:00
    Hendy Racher
    2

    Hi Tesuji,

    How about adding another ContentPlaceHolder within the html head section of your parent template, that way on the child templates you can 'inject' your javascript into that part of the markup.


    HTH,

    Hendy

     

  • Tom Fulton 2030 posts 4998 karma points c-trib
    Dec 20, 2010 @ 18:00
    Tom Fulton
    2

    Hi,

    Typically I handle this by adding a ContentPlaceHolder in the HEAD tag called something like "AdditonalHeadHTML"

    Then you can inject javascript/CSS related to a child template by using that placeholder.

    Ex, in your master template:

      <head>
        <umbraco:Macro Alias="HTML-Meta" runat="server"></umbraco:Macro>
        <link type="text/css" rel="stylesheet" href="/css/mainStyles.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

        <asp:ContentPlaceHolder Id="HeadAdditional" runat="server"/>
      </head>

    In a child template:

    <asp:Content ContentPlaceHolderId="HeadAdditional" runat="server">
    ...additional scripts here....
    </asp:Content>

    -Tom

     

  • Kim Andersen 1447 posts 2196 karma points MVP
    Dec 20, 2010 @ 18:01
    Kim Andersen
    1

    Hi Tesuji

    Maybe you could consider making a header.xslt-macro. This macro could be used to create some special (or all) of the information in the -tag like meta-tags, references to stylesheets, scripts etc.

    Then in this XSLT file you could make a check to see if a page uses the template(s) where you want to include the script.

    Otherwise I'm pretty sure that you can create a asp placeholder in your <head>-tag, and then insert the script into this palceholder, from your child template.

    /Kim A

  • tesuji 95 posts 139 karma points
    Dec 20, 2010 @ 18:32
    tesuji
    0

    Another option I have is to put the main Javascript in the main template and then just set a Javascript variable in the child page.

    Is this hard to do - pass a Javascript variable from the child template to the to the main template?

  • Hendy Racher 863 posts 3849 karma points MVP 2x admin c-trib
    Dec 20, 2010 @ 18:54
    Hendy Racher
    0

    Hi Tesuji,

    Yes, that's another option, and could be achieved in the same manner - using ContentPlaceHolders - eitther by setting a global js value, or better yet calling the main JS routine from the child template, and passing in a parameter.

    Can I ask what value you want to set on the child template ? Perhaps the approach suggested by Kim would be more approprite as the common JS could be within the macro, and a check placed such that it's only rendered if it's required ?

    Cheers,

    Hendy

  • tesuji 95 posts 139 karma points
    Dec 20, 2010 @ 19:02
    tesuji
    0

    I created the jQuery script below, which shows or hides navigation menus based on what type of page it is.

    I want to set the PageType variable in the child template, so it knows which menus to show for that type of page.

    As I think about it, the easiest solution seems to put this Javascript in the main template, and then pass the PageType variable somehow from the child template. I'm trying to figure out how to do that now. But I am also open to your other suggestions here.

    <script type="text/javascript">
    $(document).ready(function(){
        var PageType = 'planning';
        //var thisPageType = 'resource';
        //var thisPageType = 'narrative';
        //var thisPageType = 'pubs';
        //var thisPageType = 'news';
        //r thisPageType = '';
    
        ShowLeftNav(thisPageType);      
    });
    
    function ShowLeftNav(pageType) {
        //alert(pageType);
        switch (pageType) { 
    
            case 'planning':        
                $(".planningToolNavClosed").hide();
                $(".planningToolNavExpanded").show();  
                $(".resourceLibraryNavClosed").show();  
                $(".resourceLibraryNavExpanded").hide(); 
                $(".narrativeLibraryNavClosed").show();
                $(".narrativeLibraryNavExpanded").hide();
                $(".publicationsNavClosed").show();
                $(".publicationsNavExpanded").hide();
                $(".newsNavClosed").show();
                $(".newsNavExpanded").hide();   
                break;         
    
            case 'resource': 
                $(".planningToolNavClosed").show();
                $(".planningToolNavExpanded").hide();  
                $(".resourceLibraryNavClosed").hide();  
                $(".resourceLibraryNavExpanded").show(); 
                $(".narrativeLibraryNavClosed").show();
                $(".narrativeLibraryNavExpanded").hide();
                $(".publicationsNavClosed").show();
                $(".publicationsNavExpanded").hide();
                $(".newsNavClosed").show();
                $(".newsNavExpanded").hide();              
                break;  
    
            case 'narrative': 
            $(".planningToolNavClosed").show();
                $(".planningToolNavExpanded").hide();  
                $(".resourceLibraryNavClosed").show();  
                $(".resourceLibraryNavExpanded").hide(); 
                $(".narrativeLibraryNavClosed").hide();
                $(".narrativeLibraryNavExpanded").show();
                $(".publicationsNavClosed").show();
                $(".publicationsNavExpanded").hide();
                $(".newsNavClosed").show();
                $(".newsNavExpanded").hide();            
                break;       
    
            case 'pubs': 
            $(".planningToolNavClosed").show();
                $(".planningToolNavExpanded").hide();  
                $(".resourceLibraryNavClosed").show();  
                $(".resourceLibraryNavExpanded").hide(); 
                $(".narrativeLibraryNavClosed").show();
                $(".narrativeLibraryNavExpanded").hide();
                $(".publicationsNavClosed").hide();
                $(".publicationsNavExpanded").show();
                $(".newsNavClosed").show();
                $(".newsNavExpanded").hide();            
                break;       
    
            case 'news': 
            default: 
                $(".planningToolNavClosed").show();
                $(".planningToolNavExpanded").hide();  
                $(".resourceLibraryNavClosed").show();  
                $(".resourceLibraryNavExpanded").hide(); 
                $(".narrativeLibraryNavClosed").show();
                $(".narrativeLibraryNavExpanded").hide();
                $(".publicationsNavClosed").show();
                $(".publicationsNavExpanded").hide();
                $(".newsNavClosed").show();
                $(".newsNavExpanded").hide();            
                break;
        }       
    };
    </script>
    
  • tesuji 95 posts 139 karma points
    Dec 20, 2010 @ 19:05
    tesuji
    0

    Sorry the first page of my jQuery should be the following. I want to pass the variable thisPageType

    $(document).ready(function(){
        var thisPageType = 'planning';
        //var thisPageType = 'resource';
        //var thisPageType = 'narrative';
        //var thisPageType = 'pubs';
        //var thisPageType = 'news';
        //r thisPageType = '';
    
        ShowLeftNav(thisPageType);      
    });
    
  • Kim Andersen 1447 posts 2196 karma points MVP
    Dec 20, 2010 @ 21:00
    Kim Andersen
    0

    Can't you just call the javascript function from your template/macro, with the ritght value. Something like this:

    $(document).ready(function(){      
    //Here you'll call the function through your template or macro with the right page type
         
    ShowLeftNav(thisPageType);              
    });

    Where the thisPageType is the correct type of course. Shouldn't this work or am I missing something obvious here?

    /Kim A

  • Hendy Racher 863 posts 3849 karma points MVP 2x admin c-trib
    Dec 20, 2010 @ 21:06
    Hendy Racher
    0

    Hi Tesuji,

    The following would work, but your code leads to a few more questions, do you have another scripts to show / hide the nav areas if the user interacts with them ? if not, might be better to only render out those navs that are in use and not use any javascript - if they are used elsewhere, how about hiding them all by default, and then show the relevant ones ? a toggle method could shrink the code quite significantly.

    Anyway, hope the following helps :)

    Parent template:

    <head>
    <script type="text/javascript">

    function ShowLeftNav(pageType) {
        switch (pageType) {
    ..
    ..
    }
    }
    </script>

    <asp:ContentPlaceHolder id="headContentPlaceHolder" runat="server" />

    </head>

    Child template:

    <asp:Content ContentPlaceHolderId="headContentPlaceHolder" runat="server">

    $
    (document).ready(function(){
           
     
    ShowLeftNav('planning');
                 
    });

    </asp:Content>

     

    Cheers,

    Hendy

     

  • tesuji 95 posts 139 karma points
    Dec 20, 2010 @ 21:30
    tesuji
    0

    Hendy, in your latest post, I assume I'll need to put that jQuery code for the child template in SCRIPT tags?

    <asp:Content ContentPlaceHolderId="headContentPlaceHolder" runat="server">
    <script type="text/javascript">
      $
    (document).ready(function(){
           
       
    ShowLeftNav('planning');  
                 
      });
    </script> 
    </asp:Content>
  • Hendy Racher 863 posts 3849 karma points MVP 2x admin c-trib
    Dec 20, 2010 @ 21:40
    Hendy Racher
    0

    Hi Tesuji,

    Oops, yes, (and also include the jQuery library in the parent template).

    (Alternatively you could move the ContentPlaceHolder up into the <script> tags and rename it to something like javascriptContentPlaceHolder)

    Cheers,

    Hendy

  • tesuji 95 posts 139 karma points
    Dec 20, 2010 @ 21:41
    tesuji
    0

    OK, I'll try that.

    Thanks, everyone for your replies. I'm a Javascript newbie and I'm still digesting everything that's been said here.

Please Sign in or register to post replies

Write your reply to:

Draft