clean url and javascript load order problem in php

StackOverflow https://stackoverflow.com/questions/6321652

Question

I am trying to build a php webpage.packing.php contains :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Fresh Sliding Thumbnails Gallery with jQuery and PHP" />
        <meta name="keywords" content="jquery, images, gallery, full page, thumbnails, scrolling, sliding, php, xml"/>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>


<link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />

<script type="text/javascript" src="js/jquery-1.6.1.js"></script>


<link rel="stylesheet" type="text/css" href="css/site.css" />

<script type="text/javascript" src="js/ddsmoothmenu.js">

</script>
        <script type="text/javascript" src="js/jquery.gallery.js"></script>

<script type="text/javascript" >
$(document).ready( function(){


  // Menu 

  ddsmoothmenu.init({
    mainmenuid: "smoothmenu1", //menu DIV id
    orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
    classname: 'ddsmoothmenu', //class added to menu's outer DIV
    //customtheme: ["#1c5a80", "#18374a"],
    contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
}); 
});

</script>

and my .htaccess is 

RewriteEngine On
RewriteRule ^packing/Pure packing.php?id=pure
RewriteRule ^packing/ExtraVirgin packing.php?id=EV

Now when I open my php it rendersproperly say I open packing.php

But when I open using the clean URL it gives an error in firebug stating $ is not defined.

Now I know the problem is due to the wrong loading order of javascripts. Why does it happen And how can I solve it ?

Thank you.

Was it helpful?

Solution

When you use your clean URLs, the browser thinks it's in a different directory (/packing/pure). The relative URLs that point to your JS files will no longer work.

Use absolute URLs instead:

 <script type="text/javascript" src="/js/jquery.gallery.js">

OTHER TIPS

There could be an issue with the paths? You're not giving path's, but you're changing paths from the root (packing.php) to a 2nd level (packing/Pure). It is probably looking for your .js files in the wrong path, like packing/js/ instead of just /js.

Try using absolute paths for your loading:

<script type="text/javascript" src="/js/jquery-1.6.1.js"></script>

(notice the slash!)
or even

<script type="text/javascript" src="http://yoursite.com/js/jquery-1.6.1.js"></script>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top