Topic: Javascript in header only works on index page

Hi,

I'm hoping I get a response to this. In the header of my application layout I've got my javascript scripts and links to javascripts file. Specifically, the two of the most important of these are my SIFR js and some code for rounded corners. My onload JS functions and scripts are NOT running in my "new" view and I can't figure out why. Does anyone have a clue why my app is doing this?

For the record, the code in my application header is:

<head>
    <title>Scoreboard</title>
<%= javascript_include_tag :defaults %>   
<%= stylesheet_link_tag 'stylesheet' %>
<script src="javascripts/jquery.sifr.min.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/jquery.flash.min.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/jquery.curvycorners.min.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/form-fun.jquery.js" type="text/javascript" charset="utf-8"></script>



<script type="text/javascript">
$(document).ready(function(){
    $('h1').sifr({font: '/images/xpressive.swf'});
});
</script>

<script type="text/javascript">
$(document).ready(function() {
    alert("jquery is working");
});
</script>

<script type="text/javascript">
    $(function(){
           
           
            $('.c').corner();
            $('.inner').corner({
              tl: { radius: 6 },
              tr: { radius: 6 },
              bl: { radius: 6 },
              br: { radius: 6 }});
            $('.c2').corner({
              tl: { radius: 32 },
              tr: { radius: 16 },
              bl: { radius: 16 },
              br: { radius: 16 },
              antiAlias: true,
              autoPad: false,
              validTags: ["div"] });
            $('.c3').corner({
              tl: { radius: 16 },
              tr: false,
              bl: false,
              br: { radius: 16 },
              antiAlias: true,
              autoPad: true,
              validTags: ["div"] });
              
            $('#container-1 > ul').tabs();
    });
</script>
<script type="text/javascript">
function addElement(){
    $(document).ready(function() {
        $('#team_p').highlight('10000').animate({left: 300}, 'slow').fadeOut('slow');
        var teamNum = $('#number').val();
        teamNum = parseInt(teamNum);
        $('.hidden').show('slow').highlight('10000000000000000000000000000000000000000000000000000').insertAfter('#submit');
       
       
    });
       
}
       
</script>


<script>
function order(){
    var numTeams = parseInt(document.getElementById("number").value);
        if (document.getElementById('number').value =="" ||
        isNaN(document.getElementById('number').value))
        alert("*Ahem* Please enter a number.");
        else
        addElement();
       
}
</script>

Re: Javascript in header only works on index page

Try changing lines 5-8 to reference the scripts relative to the root. Instead of:

<script src="javascripts/

try:

<script src="/javascripts/


Thanks!

"Fools ignore complexity. Pragmatists suffer it. Some can avoid it. Geniuses remove it. " - Alan Perlis

Re: Javascript in header only works on index page

THAT TOTALLY WORKS!

This has driven me crazy for weeks now! I've wanted to use SIFR to do pull-out quotes on a client's site.

Thank you so much for the most simple of solutions.

Also, I've got family in Highlands Ranch, it's a beautiful place.

Really, I've been pulling my hair out about this issue, thinking it must be something related to the routes, etc.

Again, thanks and I'm so glad this forum exists!

-Rob

Re: Javascript in header only works on index page

No problem, glad to be of help. You can also use the javascript_include_tag to help you out, like so:

<%= javascript_include_tag("script1", "script2", "script3") %>

this should help generate those tags with the references starting at the root.

Last edited by Michael Sullivan (2009-03-04 03:01:16)

"Fools ignore complexity. Pragmatists suffer it. Some can avoid it. Geniuses remove it. " - Alan Perlis