jQueryUI dialog doesn't look right (missing styling?)

Question

I have IE 11 and I am trying to open a dialog box with the click of a button but the dialog box which is opening is not what I want. It doesn't have a close icon and the layout is also very poor.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="//malsup.github.com/jquery.form.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<td class="tdx" bgcolor="#CCCCCC" id="sol" style="background-color:white;border-style:ridge;white-space: pre-wrap">
    <div class="dialog">
        <p style="white-space: pre-wrap"><%=solution%></p>
    </div>
    <button class="opener">Open Dialog</button>
</td>

I have added pre-wrap everywhere but the text seems to come in a single line. The text is properly formatted in the database.

JQuery code :

$('.opener').each(function() {
    var dialog = $(this).prev('.dialog').dialog({
        autoOpen: false,
        show: {
            effect: "blind",
            duration: 1000
        },
        hide: {
            effect: "explode",
            duration: 1000
        }
    });

    $(this).click(function () {
        dialog.dialog("open");
        });
    });
});

I might know what's going on: **versionitis**. See my new answer below. — cssyphus, Jul 27 '15 at 20:35

score 1 · Accepted Answer · edited May 23 '17 at 12:23

Ah Ha... I re-read your question and I think I understand the problem you are seeing.

jQuery UI dialogs require (1) the jQuery UI css reference, AS WELL AS (2) the jQuery UI code, AS WELL AS (3) plain ol' jQuery.

Equally important, you need to match the versions. When the versions do not match (especially when jQUI and the css for jQUI are for different versions), buttons will be out of alignment, borders will be missing, the whole appearance is whacked. You have version-itis (note: -itis is Latin suffix for pain).

Suggestion:

Remove all references to jQuery/jQuery UI in your code and add the following lines inside the <head> tags of your page:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/flick/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

This will give you a version of jQuery / jQueryUI / css that are known to work together. If it works, you can even stick with it.

Reference:

Matching jQuery and jQuery-UI versions

this is definately the issue .. but the above versions still don't work ..maybe some other versions will work — amol singh, Jul 28 '15 at 04:22

bwright · Answer 2 · 2015-07-27T14:09:29.190

Here is a code that should work:

 
  <title>jQuery UI Dialog - Animation</title>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });
 
    $( "#opener" ).click(function() {
      $( "#dialog" ).dialog( "open" );
    });
  });
  </script>

<body>
    <table>
        <tr>
            <td class="tdx" bgcolor="#CCCCCC" id="sol" style="background-color:white;border-: ;style:ridge;white-space: pre-wrap">
                <div id="dialog" title="Basic dialog">
                     <%=solution%>
                </div>
 
                <button id="opener">Open Dialog</button>
            </td>
            </tr>
        </table>

http://fiddle.jshell.net/0n4exLq8/

as for the formatting problem, it looks like you have linebreaks in your DB which html will not be able to render. You will have to format the string on the server side (replace \n with <br />) or better yet convert it to a <ol>

but how do i add so many `
` , btw , its working fine when this is fetched in `textarea` — amol singh, Jul 27 '15 at 14:21
textarea is a bit more flexible when it comes to formating. guessing you are using php try 'nl2br()': http://php.net/nl2br — bwright, Jul 27 '15 at 14:23

score 0 · Answer 3 · answered Jul 27 '15 at 13:44

It dosen't have a close icon and the layout is also very poor

I've just test your example, it's worked perfectly in IE 11.

HTML:

<div class="dialog">
    <p style="white-space: pre-wrap">123123123</p>
</div>

<button class="opener">Open Dialog</button>

JS:

$('.opener').each(function(){
    var dialog = $(this).prev('.dialog').dialog({
        autoOpen: false,
        show: {
            effect: "blind",
            duration: 1000
        },
        hide: {
            effect: "explode",
            duration: 1000
        }
    });

    $(this).click(function () {
        dialog.dialog("open");
    });

});

added the image to show the dialog box i am getting – amol singh Jul 27 '15 at 13:56 — amol singh, Jul 27 '15 at 13:56

cssyphus · Answer 4 · 2015-07-27T15:08:53.767

0

There is a simpler way to work with jQueryUI dialogs.

You only need one dialog, and just re-use it.

First, it is important to understand how a jQUI dialog works. You "assign" an element (a div) to the dialog when you initialize it:

$('#msg').dialog();

Thereafter, whenever you call the dialog's open method

$('#msg').dialog('open');

the dialog is displayed with the contents of that div.

To change the contents of the dialog, just change the contents of that div:

$('#msg').html('<p>Here is some totally new information</p>');
$('#msg').dialog('open');

In your program, all you need to do when a button is pressed is to grab the data (either via ajax, or from the cell next door, or whereever) and stick it into the dialog's div, then open the dialog.

When you close the dialog, it is a good idea to clear the div as well:

$( "#dialog" ).dialog({
  autoOpen: false,
  show: {
    effect: "blind",
    duration: 1000
  },
  close: {
    effect: "explode",
    duration: 1000,
    function(){
       $('#msg').html('');
    }
  }
});

jsFiddle Demo

edited Jul 27 '15 at 15:08

answered Jul 27 '15 at 14:37

cssyphus

37,875
18
96
111

i am getting the functionality but formatting and layot is damn poor – amol singh Jul 27 '15 at 14:40
Format your div. Whatever HTML/CSS formatting you do to the jQUI div contents will be displayed in the dialog. There is nothing magical going on -- the jQUI dialog just displays the contents of the assigned div *exactly* as they are. – cssyphus Jul 27 '15 at 15:01
@amolsingh In fact, your job will be easier if you forget about the dialog for a moment. Create a visible div, `
` and when user presses a button, get the desired data and stick it into the `mytest` div. Parse the data, format it as desired, make it look exactly as you want each time a button is pressed. *(Remember, for testing, that div is visible)* Then, initialize the jQUI dialog with that div: **`$('#mytest').dialog({autoOpen:false, etc etc});`** and I guarantee you will be happy with the result. – cssyphus Jul 27 '15 at 15:13

jQueryUI dialog doesn't look right (missing styling?)

4 Answers4