Вкладки не будут работать при попытке обновления с Jquery ui 1.8.20 до 1.10.3

#javascript #jquery #css

#javascript #jquery #css

Вопрос:

Кажется, я не вижу, что изменилось в журналах изменений jquery ui с версии 1.8.20 на то, что я сейчас использую 1.10.3

Я динамически извлекаю данные из базы данных, и она реплицирует вкладки по мере необходимости. Вкладки не работают, вместо этого они отображают все разделы, открытые на странице повсюду. Так что я думаю, что это как если бы скрыть css не работает. Вкладки также ничего не делают, когда вы нажимаете на них.

Он создает вкладки, а также отображает содержимое. как я уже сказал, ВСЕ разделы отображаются вместо того, чтобы быть скрытыми, если вы не выберете вкладку. Поэтому, в свою очередь, нажатие на вкладки ничего не дает, потому что все уже отображается.

Я думаю, что здесь есть скрипт, который нуждается в изменении:

 <html style="height:100% !important;">
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--Loading bootstrap css-->
<link type="text/css"
href="http://fonts.googleapis.com/css?family=Open Sans:400italic,700italic,800italic,400,700,800">
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,700,300">
<link type="text/css" rel="stylesheet" href="vendors/font-awesome/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="vendors/bootstrap/css/bootstrap.min.css">
<!--LOADING SCRIPTS FOR PAGE-->
<link type="text/css" rel="stylesheet" href="vendors/dhtmlxGantt/dhtmlxgantt.css">
<!--Loading style vendors-->
<link type="text/css" rel="stylesheet" href="vendors/animate.css/animate.css">
<link type="text/css" rel="stylesheet" href="vendors/jquery-pace/pace.css">
<!--Loading style-->
<link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="style-mango.css" id="theme-style">
<link type="text/css" rel="stylesheet" href="css/themes/default.css" id="color-style">
<link type="text/css" rel="stylesheet" href="css/vendors.css">
<link type="text/css" rel="stylesheet" href="css/style-responsive.css">
<link type="text/css" href="vendors/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" /> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="shortcut icon" href="images/icons/favicon.ico">
</head>

<!--BEGIN CONTENT-->
<div class="page-content" style="min-height:1400px;">

                            <div class="col-md-9" id="nfw_body_body" style="height:100%;">

<style>

div.ui-tabs { width:100%; height:80%; min-height:700px; margin:5px; float:left; border:none; }

#tabs .ui-widget-content { border:none; padding:0px; margin:0px; background-color:#fff !important;" }

}
</style>

<script language="javascript">

var dyna_tabs = {

tabs: null,

init: function (id) {
    var tabs = $('<div></div>').append('<div id="'  id   '"></div>');
    $('#nfw_body_body').append(tabs);

    var list = $('<ul></ul').append('<li><a href="#"></a></li>');
    tabs.append(list);

    tabs.tabs();

    // remove the dummy tab
    tabs.tabs('remove', 0);
    tabs.hide();

    this.tabs = tabs;
},

add: function (tab_id, tab_name, tab_content) {
    if (this.tabs != null) {
        if (this.tabs.css('display') == 'none') {
            this.tabs.show();
        }
        var data = $('<div id="' tab_id '"></div>').append(tab_content);
        this.tabs.append(data).tabs('add', '#'   tab_id, tab_name);
        this.tabs.tabs('beforeActivate', '#'   1);
    } else {
        alert('Tabs not initialized!');
    }
  }

};


$(document).ready(function() {  

 dyna_tabs.init('mytabs');

  dyna_tabs.add(
        'tabs-'   1, 
        ' User Details', 
        '<div id="tabs-1" ></div>'
    );

     $('#tabs-1').load("content/change_user_details.php?user_id=");



 dyna_tabs.add(
        'tabs-'   2, 
        'Pest Control', 
        '<div id="tabs-2"><h2>Pest Control</h2></div>'
    );

    $('#tabs-'   2).load("content/change_service_details.php?service_id=");

2   

 dyna_tabs.add(
        'tabs-'   3, 
        'House Cleaning', 
        '<div id="tabs-3"><h2>House Cleaning</h2></div>'
    );

    $('#tabs-'   3).load("content/change_service_details.php?service_id=);

3 


});


</script>
</div>
<!--END CONTENT-->
                                        </div>
<!--END CONTENT-->
<!--START FOOTER -->
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<!--loading bootstrap js-->
<script src="vendors/bootstrap/js/bootstrap.min.js"></script>
<script src="vendors/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js"></script>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<script src="vendors/metisMenu/jquery.metisMenu.js"></script>
<script src="vendors/slimScroll/jquery.slimscroll.js"></script>
<script src="vendors/jquery-cookie/jquery.cookie.js"></script>
<script src="js/jquery.menu.js"></script>
<script src="vendors/jquery-pace/pace.min.js"></script>
<!--LOADING SCRIPTS FOR PAGE-->
<!--CORE JAVASCRIPT-->
<script src="js/main.js"></script>
<script src="js/holder.js"></script>
<!--END FOOTER-- >
  

Комментарии:

1. Как выглядит скрипт после того, как PHP отобразил страницу клиенту?

2. Это только я или что? Я вижу jQUI CSS, но нет jQUI JS.

3. я только что отредактировал его, извините, что получилось странно. теперь это намного лучший вид.

4. Кто-нибудь может увидеть проблему? Я проверил журналы изменений и заблудился

Ответ №1:

Это было решено как несколько версий и вызовов jquery. Можно вызвать только один.