CODEWITHSUNDEEP
jqueryjquery-ui
Scott C Wilson
Scott C Wilson

Reputation: 20016

jQuery dialog shows up undecorated

My jQuery callback is firing correctly, but the the dialog looks completely bare (see image). Here's my javascript:

$(".info").click(function(event){
    event.preventDefault();
    $id = $(this).attr("id");
    $.ajax({
           type: "POST",
           url: 'my_code.php',
           data: {query:"info", rowid: $id},
           success: function(data) {
                try {
                   obj = JSON.parse(data);
                   var str = '';
                   for (var i in obj) {
                       str += i + ":" + obj[i] + "<br />";
                   }
                   $("#dialog-1").html(str).dialog({modal: true}).dialog('open');
                } catch (e) {}
           }
        });
});

and my HTML is just 

<div id="dialog-1" title="Rule Information" style="display:none"></div>

but you can see my poor dialog looks threadbare! I know I could dress it up with css but what is causing it to look this way? enter image description here

Upvotes: 0

Views: 58

Answers (1)

Dhiraj
Dhiraj

Reputation: 33618

As you can see here jQuery UI comes with a javascript file and a css file. If the css file is not used, the components will look threadbare.

jQuery UI Without CSS

enter image description here

function fnOpenNormalDialog() {
  $("#dialog-confirm").html("Confirm Dialog Box");

  $("#dialog-confirm").dialog({
    buttons: {
      "Yes": function() {
        $(this).dialog('close');
        callback(true);
      },
      "No": function() {
        $(this).dialog('close');
        callback(false);
      }
    }
  });
}

$('#btnOpenDialog').click(fnOpenNormalDialog);

function callback(value) {
  if (value) {
    alert("Confirmed");
  } else {
    alert("Rejected");
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<input type="button" id="btnOpenDialog" value="Open Confirm Dialog" />
<div id="dialog-confirm" style="display:none"></div>

jQuery UI With CSS

enter image description here

function fnOpenNormalDialog() {
  $("#dialog-confirm").html("Confirm Dialog Box");

  $("#dialog-confirm").dialog({
    buttons: {
      "Yes": function() {
        $(this).dialog('close');
        callback(true);
      },
      "No": function() {
        $(this).dialog('close');
        callback(false);
      }
    }
  });
}

$('#btnOpenDialog').click(fnOpenNormalDialog);

function callback(value) {
  if (value) {
    alert("Confirmed");
  } else {
    alert("Rejected");
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<input type="button" id="btnOpenDialog" value="Open Confirm Dialog" />
<div id="dialog-confirm" style="display:none"></div>

Upvotes: 1

Related Questions