Add jquery ui css

Question

I want to use the jquery ui, but I'm missing the css in below environment:

$.ajax({
  url: '//code.jquery.com/ui/1.12.1/jquery-ui.js',
  dataType: 'script',
  cache: true,
  success: function() {
  $( "#dialog" ).dialog();
  }
});

$( "body" ).append('<div id="dialog" title="Basic dialog"><p>test</p></div>');

Believe I'm missing this part:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

How can I use the style from the jquery ui framework? Link: https://jqueryui.com/dialog/#default

why are you doing it like that? you can just simply add the stylesheet from the head section. Your confused is very confusing — Roljhon
– Roljhon, Commented Jan 30, 2017 at 14:49
inserting the content through a third party tool that's only based on javascript/jquery — Henrik Baecklund
– Henrik Baecklund, Commented Jan 30, 2017 at 14:53
then you should've stated the reason, so you can get specific answer — Roljhon
– Roljhon, Commented Jan 30, 2017 at 14:58

Manish Poduval · Accepted Answer · 2017-01-30 14:55:02Z

2

In between your <head> </head> tags define the below code and you can use all the functionalities of Jquery UI.

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

An ajax call is made when you want asynchronous communication between your backend and front end. Please remove the ajax call and continue developing your code. Thanks

answered Jan 30, 2017 at 14:55

Manish Poduval

4523 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jeroen · Accepted Answer · 2019-11-22 10:25:24Z

You need to add this <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> into your <head> tag in your HTML file.

Check the documentation: https://jqueryui.com/dialog/#default

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#dialog" ).dialog();
  } );
  </script>
</head>
<body>
 
<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
 
 
</body>
</html>

Ionut Necula · Accepted Answer · 2017-01-30 14:56:51Z

1

You can append the css file to the head tag using appendTo():

$.ajax({
  url: '//code.jquery.com/ui/1.12.1/jquery-ui.js',
  dataType: 'script',
  cache: true,
  success: function() {
    $("#dialog").dialog();
    $("<link/>", {
      rel: "stylesheet",
      type: "text/css",
      href: "//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
    }).appendTo("head");
  }
});

$("body").append('<div id="dialog" title="Basic dialog"><p>test</p></div>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

edited Jan 30, 2017 at 14:56

answered Jan 30, 2017 at 14:53

Ionut Necula

11.6k4 gold badges49 silver badges72 bronze badges

Comments

bruno paiva · Accepted Answer · 2023-08-24 01:31:45Z

0

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#dialog" ).dialog();
  } );
  </script>
</head>
<body>
 
<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
 
 
</body>
</html>

answered Aug 24, 2023 at 1:31

bruno paiva

11 bronze badge

1 Comment

Heri Hehe Setiawan Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Add jquery ui css

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related