jqurey embedded in ui tab

jqurey embedded in ui tab

Dear all,

I'm newbe in Jquery and I encounter a problem for which I do not find solution. My goal is to have tabs in which are files with content linked to jquery scripts. My files work very well on IE8 and firefox 3.6.8 but not with google chrome 5 and safari 5. The behavior is that the scripts are not loaded.

Here are the source code

indextest.php

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>indextest</title>
  6.     <link type="text/css" href="libraries/jquery-ui-1.8.2.custom/css/custom-theme/jquery-ui-1.8.2.custom.css" rel="stylesheet"/>
  7.     <script type="text/javascript" src="libraries/jquery-ui-1.8.2.custom/js/jquery-1.4.2.min.js"></script>
  8.     <script type="text/javascript" src="libraries/jquery-ui-1.8.2.custom/development-bundle/ui/jquery.ui.tabs.js"></script>
  9.     <script type="text/javascript" src="libraries/jquery-ui-1.8.2.custom/js/jquery-ui-1.8.2.custom.min.js"></script>
  10.     <script type="text/javascript">
  11.     $(document).ready(function() {
  12.         $("#tabs").tabs();
  13.     });
  14.     </script>
  15. </head>
  16. <body>
  17.     <div class="content">
  18.         <?php include 'testuitab.html'; ?>
  19.     </div>
  20. </body>
  21. </html>

the testuitab.html

  1.  <div id="tabs">
  2.         <ul>
  3.             <li><a href="2__12test.html" title="test1">12</a></li>
  4.             <li><a href="2__14test.html" title="test2">14</a></li>
  5.         </ul>
  6.     </div>
    
    the 2__12test.html and 2__14test.html are similar (except id lien_test1 in spite of lien_test1)
    
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <title>test</title>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6.         <link rel="stylesheet" href="views/css/CMPBase.css" type="text/css"/>
  7.         <script src="testscript.js" type="text/javascript"></script>
  8.     </head>
  9.     <body>
  10.         <p>
  11.             <a title="lien de test" id="lien_test1">Lien de test</a>
  12.         </p>
  13.     </body>
  14. </html>
   
    and the testscript.js
    
  1.         //code javascript
  2.     $("#lien_test1").click(
  3.         function(){alert('bonjour !');}
  4.     );
  5.     $("#lien_test2").click(
  6.         function(){alert('bonjour !');}
  7.     );
Files indextest.php, 2__12test.html and 2__14test.html passed the validation under http://validator.w3.org/

I do not understand what happens, but I'm sure that it's a small think I don't see or know.

Thank you in advance for your help.

cdespont