JQuery UI вкладки AJAX контента проблема - PullRequest
Новая
       14

JQuery UI вкладки AJAX контента проблема

0 голосов
/ 12 сентября 2011

Проект, над которым я работаю, содержит множество jquery и jqueryui. На каждой странице есть одна или несколько вкладок jquery-ui, и все они работают со встроенным ajax. У меня есть несколько проблем. Прежде всего, есть разные плагины jquery почти на каждой странице, которую я прохожу через ajax, и я включаю один и тот же jquery libraru в каждый запрос, который также используется на странице индекса, на которой я показываю вкладки. Есть ли способ включить JQuery один раз и использовать его на каждой странице AJAX я тяну. Эта проблема также вызывает несколько различных проблем, например, если я нажимаю эту вкладку после различных вкладок JS. не работает. Ниже приведены некоторые коды, чтобы вы могли легко понять мою проблему.

ajax / slider.php (эта страница получает идентификатор через $ _GET и генерирует слайдер, который я не смог заставить работать с 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>

Аякс / 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>

А также страницы, которые я использую вкладки 

<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>

Думаю, у вас есть идеи по поводу моей проблемы. Я очень новичок в JS, так что если вы видите какие-либо ошибки, которые я сделал, не связанные с этим вопросом, стреляйте по желанию.

Извините за мой английский, если у меня есть какие-либо ошибки.

Спасибо.

РЕДАКТИРОВАТЬ: Я вроде решил свою проблему с изменением относительных путей js-библиотек на странице ajax на js / .. поэтому я даю пути относительно страницы, я называю ajax, а не саму страницу ajax. Но если у вас есть какие-то другие советы, это было бы здорово.

1 Ответ

0 голосов
/ 12 сентября 2011

вам просто нужно включить js на главной странице (там, где у вас есть вкладки), контент загружается через ajax, но он будет на той же странице, поэтому будет применяться тот же js и css.

Я используюиспользовать его на моей базовой странице, так как это имеет больше смысла, однако, если вам действительно нужно иметь его на каждой странице, вы можете сделать так, чтобы сторона включения включала в него ключ заголовка и проверяла, не был ли файл js включен перед добавлениемон

...