当我在其中组合JQuery对话框和JQuery选项卡时，我的表单不能正常工作

Question

我正在尝试将JQuery对话框与两个JQuery选项卡结合使用。我在对话框添加表单中的选项卡列表中添加了一个选项卡。没有标签的那种形式做得很好。我可以改变我想要的东西并保存。但是当我介绍标签时，它停止工作。即使Firefox选择框工作，该按钮仍然有效（在Chrome上没有）。唯一的问题是textarea就像readonly我无法改变任何东西。 这是第一个对话框的代码：

$(function() {
    $( "#dialog:ui-dialog" ).dialog( "destroy" );
    $( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 400,
        width: 750,
        modal: true,
        draggable:true,
        buttons: {
             Salva: function() { 
                var save = false;

                if(document.getElementById("sr_id_state").value==18 || document.getElementById("sr_id_state").value==20){
                    onClick:if(confirm('Archiviazione definitiva?')){ save = true; }
                } else {
                    save = true;
                }                
                if (save){
                $.ajax({
                        url: 'agendaRichiamoSaveJson.do',
                        type: "POST",
                        dataType: "json",
                        data: $("#dialogform").serialize(),
                        success: 
                            function(result) {
                            if (result.esito!='OK') {
                                alert(result.esito + ' ' + result.message);  
                            } else {
                                doUpdate( $('#agr_id').val() , $('#agr_date').val(), $('#agr_id_patient').val(), $('#agr_id_performance').val(), $('#agr_id_appointment').val(),
                                        $('#agr_performed').val(), $('#agr_id_state').val(), $('#agr_notes').val(), $('#agr_user_changes').val(), $('#agr_date_changes').val(), $('#a_name').val(), $('#a_surname').val(), $('#a_telefono').val(), $('#idMedico').val());

                                alert('Salvataggio completato!');
                                $("#newTable").flexReload();
                                $( "#dialog-form" ).dialog( "close" );
                            }
                        }, error:function (xhr, ajaxOptions, thrownError){ alert(xhr.status); alert(thrownError);} });  }

            },Annula : function() { $( this ).dialog( "close" ); }
        }});
    $( "#dialog-form" ).dialog({ closeText: ''  });
});

我添加了这个以启用标签：

$(function() {$( "#tabs" ).tabs();});

这是该对话框的HTML和内部标签：

<div id="dialog-form" title="Gestione Richiami" class="notThere" style = "overflow: hidden; z-index: 9999;" >
<div>
    <div id="tabs">
        <ul>
            <li><a href="#tabs1">Gestione Richiami</a></li>
            <li><a href="#tabs2">Prossimi Appuntamenti</a></li>
        </ul>
        <div id="tabs1">

  <form id="dialogform" action="agendaRichiamoSaveJson.do"  >
    <input type="hidden" name="azione" id="idAzione" value="update"  />
    <input type="hidden" name="agr_id" id="agr_id" value=""  />
    <input type="hidden" name="agr_id_patient" id="agr_id_patient" value=""  />
    <input type="hidden" name="idMedico" id="idMedico" value=""  />
    <fieldset>
    <br><br>
       <table>
            <tr>
                <td><label for="a_surname" >Paziente</label></td>
                <td><input type="text" size="80" name="a_surname" id="a_surname" class="text ui-widget-content ui-corner-all" readonly="readonly" /></td>
            </tr>
            <tr>
                <td><label for="agr_date" >Data</label></td>
                <td><input type="text" size="10" name="agr_date" id="agr_date" class="text ui-widget-content ui-corner-all" readonly = "readonly"/></td>
                <td id='tele'><label for="a_telefono" >Telefono</label></td>
                <td id='tele2'><input type="text" size="10" name="a_telefono" id="a_telefono" class="text ui-widget-content ui-corner-all" readonly = "readonly"/></td>
                <td id='tele3'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <button type="button" class="operactive-button green" onClick="javascript:myPreloadPaz()" title="Apri agenda">
                        <img width="16" height="16" src="base/images/icons/fugue/tick-circle-blue.png">
                        Agenda
                    </button>
                </td>
            </tr>
            <tr><td></td><td><br></td></tr>
            <tr >
                <td><label for="sr_id_state">Stato</label></td>
                <td><select name="sr_id_state" id="sr_id_state" class="text ui-widget-content ui-corner-all"   
                        size="1">
                    <c:forEach var="item" items="${elencoStatoRigaDocumento}" >
                        <c:if test="${item.idTipoDocumento=='8' && item.idUtenteInvalidaz==-1}">    
                            <option  selected value="${item.idStatoRiga}"><c:out value="${item.descrizione}" /></option>
                        </c:if>
                    </c:forEach>
                </select></td>
            </tr>
            <tr>
                <td><label for="agr_notes">Nota</label></td>
                <td><textarea rows="4" cols="80" maxlength="250" name="agr_notes" id="agr_notes" onblur="clearChar(this)" class="text ui-widget-content ui-corner-all"></textarea></td>
            </tr>
        </table>
    </fieldset>
  </form>
        </div><div id="tabs2">sdsfs</div>
</div>
</div>
</div>