Llamar función JQuery con PHP usando Ajax (Asincrono)

tryniton · #1 (**permalink**) 26/11/2013, 12:50

Buenos dias Amigos Blogueros...

Resulta que estoy haciendo un pequeña aplicación en PHP y en un pequeño buscador tengo un list para seleccionar que quiero buscar. Cuando selecciono de la lista, este dato a su vez (dependiendo de lo escogido) llama por Ajax (llamarasincrono) un archivo en PHP que muestra en un Div para digitar la información a buscar.
Entre la lista del filtro del buscador tengo, por ejemplo, un dato especifico que puedo escribir en un textbox, un dato de otra lista desplegable, y para digitar una fecha, y eh aquí el problema: La Fecha. Para la seleccion de la fecha, tengo un datepicker en Jquery, el cual funciona perfectamente si lo coloco directamente en mi pagina, pero cuando lo llamo por Ajax (llamarasincrono) solo sale el textbox y no ejecuta el Jquery.

Pongo la parte del codigo de la pagina principal en cuestion:

Código HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
<!--Calendario Inicio -->
<link href="Jquery/css/south-street/jquery-ui-1.10.3.custom.css" rel="stylesheet">
<script src="Jquery/js/jquery-1.9.1.js"></script>
<script src="Jquery/js/jquery-ui-1.10.3.custom.js"></script>
<script src="Jquery/js/jquery.ui.datepicker-es.js"></script>
<script>
$(function() {
$('input').filter('.datepicker').datepicker(
$.extend(
$.datepicker.regional['es'],
{
defaultDate:7,
dateFormat:"yy-mm-dd",
showOn:"both",
}
)
); 
});
</script>
<!-- Calendario Fin -->
<script language="JavaScript" type="text/javascript" src="codigo.js"></script>
<script language="JavaScript">
</head>
<body marginheight="0">
<form action="buscador_NC.php" method="get" name="form1" id="form1" onSubmit="return Validar(this);">
<table width="755" border="0" cellspacing="0">
<tr>
<td colspan="4" background="bk2.jpg" class="Titulo1">Buscador - Formulario de No Conformidad</td>
</tr>
<tr>
<td background="bk.jpg" width="150" class="Titulo2">
<select name="Tipo_Busqueda" id="Tipo_Busqueda" onchange="llamarasincrono('mostrar_buscar_nc.php?Tipo='+document.forms.form1.Tipo_Busqueda[document.forms.form1.Tipo_Busqueda.selectedIndex].value,'Buscar');">
<option value="BUSCAR POR DATO" selected="selected">BUSCAR POR DATO</option>
<option value="FILTRO">FILTRO</option>	
<option value="FECHAS">FECHAS</option>	
</select></td>
<td colspan="3" background="bk.jpg">
<table width="100%">
<tr>
<td width="27%" nowrap="nowrap"><div id="Buscar"> </div></td>
<td width="73%">
<input name="buscar" type="submit" class="BtnBuscar" id="buscar" value="Buscar" />
</td>
</tr>
</table></td>
</tr>
<tr>
<td><a href="index1.php">Regresar</a></td>
<td width="169">&nbsp;</td>
<td width="99">&nbsp;</td>
<td width="329" align="right" class="Contenido"><strong>Mostrar:</strong> <a href="buscador_NC.php?filtro=1">Todos</a> | <a href="buscador_NC.php?filtro=2">Abiertos</a> | <a href="buscador_NC.php?filtro=3">Cerrados</a></td>
</tr>
</table>
</form>
</body>
</html>

Y aqui el codigo de mostrar_buscar_nc.php (La pagina a la que llamo):

Código PHP:

  <?php 
