Jquery-Ajax: No muestra Datepicker en TextBox

Huacho12 · #1 (**permalink**) 19/07/2012, 12:27

Buenas tardes a tooooood@sss!!!! los foreros!!!!

Aqui de nuevo despues de un buen tiempo de ausencia!!!!!!!!

Bueno estoy haciendo una pagina en la cual en el Index cuento con un Menu (este menu no es con jquery) en el cual dependiendo de la opcion que elija me abre una pagina dentro de un DIV mediante AJAX....... en una de las paginas tengo un campo tipo TEXT en el cual a travez del ID mando a llamar al DATEPICKER de JQUERY.........................El problema esta en que No0o lo hace

y ya llevo un buen rato y no mas no!!!!!!

Aqui el codigo (simplificadisisisimo):

index.html

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script>
<script type="text/javascript" // Datepicker
	$(function(){

			$('#datepicker').datepicker();
            });
</script>
</head>

<body onload="llamapagina('prueba.html','contenedor')">
Este el TXT que se llama de otra pagina con ajax:
<div id="contenedor"></div>
</body>
</html>

Cuando esta pagina index.html se cargue, mada a llamar a prueba.html con la funcion de ajax "llamapagina()"

Pagina prueba.html:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
</head>

<body>
<form name="frm1">
<input type="text" id="datepicker" size="11" />
</form>
</body>
</html>

De antemano muchas gracias por su valiosa ayuda!!!!!

maycolalvarez · #2 (**permalink**) 19/07/2012, 14:24

1 - ¿donde está la función llamapagina('prueba.html','contenedor')?

2 - recuerda que los elementos de ajax se agregan en el futuro, por lo tanto cuando asignas el datepicker el objeto no está en el DOM, ni que uses el DOM ready, debes de asignar el datepicker al momento en que sea parte del DOM y es cuando te llegue la respuesta ajax, o usas jQuery Live

Huacho12 · #3 (**permalink**) 19/07/2012, 14:34

Hola maycolalvarez!!!

Muchas gracias por contestar......

Esa funcion esta en un archivo de javascript en el cual tengo el sig codigo:

Código:

var XMLHttRequestObj = false;

try
{
	XMLHttRequestObj = new ActiveXObject("Msxml2.XMLHTTP");

}catch(e)
{
	try
	{
		XMLHttRequestObj = new ActiveXObject("Microsoft.XMLHTTP");

	}catch(E)
	{
		XMLHttRequestObj = false;
	}
}

if(!XMLHttRequestObj && typeof(XMLHttpRequest)!= 'undefined' )
{
	XMLHttRequestObj = new XMLHttpRequest();
}

function llamapagina(datos,obj)
{
	if(XMLHttRequestObj)
	{
		var div = document.getElementById(obj);
		XMLHttRequestObj.open("GET",datos);
		
		XMLHttRequestObj.onreadystatechange = function(){
			if(XMLHttRequestObj.readyState == 4 && XMLHttRequestObj.status == 200)
			{
				div.innerHTML = XMLHttRequestObj.responseText;
			}
		}
		
		XMLHttRequestObj.send(null);
	}
}

Con respecto al segundo punto que comentas...mmm...

creo que no entendi!!!................

La pagina de pruba.html al igual que la de index.html estan dentro de la carpeta raiz y la de javascrip desntro de una carpeta "scriptsjs"

De antemano muchas gracias por la ayuda!!!!

maycolalvarez · #4 (**permalink**) 19/07/2012, 14:44

1 - no entiendo para que implementar AJAX a mano si jQuery tiene un wrapper excelente

2 - recuerde que AJAX es asincrono, y cuando establece el elemento #datepicker al inicio NO existe dicho elemento porque NO se ha enviado la petición AJAX, dicho elemento en ése momento NO se ha agregado al DOM, por lo tanto no tiene el "datepicker", el momento justo para agregarlo es cuando Sea Añadido al DOM, no antes

Consulte un manual de AJAX, DOM

