Foros del Web » Programando para Internet » Jquery »

problema con form dialog con jquery ui y datepicker

 Estas en el tema de problema con form dialog con jquery ui y datepicker en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 06/04/2009, 10:39
 
Fecha de Ingreso: febrero-2003
Ubicación: La serena
Mensajes: 144
Antigüedad: 21 años, 10 meses
Puntos: 0
Mensaje problema con form dialog con jquery ui y datepicker
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&deg; Inf. An&aacute;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&deg; 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">&nbsp;</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">&nbsp;</td>
    <td nowrap="nowrap">&nbsp;</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&deg; 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">&nbsp;</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">&nbsp;</td>
    <td nowrap="nowrap" bgcolor="#FFFFCC">&nbsp;</td>
    <td nowrap="nowrap" bgcolor="#FFFFCC">&nbsp;</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">&nbsp;</td>
    <td nowrap="nowrap">&nbsp;</td>
    <td nowrap="nowrap">&nbsp;</td>
    <td nowrap="nowrap" bgcolor="#FFFFCC">&nbsp;</td>
    <td nowrap="nowrap" bgcolor="#FFFFCC">&nbsp;</td>
    <td nowrap="nowrap" bgcolor="#FFFFCC">&nbsp;</td>
  </tr>
  <tr>
    <td nowrap="nowrap">N&deg; 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">&nbsp;</td>
    <td nowrap="nowrap" bgcolor="#FFFFCC">&nbsp;</td>
    <td nowrap="nowrap" bgcolor="#FFFFCC">&nbsp;</td>
  </tr>
  <tr>
    <td nowrap="nowrap">N&deg; 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
__________________
Hoy dia aprendí algo nuevo.
  #2 (permalink)  
Antiguo 06/04/2009, 11:05
Avatar de GatorV
$this->role('moderador');
  
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años, 6 meses
Puntos: 2135
Respuesta: problema con form dialog con jquery ui y datepicker
Tema trasladado desde AJAX
  #3 (permalink)  
Antiguo 06/04/2009, 13:22
 
Fecha de Ingreso: febrero-2003
Ubicación: La serena
Mensajes: 144
Antigüedad: 21 años, 10 meses
Puntos: 0
Respuesta: problema con form dialog con jquery ui y datepicker
ya me di cuenta por que no me entregaba los valores a la tabla. no havia puesto el val.

lo tenia asi:
Código: 
var_n_inf_ss
y debía ser asi:
Código: 
var_n_inf_ss.val()
aun sigo sin solucionar lo de los dattepicker (calendarios)
__________________
Hoy dia aprendí algo nuevo.
  #4 (permalink)  
Antiguo 13/05/2009, 11:49
 
Fecha de Ingreso: mayo-2009
Mensajes: 1
Antigüedad: 15 años, 7 meses
Puntos: 0
Respuesta: problema con form dialog con jquery ui y datepicker
Hola,

Yo modifiqué mi css para que contemplara el z-order del diálogo y de los calendarios

.ui-dialog { position: relative; padding: .2em; width: 300px; z-index:8888; }

.ui-datepicker { width: 17em; padding: .2em .2em 0; z-index:9999; }

Espero les sirva,

Saludos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 22:52.