add javascript to child template - General

tesuji 95 posts 139 karma points

Dec 20, 2010 @ 17:55

Add JavaScript to child template?

General

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.

Copy Link

Hendy Racher 863 posts 3849 karma points MVP 2x admin c-trib

Dec 20, 2010 @ 18:00

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

Copy Link

Tom Fulton 2030 posts 4998 karma points c-trib

Dec 20, 2010 @ 18:00

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

Copy Link

Kim Andersen 1447 posts 2196 karma points MVP

Dec 20, 2010 @ 18:01

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

Copy Link

tesuji 95 posts 139 karma points

Dec 20, 2010 @ 18:32

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?

Copy Link

Hendy Racher 863 posts 3849 karma points MVP 2x admin c-trib

Dec 20, 2010 @ 18:54

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

Copy Link

tesuji 95 posts 139 karma points

Dec 20, 2010 @ 19:02

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>

Copy Link

tesuji 95 posts 139 karma points

Dec 20, 2010 @ 19:05

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);      
});

Copy Link

Kim Andersen 1447 posts 2196 karma points MVP

Dec 20, 2010 @ 21:00

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

Copy Link

Hendy Racher 863 posts 3849 karma points MVP 2x admin c-trib

Dec 20, 2010 @ 21:06

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

Copy Link

tesuji 95 posts 139 karma points

Dec 20, 2010 @ 21:30

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>