Huacho12 · #5 (**permalink**) 19/07/2012, 14:57

Utilizo el AJAX ya que no encontre la manera de como modificar la funcion de AJAX que ya viene con el JQUERY, para asignarla a un div en especifico........

La prueba que te comento la hice con los TABS de JQUERY................ y en ese ejemplo si me funciono el datepicker..........

Del ejemplo que te mencione me base de este link:

http://jqueryui.com/demos/tabs/#ajax

Me podrias ayudar con alguna funcion que se asemeje con lo que te menciono?????

De antemano muchas gracias por tu ayuda!!!!

maycolalvarez · #6 (**permalink**) 20/07/2012, 06:44

pero si la tiene:

Código Javascript:

Ver original$.ajax({success: function(data) {
   //este es el onreadystatechange + (status == 200 && readyState == 4)
}})

consulte la API de jQuery

Huacho12 · #7 (**permalink**) 21/07/2012, 09:58

Hola maycolalvarez!!!

Perdon por la molestia!!! pero ya quite el codigo que estaba utilizando de AJAX y ahora paso a utilizar la que JQUERY proporciona .............................

y aun no logro que me muestre el calendario del datepicker!!!!

tengo un archivo JS dentro de la carpeta scripts llamado "_jsccript.js":

Código Javascript:

Ver original$(function(){
 
/*$('#idSubMenuOpc21').click(function()
    {  
            alert("Click");
    });*/
    
    // Datepicker
    $('#datepicker').datepicker(
    {
            inline: true
    });
                
    $('#idSubMenuOpc21').click(function() {  
        $.ajax({  
            url: 'fac/registro.php',
            async:true,  
            success: function(data) {  
                $('#divContPrincipal').html(data);  
            }  
        });  
    });
    
});

y el index.html tengo:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HandBall</title>

<link type="text/css" href="estilos/trontastic/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
<script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="scripts/_jsccript.js"></script>
</head>
<!---->
<body>

<div id="idSubMenuOpc21">Mostrar Registro FAC</div>
<br/><br/><br/>
<div id="divContPrincipal"></div>
</body>
</html>

Y en la carpeta fac/registro.php:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>FAC</title>

</head>

<!---->

<body>

 
<form name="wdfw">

<input type="text" id="datepicker" />

</form>

</body>

</html>

Espero me puedes ayudar!!!! porfavor!!!!!

maycolalvarez · #8 (**permalink**) 21/07/2012, 10:29

Ya le indique anteriormente que ni le va a resultar porque el objeto al cual le asigna el datepicker NO existe sino hasta ser agregado al DOM desde AJAX , obviamente sí desconoce como funciona el DOM respecto a AJAX tiene que documentarse al respecto, ya le había indicado que el momento de asignar el calendario es después de añadir el elemento al DOM, eso quiere decir después de la línea

$('#divContPrincipal').html(data);

O usar jQuery live

Por favor un poco más de atención a lo que a le indica!

Huacho12 · #9 (**permalink**) 21/07/2012, 15:37

Hola maycolalvarez!!!!!

Creo que al fin entendi a lo que se referia con "asignar el calendario es después de añadir el elemento al DOM"............ Creo que en si esa traduccion para mi seria algo como esto: "El datepicker que quiere mostrar no lo hara si no hasta despues de haber mostrado el control del text en la pagina web, por lo que primero tendria que mostrar el control en la pagina y luego asignar la funcion de JQUERY que le mostraria el datepicker" o algo asi!!!!

............. al fin ya me mostro el calendario del datepicker!!!!!!!

Mil disculpas por la molestia que le cause!!!! lo siento!!! creo que como dices me tendre que informar sobre las cosas que quiero implementar al momento de programar!!!!!!!!!.........

Muchisimas gracias por su ayuda!!!!

davidarkofficial · #10 (**permalink**) 26/12/2012, 14:49

Buen dia disculpa, podrias poner el codigo para ver como te funciona??