if(isset($_GET['Tipo'])){ 
if ($_GET['Tipo']==""){ 
echo "<input name=\"Buscar_ID\" type=\"text\" id=\"Buscar_ID\" onkeyup=\"this.value=this.value.toUpperCase()\" size=\"25\" value=\"\" />";  
exit(); 
}else{ 
if($_GET['Tipo']!=""){ 
if($_GET['Tipo']=="BUSCAR POR DATO"){ 
echo "<input name=\"Buscar_ID\" type=\"text\" id=\"Buscar_ID\" onkeyup=\"this.value=this.value.toUpperCase()\" size=\"25\" value=\"\" />";  
} 
if($_GET['Tipo']=="FILTRO"){ 
echo "<select name=\"Buscar_ID\" id=\"Buscar_ID\"> 
<option value=\"AUDITORIA EXTERNA\">AUDITORIA EXTERNA</option> 
<option value=\"AUDITORIA INTERNA\">AUDITORIA INTERNA</option> 
<option value=\"RESULTADO DE LOS PROCESOS\">RESULTADO DE LOS PROCESOS</option> 
<option value=\"INDICADORES DE GESTION\">INDICADORES DE GESTION</option> 
<option value=\"QUEJAS Y RECLAMOS DEL CLIENTE\">QUEJAS Y RECLAMOS DEL CLIENTE</option> 
<option value=\"ATENCION Y SERVICIO\">ATENCION Y SERVICIO</option> 
<option value=\"INCIDENTE DE SEGURIDAD\">INCIDENTE DE SEGURIDAD</option> 
<option value=\"PETICIONES DE ENTIDAD CLIENTE\">PETICIONES DE ENTIDAD CLIENTE</option> 
</select>"; 
echo "<select name=\"Buscar_Proceso\" id=\"Buscar_Proceso\"> 
<option value=\"\" selected=\"selected\">TODOS</option> 
<option value=\"COBRANZA COMERCIAL\">COBRANZA COMERCIAL</option> 
<option value=\"COBRANZA JURIDICA\">COBRANZA JURIDICA</option> 
<option value=\"OPERACIONES Y TECNOLOGIA\">OPERACIONES Y TECNOLOGIA</option> 
<option value=\"PROCESO ADMINISTRATIVO\">PROCESO ADMINISTRATIVO</option> 
<option value=\"PROCESO CALIDAD\">PROCESO CALIDAD</option> 
<option value=\"PROCESO GERENCIAL\">PROCESO GERENCIAL</option> 
</select>"; 
} 
if($_GET['Tipo']=="FECHAS"){ 
echo "<input type=\"text\" id=\"datepicker_desde\" name=\"Buscar_Proceso\"/>";     
} 
} 
} 
} 
?>

Espero me puedan ayudar con este tema.

Muchas Gracias.

marlanga · #2 (**permalink**) 26/11/2013, 13:01

Estás ejecutando el método "datepicker" sobre un input que aún no existe. Si quieres convertir un input en un calendario, hazlo cuando exista el input, por ejemplo, cuando la llamada ajax responda y tú metas el input en el DOM de la página.

tryniton · #3 (**permalink**) 26/11/2013, 14:55

Gracias por contestar Marlanga:

Pero la idea es que cuando yo cargo la pagina inicial, el input "datepicker" no existe, porque esta en la otra pagina que estoy llamando por ajax. ¿Entonces como podria resolver ese inconveniente de que cuando llame al input por ajax y ya este declarada la función de Jquery automáticamente el input se convierta en datepicker?

Otra cosa (pues no soy muy letrado en ajax), no se a que te referías con meter el input al DOM de la pagina, por lo tanto averigüe algo sobre "DOM" y encontré que es una forma de manipular las paginas HTML. Por lo tanto, ¿como me sirve saber la funcionalidad de DOM para resolver mi problema?

Y por ultimo, que consejo me darías para esta situación (si puedes poner un sencillo ejemplo seria genial).

Gracias por su ayuda.

Saludos!

marlanga · #4 (**permalink**) 27/11/2013, 07:51

El DOM no es una forma de manipular. HTML es un documento en formato XML, y XML es un formato de texto con estructura de árbol. DOM es el nombre técnico de ese árbol
La raíz del arbol DOM es el elemento <HTMl> De él cuelgan dos ramas, <HEAD> y <BODY>, y así sucesívamente con todos los elementos HTML que tenga tu página.

Cuando insertas nuevos elementos a un documento HTML, lo que haces es insertar nuevas ramas al árbol DOM de la página.

Cuando haces una llamada ajax al servidor y recuperas la respuesta, la insertas en la página a alguno de sus elementos. Justo después, debes aplicar el $("#loquesea").datepicker sobre el ID de ese elemento que acabas de insertar. Es decir, en la función que ejecutas cuando recibes la respuesta de la llamada AJAX, que tú llamas "llamarasincrono".

tryniton · #5 (**permalink**) 27/11/2013, 08:32

Ok, a ver si entendi...

Cuando llamo la pagina por Ajax al servidor la pongo en alguna pagina del DOM, en este caso al <BODY>. Justo después debo aplicar la función Jquery $("#loquesea") sobre el ID del textbox que me trajo de respuesta la llamada Ajax ("llamarasincrono"). Entonces la pregunta es: ¿Cuando ejecuto la funcion "llamarasicrono" debe ejecutar alli la funcion de Jquery?

Mas o menos asi:

Código HTML:

Ver original<form name="form1" id="form1" action="datepicker_jquery.php" method="get">
<select name="Seleccionar" id="Seleccionar" onchange="llamarasincrono('datepicker_ascrn.php?Dato='+document.forms.form1.Seleccionar[document.forms.form1.Seleccionar.selectedIndex].value,'Mostrar');$(function() {
        $('input').filter('.datepicker').datepicker(
        $.extend(
        $.datepicker.regional['es'],
        {
        defaultDate:7,
        dateFormat:"yy-mm-dd",
        showOn:"both",
        }
        )
        );  
      });">
    <option value="Fecha1" selected="selected">Fecha1</option>
    <option value="Fecha2">Fecha2</option>
</select>

Disculpa las molestias y nuevamente gracias por tu ayuda.