Maestros, estoy llamando un formulario con la opción dialog de jqueryui, además estoy usando datepicker de el mismo frameworks. El problema es que los calendarios se despligan debajo del div que muestra el formulario.
este es mi js.
Código:
<script type="text/javascript">
$(function() {
/*estos son los calendarios calendarios*/
$("#text_fecha_inv").datepicker({dateFormat: 'dd/mm/yy'});
$("#text_fec_acta_ss").datepicker({dateFormat: 'dd/mm/yy'});
$("#text_fec_inf_ss").datepicker({dateFormat: 'dd/mm/yy'});
$("#text_fec_inf_ss").datepicker({dateFormat: 'dd/mm/yy'});
$("#text_fec_of_remisor_ss").datepicker({dateFormat: 'dd/mm/yy'});
$("#text_fec_oficio_isp").datepicker({dateFormat: 'dd/mm/yy'});
$("#text_fec_protocolo_isp").datepicker({dateFormat: 'dd/mm/yy'});
$("#text_fec_of_remisp").datepicker({dateFormat: 'dd/mm/yy'});
$("#text_fec_sistprior").datepicker({dateFormat: 'dd/mm/yy'});
/***********************************************************************************/
/*estas son las variables que traen los valores de los cuadros de texto/*
var
var_n_inf_ss = $("#text_n_inf_ss"),
var_fec_inf_ss = $("#text_fec_inf_ss"),
var_of_remisor_ss = $("#text_of_remisor_ss"),
var_fec_of_remisor_ss= $("#text_fec_of_remisor_ss"),
var_n_of_remisp = $("#text_n_of_remisp"),
var_fec_of_remisp = $("#text_fec_of_remisp"),
var_fec_sistprior = $("#text_fec_sistprior"),
var_n_protocolo_isp = $("#text_n_protocolo_isp"),
var_fec_protocolo_isp= $("#text_fec_protocolo_isp"),
var_n_oficio_isp = $("#text_n_oficio_isp"),
var_fec_oficio_isp = $("#text_fec_oficio_isp"),
allFields = $([]).
add(var_n_inf_ss).
add(var_fec_inf_ss).
add(var_of_remisor_ss).
add(var_fec_of_remisor_ss).
add(var_n_of_remisp).
add(var_fec_of_remisp).
add(var_fec_sistprior).
add(var_n_protocolo_isp).
add(var_fec_protocolo_isp).
add(var_n_oficio_isp).
add(var_fec_oficio_isp);
//tips = $("#validateTips");
function updateTips(t) {
tips.text(t).effect("highlight",{},1500);
}
function checkLength(o,n,min,max) {
if ( o.val().length > max || o.val().length < min ) {
o.addClass('ui-state-error');
updateTips("Length of " + n + " must be between "+min+" and "+max+".");
return false;
} else {
return true;
}
}
function checkRegexp(o,regexp,n) {
if ( !( regexp.test( o.val() ) ) ) {
o.addClass('ui-state-error');
updateTips(n);
return false;
} else {
return true;
}
}
$("#dialog").dialog({
bgiframe: true,
autoOpen: false,
height: 350,
width: 800,
modal: true,
stack: true,
buttons: {
'Grabar informe': function() {
/*aqui mando los datos a llenarse en una tablita.*/
$('#tabla_informes tbody').append('<tr>' +
'<td>' + var_n_inf_ss + '</td>' +
'<td>' + var_fec_inf_ss + '</td>' +
'<td>' + var_of_remisor_ss + '</td>' +
'<td>' + var_fec_of_remisor_ss + '</td>' +
'<td>' + var_n_of_remisp + '</td>' +
'<td>' + var_fec_of_remisp + '</td>' +
'<td>' + var_fec_sistprior + '</td>' +
'<td>' + var_n_protocolo_isp + '</td>' +
'<td>' + var_fec_protocolo_isp + '</td>' +
'<td>' + var_n_oficio_isp + '</td>' +
'<td>' + var_fec_oficio_isp + '</td>' +
'</tr>');
$(this).dialog('close');
},
Cancela: function() {
alert(var_n_inf_ss);
$(this).dialog('close');
}
},
close: function() {
allFields.val('').removeClass('ui-state-error');
}
});
$('#crea-informe').click(function() {
$('#dialog').dialog('open');
})
.hover(
function(){
$(this).addClass("ui-state-hover");
},
function(){
$(this).removeClass("ui-state-hover");
}
).mousedown(function(){
$(this).addClass("ui-state-active");
})
.mouseup(function(){
$(this).removeClass("ui-state-active");
});
/***********************************************************************************/
});
</script>
y la pagina tendria el siguiente div,.
Código:
<!-- desde aqui se cargaran los informes -->
<div id="dialog" title="Ingreso de Informes">
<table width="100%" border="0" cellspacing="2">
<tr>
<td nowrap="nowrap">N° Inf. Análisis S.S. </td>
<td nowrap="nowrap">:</td>
<td nowrap="nowrap"><input name="text_n_inf_ss" type="text" id="text_n_inf_ss" size="14" /></td>
<td nowrap="nowrap">Fec. Informe </td>
<td nowrap="nowrap">:</td>
<td nowrap="nowrap"><input name="text_fec_inf_ss" type="text" id="text_fec_inf_ss" size="14" /></td>
<td colspan="3" nowrap="nowrap" bgcolor="#FFFFCC"><em><strong>Ayuda</strong></em></td>
</tr>
<tr>
<td nowrap="nowrap">N° Of. Remisor </td>
<td nowrap="nowrap">:</td>
<td nowrap="nowrap"><input name="text_of_remisor_ss" type="text" id="text_of_remisor_ss" size="14" /></td>
<td nowrap="nowrap">Fec. Oficio </td>
<td nowrap="nowrap">:</td>
<td nowrap="nowrap"><input name="text_fec_of_remisor_ss" type="text" id="text_fec_of_remisor_ss" size="14" /></td>
<td colspan="3" bgcolor="#FFFFCC"><em>Oficio enviado desde F. Regional a F. Local</em> </td>
</tr>
<tr>
<td nowrap="nowrap">Envia Muesta a I.S.P. </td>
<td nowrap="nowrap"> </td>
<td nowrap="nowrap"><input name="rdb_envioisp" type="radio" value="1" />
Si</td>
<td nowrap="nowrap"><input name="rdb_envioisp" type="radio" value="0" />
No</td>
<td nowrap="nowrap"> </td>
<td nowrap="nowrap"> </td>
<td colspan="3" nowrap="nowrap" bgcolor="#FFFFCC"><em>Envio desde Serv. de Salud a I.S.P</em> </td>
</tr>
<tr>
<td nowrap="nowrap">N° of. remisor0 a I.S.P </td>
<td nowrap="nowrap">:</td>
<td nowrap="nowrap"><input name="text_n_of_remisp" type="text" id="text_n_of_remisp" size="14" /></td>
<td nowrap="nowrap">Fec. Oficio </td>
<td nowrap="nowrap"> </td>
<td nowrap="nowrap"><input name="text_fec_of_remisp" type="text" id="text_fec_of_remisp" size="14" /></td>
<td nowrap="nowrap" bgcolor="#FFFFCC"> </td>
<td nowrap="nowrap" bgcolor="#FFFFCC"> </td>
<td nowrap="nowrap" bgcolor="#FFFFCC"> </td>
</tr>
<tr>
<td nowrap="nowrap">Fec. Ing. Sis. Priorizado </td>
<td nowrap="nowrap">:</td>
<td nowrap="nowrap"><input name="text_fec_sistprior" type="text" id="text_fec_sistprior" size="14" /></td>
<td nowrap="nowrap"> </td>
<td nowrap="nowrap"> </td>
<td nowrap="nowrap"> </td>
<td nowrap="nowrap" bgcolor="#FFFFCC"> </td>
<td nowrap="nowrap" bgcolor="#FFFFCC"> </td>
<td nowrap="nowrap" bgcolor="#FFFFCC"> </td>
</tr>
<tr>
<td nowrap="nowrap">N° Protocolo I.S.P. </td>
<td nowrap="nowrap">:</td>
<td nowrap="nowrap"><input name="text_n_protocolo_isp" type="text" id="text_n_protocolo_isp" size="14" /></td>
<td nowrap="nowrap">Fec. Protocolo </td>
<td nowrap="nowrap">:</td>
<td nowrap="nowrap"><input name="text_fec_protocolo_isp" type="text" id="text_fec_protocolo_isp" size="14" /></td>
<td nowrap="nowrap" bgcolor="#FFFFCC"> </td>
<td nowrap="nowrap" bgcolor="#FFFFCC"> </td>
<td nowrap="nowrap" bgcolor="#FFFFCC"> </td>
</tr>
<tr>
<td nowrap="nowrap">N° Of. Remisor a I.S.P. </td>
<td nowrap="nowrap">:</td>
<td nowrap="nowrap"><input name="text_n_oficio_isp" type="text" id="text_n_oficio_isp" size="14" /></td>
<td nowrap="nowrap">Fec. Oficio </td>
<td nowrap="nowrap">:</td>
<td nowrap="nowrap"><input name="text_fec_oficio_isp" type="text" id="text_fec_oficio_isp" size="14" /></td>
<td colspan="3" nowrap="nowrap" bgcolor="#FFFFCC"><em>Oficio enviado desde F. Regional a F. Local</em></td>
</tr>
</table>
</div>
Como les mensioné, tengo el problema que los dattepicker se muestran debajo del div. Ademas se supone que la tabla debería llenarse con los valores de los cuadros de texto, pero se llena con [object Object], al parecer no me esta trayendo el valor de los cuadros de texto.
muchas gracias a los maestros
oajala puedan ayudarme