Hi! I've recently updated the jquery-ui library and the style package from 1.8.4 to 1.8.18 and i've noticed a change in behavior: if i open a dialog and then change its contents with an ajax request the dialog no longer resizes to encompass the new content.
With 1.8.4 it correctly changed its height to show the new content, with 1.8.18 it keeps the same height and shows the scrollbar.
I browsed the release-notes of each version between 1.8.4 and 1.8.18 and it says they actually removed the autoResize option defaulting it to auto (which i never used anyway) and fixed another couple of bugs about the dialog widget.
Firefox and IE7+ works ok, but i couldn't find a way to make it work on IE6.
Does anybody else have the problem? Is there anything i can try?
Thanks in advance for your help.
Marcello
EDITI created a page with the bare essentials, removing everything but the dialog and the javascript code to append text inside it.
Everything stands: FF+Chrome work, IE6 doesn't.
Is it possibly an untracked bug?
Here's the simplified code:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
- <link rel="stylesheet" type="text/css" href="jquery-ui.css" media="screen" />
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
- <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
- <script type="text/javascript">
- <!--
- $(function(){
- $('#insertDialog').dialog({
- autoOpen: true,
- buttons: {
- "Add": function() {
- $("#testo").append("Lorem ipsum dolor sit amet, consectetur adipiscing elit. ");
- }
- }
- });
- });
- -->
- </script>
- <title>Untitled Document</title>
- </head>
- <body>
- <div id="insertDialog">
- <p id="testo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ante lacus, laoreet ornare posuere vel, dapibus at est. Nulla ac leo non diam varius mollis.</p>
- </div>
- </body>
- </html>
The code for the dialog is pretty simple:
- $('#insertDialog').dialog({
- autoOpen: false,
- width: 400,
- minwidth: 400,
- bgiframe: true,
- closeOnEscape: true,
- resizable: false,
- title: "Aggiungi",
- modal: true
- });
(i tried to set resizable both TRUE and FALSE, to no avail)
- <div id="insertDialog" title="" class="hidden">
- <form id="insertForm" action="main" method="get">
- <table>
- <tfoot>
- <tr><td colspan="2"> </td></tr>
- <tr>
- <td style="text-align: right;" colspan="2">
- <input name="annulla" type="button" value="${ml.bottoneAnnulla}" class="rounded_grey" onclick="$('#insertDialog').dialog('close');" />
- <input name="conferma" type="button" onclick="doCheckInsert();" value="${ml.bottoneConferma}" class="rounded" />
- </td>
- </tr>
- </tfoot>
- <tbody>
- <tr>
- <td class="label"><label for="barcodeIni">${ml.primaCarta}</label>:</td>
- <td><input type="text" name="barcodeIni" id="barcodeIni" size="40" maxlength="31" class="textfield" onchange="isNumber(this);getCardsData($('#progressivoItemInsert').val());" tabindex="1" /></td>
- </tr>
- <tr>
- <td class="label"><label for="barcodeFine">${ml.secondaCarta}:</label></td>
- <td><input type="text" name="barcodeFine" id="barcodeFine" size="40" maxlength="31" class="textfield" onchange="isNumber(this);getCardsData($('#progressivoItemInsert').val());" tabindex="2" /></td>
- </tr>
- <tr>
- <td colspan="2">
- <input type="hidden" name="FUNCTIONID" value="InserimentoItemStornoRicarica" />
- <input type="hidden" name="progressivoItem" id="progressivoItemInsert" value="" />
- <input name="crea" type="button" value="${ml.verifica}" class="rounded" onclick="getCardsData($('#progressivoItemInsert').val());" />
- </td>
- </tr>
- <tr><td colspan="2"> </td></tr>
- <tr><td colspan="2"><span id="messaggioErrore" class="warning"></span></td></tr>
- <tr><td colspan="2"> </td></tr>
- </tbody>
- </table>
- </form>
- </div>
and this is the snippet of javascript code that sets the content of the "messaggioErrore" div to show an error message:
- $.ajax({
- type: sType,
- url: "main",
- data: sData,
- contentType: "application/x-www-form-urlencoded;charset=UTF-8",
- dataType: "xml",
- success: function(xml){
- if ($(xml).find("risultato").text()=="OK"){
- submittable = true;
- $('#progressDialog').dialog('close');
- } else if ($(xml).find("risultato").text()=="SE"){
- document.location.href="main?FUNCTIONID=Login&MSG1=${ml.IDMSG_ErrorMessageIntro}&MSG2=${ml.IDMSG_SessioneScaduta}";
- } else {
- submittable = false;
- $('#progressDialog').dialog('close');
- $('#messaggioErrore').html($(xml).find("ERRMSG1").text());
- }
- },
- error: function(){
- // KO per problemi ajax
- document.location.href="main?TEMPLATE_ERROR=PageError&MSG1=${ml.erroreGenerico} Ajax";
- }
- });