asked on

How to run JQuery within Server-side Include?

I have the following code example that works:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>test</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script>
    jQuery(document).ready(function () {
    
       var url = window.location.pathname;
       var pagename= url.substring(url.lastIndexOf('/')+1);
       $('a[href="'+pagename+'"]').addClass("current");
      
    
});



  </script>
  <style>
  a.current{color:red;}
  </style>
</head>
<body>
<nav id="main-nav">
      
      <ul>
         <li class="current">
            <a href="index.html"  data-description="The Basic Info">The House</a>
         </li>
         <li>
            <a href="location.html" data-description="Where's It Located">The Map</a>
         </li>
         <li>
            <a href="rates.html" data-description="Booking Info">Rates & Avalability</a>
         </li>
         <li>
            <a href="reviews.html" data-description="What'd They Think">Reviews</a>
         </li>
         <li>
            <a href="contact-us.html" data-description="Need More Info">Contact</a>
         </li>
      </ul>

</body>
</html>

Open in new window

The issue is the actual file I want this applied to is actually a Server-side include and I don't seem to be able to get this to function properly in an SSI? I've played with moving jQuery include inside and out of SSI but no luck? Here is the actual SSI include:

<header id="header" class="container clearfix">
	<a href="index.html" id="logo">
		<img src="img/logo.png" alt="SmartStart">
	</a>

	<nav id="main-nav">
		
		<ul>
			<li>
				<a href="index.html" data-description="The Basic Info">The House</a>
			</li>
			<li>
				<a href="location.html" data-description="Where's It Located">The Map</a>
			</li>
			<li>
				<a href="rates.html" data-description="Booking Info">Rates & Avalability</a>
			</li>
			<li>
				<a href="reviews.html" data-description="Don't Take Our Word For It">Reviews</a>
			</li>
			<li>
				<a href="contact-us.html" data-description="Need More Info">Contact</a>
			</li>
		</ul>

	</nav><!-- end #main-nav -->
	
</header><!-- end #header -->

Open in new window

Thanks!

Scott Fell

Are you saying that, "<header id="header" class="container clearfix"> " is in your included file? What language are you using to include the file?

ASKER

Here is the include:

<!--#include virtual="/header.html" -->

Open in new window

The template does include jQuery.

Michel Plungjan

What is the actual issue?

The code you have in jQuery can live anywhere including the include as long as jQuery itself is loaded somewhere before the code

ASKER

i tried incling jquery in the include but it didnt work?

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial