CODEWITHSUNDEEP
phpjavascriptjqueryhtml
Oyvind Andersson
Oyvind Andersson

Reputation: 362

Including jquery in a separate php header file somehow fails

I'm building a website, and have been working with some jQuery scripting that didnt seem to work. But after some time, I discovered that I had to link to the jQuery lib in my content file.

My hierachy is as follows:

All of these content files uses a "require_once("header.php")" and the same for the footer, templating technique.

Even though viewing the source in a browser links succsessfully to the included scripts and CSS files, it doesent seem to load jQuery (only). But when I included it in the specific content file, the script I wrote worked.

Here is some of the relevant code:

in header.php:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="NO">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]-->
<script type="text/javascript" src="../js/jquery-latest.pack.js"></script>
<script type="text/javascript" src="../js/shl_menu.js"></script>
<script type="text/javascript" src="../js/prototype.js"></script>
<script type="text/javascript" src="../js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="../js/lightbox.js"></script>

In gallery/index.php (content file)

<?php require_once("../header.php"); ?>

<!-- Sub Menu List -->
<nav id="shl-submenu" class="left shadow-box rounded-corners">

<script type="text/javascript">
$(document).ready(function(e) 
{
    $("#shl-submenu ul li a").click(function(e) {
        alert("Click");
    });
});
 ...

Now, if I include <script type="text/javascript" src="../js/jquery-latest.pack.js"></script> above that script, it works, but not unless.

Any help would be greatly appreciated! Thanks.

Upvotes: 1

Views: 1292

Answers (1)

Ben L
Ben L

Reputation: 2561

As you guessed there is a conflict between jQuery and Prototype. Both define the $ as a function. You can always use the variable jQuery instead of $ to avoid this and declare prototype after jQuery. This post explains a good way to handle this:

How to avoid conflict between JQuery and Prototype

Upvotes: 2

Related Questions