Блог

Главная - Вопросы по программированию - Диалоговое окно jQuery не отображает содержимое при обновлении до начальной загрузки 4

Диалоговое окно jQuery не отображает содержимое при обновлении до начальной загрузки 4

#javascript #jquery #twitter-bootstrap

Вопрос:

Я работаю над обновлением нашего веб-сайта с начальной загрузки 3 до начальной загрузки 4. У меня есть диалоговое окно jQuery, которое больше не работает, когда я переключаюсь на Bootstrap 4 — содержимое диалогового окна не отображается. Кнопки в определении диалогового окна jQuery есть, но больше ничего. Любые идеи приветствуются!

Диалоговое окно начальной загрузки 3:

Диалоговое окно начальной загрузки 3

Диалоговое окно начальной загрузки 4:

Диалоговое окно начальной загрузки 4

 var themedialog = $("#theme-change-form").dialog({
  autoOpen: false,
  height: 'auto',
  width: 450,
  modal: true,
  buttons: {
    "Update Theme": updateTheme,
    Cancel: function() {
      themedialog.dialog("close");
    }
  },
  close: function() {
    $('.subtheme-button').removeClass('active');
    $('.subtheme-button.selected').addClass('active');
  }
});

//Open dialog when change logo link clicked
$('#change-theme').on("click", function() {
  themedialog.dialog('open');
});

function updateTheme() {
  console.log('theme udated');
} 
 <link href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.usebootstrap.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" integrity="sha256-xNjb53/rY WmG 4L6tTl9m6PpqknWZvRt0rO1SRnJzw=" crossorigin="anonymous"></script>
<script src="https://cdn.usebootstrap.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" type="text/javascript"></script>


<div hidden id="theme-change-form">
  <div>
    <h3>Air</h3>
    <button class='subtheme-button' data-pkSubThemeID='3'>Acid Precipitation</button>
  </div>
  <!--more buttons here in the same format as above-->
</div>

<button id="change-theme">Change Themes</button>

Спасибо!

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

1. Вы серьезно используете jQuery 1.10? Я бы начал с этого. Обычно вы можете обновить до 3.x без проблем, за исключением, возможно live() on() , преобразования.

2. Кроме того, jQueryUI является древним и, как правило, не поддерживается. Я бы преобразовал их в диалоговые окна начальной загрузки. У вас будет более современный API и тема, которая лучше интегрируется. Очевидно, эти два понятия в любом случае несовместимы, поскольку у них обоих есть dialog() методы.

3. И почему вы не используете последние версии всех этих библиотек? Bootstrap 4.1 тоже очень старый. Я совершенно сбит с толку вашей стратегией.

Ответ №1:

Удалите hidden атрибут элемента диалога. В Bootstrap есть CSS, который устанавливает display: none элементы с этим атрибутом, и в любом случае в этом нет необходимости. Инспектор документов вашего браузера — отличный инструмент для просмотра подобных вещей.

 var themedialog = $("#theme-change-form").dialog({
  autoOpen: false,
  height: 'auto',
  width: 450,
  modal: true,
  buttons: {
    "Update Theme": updateTheme,
    Cancel: function() {
      themedialog.dialog("close");
    }
  },
  close: function() {
    $('.subtheme-button').removeClass('active');
    $('.subtheme-button.selected').addClass('active');
  }
});

//Open dialog when change logo link clicked
$('#change-theme').on("click", function() {
  themedialog.dialog('open');
});

function updateTheme() {
  console.log('theme udated');
} 
 body {
  padding: 30px;
} 
 <link href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.usebootstrap.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" integrity="sha256-xNjb53/rY WmG 4L6tTl9m6PpqknWZvRt0rO1SRnJzw=" crossorigin="anonymous"></script>
<script src="https://cdn.usebootstrap.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" type="text/javascript"></script>


<div id="theme-change-form">
  <div>
    <h3>Air</h3>
    <button class='subtheme-button' data-pkSubThemeID='3'>Acid Precipitation</button>
  </div>
  <!--more buttons here in the same format as above-->
</div>

<button id="change-theme">Change Themes</button>
Метки: