我正在尝试将 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'>
<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>