0

I'm trying to change dynamically the content of a dialog, but when I change to content, the layout is changed.

Basically, I have a ... that I took from the jquery-ui demo and want to change the content of a

    ...
using html();

here my HTML

<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>
    <br />

    <ul id="suggestions0">
        <li id="suggestion0-0" class="suggestion">BLO</li>
        <li id="suggestion0-1" class="suggestion">BLU</li>
        <li id="suggestion0-2" class="suggestion">BLL</li>
            <li id="suggestion0-3" class="suggestion">BOO</li>
    <li id="suggestion0-4" class="suggestion">CLA</li>
    </ul>
    <div id="footer">
        <span id="manual-0" class="manual">MANUAL</span><span id="next-0" class="next">Next</span>
    </div>
    <br />
</div>

That's the plan dialog that I want to show.

I have 2 buttons, if we click on OK, it will just show the current dialog without modification, and the important part is that the "li" elements are on 2 lines

like

BLO BLU BLL BOO CLA XXX ....

but when I change the content dynamically, the "li" elements became aligns on one line instead of 2 are more.

I'm trying to figure out what I did wrong.

here the HTML for the click

<body>

    <?prettify lang=java linenums=false?>
    <pre class='prettyprint' >
        <code>
            <span class="highlightOK" id="highlight-0">OK</span>***********************<span class="highlightNOTOK" id="highlight-1">NOT OK</span>

</body>

$('span.highlightOK').click(function() {
    setTimeout(function(){ $( "#dialog" ).dialog(); }, 100);;

});

$('span.highlightNOTOK').click(function() {

    $("#suggestions0").html("<li id='test0-1' class='suggestion'>BLO</li><li id='test0-2' class='suggestion'>BLO</li><li id='test0-3' class='suggestion'>BLO</li><li id='test0-4' class='suggestion'>BLO</li><li id='test0-5' class='suggestion'>BLO</li><li id='test0-6' class='suggestion'>BLO</li>");

    setTimeout(function(){ $( "#dialog" ).dialog(); }, 100);;

});

I have here a live demo http://jsfiddle.net/survivant/cyFxp/

Sebastien Dionne
  • 757
  • 2
  • 19
  • 34

1 Answers1

0

It seems that adding line breaks between the li elements to the dynamic html solves this

$("#suggestions0").html("<li id='test0-1' class='suggestion'>BLO</li>\n<li id='test0-2' class='suggestion'>BLO</li>\n<li id='test0-3' class='suggestion'>BLO</li>\n<li id='test0-4' class='suggestion'>BLO</li>\n<li id='test0-5' class='suggestion'>BLO</li>\n<li id='test0-6' class='suggestion'>BLO</li>");

http://jsfiddle.net/Qjbb3/

Nate
  • 651
  • 4
  • 7
  • Oh boy, it's that stupid :) I'll go with that solution. Still curious to know why it didn't work. – Sebastien Dionne Apr 04 '13 at 22:49
  • Seems it is an html formatting issue. For example, if you put `testtest2` you will get _testtest2_ but if you do `test test2` you will get _test test2_ There is probably another way to handle it with css, but this seemed an easy enough fix – Nate Apr 04 '13 at 22:53