CODEWITHSUNDEEP
jquerycssajaxjquery-ui
Henrik Baecklund
Henrik Baecklund

Reputation: 43

Add jquery ui css

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

Upvotes: 1

Views: 13299

Answers (4)

bruno paiva
bruno paiva

Reputation: 1

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

Upvotes: 0

Jeroen
Jeroen

Reputation: 1166

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>

Upvotes: 2

Ionut Necula
Ionut Necula

Reputation: 11472

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>

Upvotes: 1

Manish Poduval
Manish Poduval

Reputation: 452

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

Upvotes: 2

Related Questions