Question

0

331

Views

JQuery dialog not displaying content on upgrade to Bootstrap 4

I am working on upgrading our website from Bootstrap 3 to Bootstrap 4. I have a JQuery dialog that no longer works when I change to Bootstrap 4- the content of the dialog is not displayed. The buttons in the JQuery dialog definition are, but nothing else. Any ideas are appreciated!

Bootstrap 3 dialog:

Bootstrap 4 dialog:

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>

Thank you!

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-11T12:28:32.313Z

Remove the hidden attribute on the dialog element. Bootstrap has CSS that sets display: none on elements with that attribute, and it doesn't seem necessary anyway. Your browser's document inspector is a great tool for seeing things like that.

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>

0

331

JQuery dialog not displaying content on upgrade to Bootstrap 4

1 answers

0

Find remote jobs

Andres GPT