Jquery ui tabs ajax content issue

Question

The project i'm working on contains plenty of jquery and jqueryui. In every page there is one or more jquery-ui tab and all of them working with built-in ajax. I got several problems. First of all there are different jquery plugins in nearly every page i'm pulling through ajax and i'm including same jquery libraru over and over in every request which is also used in the index page which i'm showing tabs. Is there a way to include jquery once and use it on every ajax page i'm pulling. That problem also causes several different problems like if i click that tab after differet tabs js. is not working. I'm putting some codes below so you can understand my problem easily.

ajax/slider.php (This page gets id through $_GET and generates a slider which i could not make it work with jquery 1.6.2)

<link rel="stylesheet" type="text/css" href="ajax/advanced-slider.css" media="screen"/>
<script type="text/javascript" src="ajax/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="ajax/jquery.advancedSlider.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.slider').advancedSlider({
          width:600, 
          height:228, 
          alignType: 'centerCenter',
          hideTimer:true, 
          effectType:'height', 
          horizontalSlices:'10', 
          verticalSlices:'1', 
          slicePattern:'leftToRight', 
          slicePoint:'centerBottom',
          sliceDuration:'500', 
          captionSize:'228',
          showThumbnails: false,
          navigationButtons: false,
          navigationArrows: false,
          slideshowControls: false  });
    });

</script>

ajax/gallery.php

<link rel="stylesheet" type="text/css" href="../js/fancybox/jquery.fancybox-1.3.4.css" media="screen"/>
<script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../js/fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
    //$.noConflict(); // (that piece of code sometimes work sometimes doesn't and i have no idea why)
    $('a.grouped_elements').fancybox({
      titlePosition: 'inside'
    });
      });


</script>

ajax/g_maps.php

<script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAAmwC95iK7Tp7hI6hDlNqLhBS5NlhQfHS3VfXEycw6BkztwAjcGBRR3F2hVVVhA0GciYJcjlYGoArYDg" type="text/javascript"></script>
<script type="text/javascript" src="../js/jquery.gmap-1.1.0-min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
     $.noConflict();
      $("#maps").gMap({ markers: [{ latitude: <?php echo $maps_x; ?>,
                              longitude: <?php echo $maps_y; ?>,
                              html: "<?php echo $maps_adi.'<br />'.$maps_adres; ?>",
                              popup: true }],
                              zoom: 16 });

    });


</script>

And also page i'm using tabs

<link type="text/css" href="css/style.css" rel="stylesheet" />  
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<link type="text/css" href="css/jqueryui-project-spesific.css" rel="stylesheet" />
<link type="text/css" href="js/countdown/jquery.countdown.css" rel="stylesheet" />
<link type="text/css" href="js/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" />
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAAmwC95iK7Tp7hI6hDlNqLhBS5NlhQfHS3VfXEycw6BkztwAjcGBRR3F2hVVVhA0GciYJcjlYGoArYDg" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/countdown/jquery.countdown.min.js"></script>
<script type="text/javascript" src="js/countdown/jquery.countdown-tr.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.15.custom.min.js"></script>
<script type="text/javascript" src="js/jqueryui-tr.js"></script>

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

        $( "#tabs" ).tabs({
                cache: true,
                ajaxOptions: {
                error: function( xhr, status, index, anchor ) {
                            $( anchor.hash ).html(
                            "Some error message");
                            }
        }
        });
 });
</script>

I think you'll have some ideas about my problem. I'm very new to js so if you see any mistakes that i did unrelated to this question fire at will.

Sorry about my English if I have any errors.

Thanks.

EDIT : I kinda solved my problem with changing relative paths of js libs in ajax page to js/.. so i'm giving paths relative to page i'm calling ajax not the ajax page itself. But if you have any other tips that would be great.

Answer 1

you just need to include js on main page (where you have your tabs), content is loaded via ajax but it will be on the same page, so same js an css will apply.

I use to use it on my base page as it makes more sense, however, if you really need to have it on every page you can make the include server side giving it a key on header and check if js file haven't been included before adding it