buenas tengo un problema con AJAX y JQUERY, haber le comento:
tengo una pagina en PHP la cual include otra, en la principaltengo 2 combobox, con el cual, de acuerdo a la seleccion, muestra varios campos. e lcodigo es el siguiente:
Código:
<select name="numero" id="numero" size="1" style="width:40px;font-weight:bold;" onchange="visualizar()">
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
</select>
<b>Type of Group/s: </b><select name="tipogrupo" id="tipogrupo" size="1" style="width:80px;font-weight:bold;" onchange="visualizar()">
<option value="pool">Pool</option>
<option value="private">Private</option>
</select>
Debajo de esto tengo un div en el cual esta el include en el cuial defino el ID donde se actualizara los datos q deseo:
Código:
<div id="newgroups" style="width:100%;height:auto;">
<? include("showgroups.php"); ?>
</div>
como ven en el onchange llamo a visualizar q seria esto:
Código:
function visualizar()
{
num = document.getElementById('numero').value;
tgrupo = document.getElementById('tipogrupo').value;
url="showgroups.php?numero="+num+"&tipog="+tgrupo;
//enviar a ajax para que agrege a la canasta detalleCompra
motor('newgroups',url);
}
esta funcion me recupera los valores seleccionados y los manda a motor, este motor.js tiene el siguiente codigo:
Código:
function objetoAjax(){
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
//funcion general
function motor(divisor,url){
divContenido = document.getElementById(divisor);
ajax=objetoAjax();
ajax.open("GET", url);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
divContenido.innerHTML = ajax.responseText
}
}
ajax.send(null)
}
y el codigo del "showgroups.php" vendria a seer el siguiente:
Código PHP:
<?
if(isset($_GET['numero']) && isset($_GET['tipog']))
{
$numero = $_GET['numero'];
$tipogrupo = $_GET['tipog'];
?>
<style>
.sobre:hover{
background:#CCCCCC;}
</style>
<link type="text/css" href="css/base/ui.all.css" rel="stylesheet" />
<link type="text/css" href="css/base/demos.css" rel="stylesheet" />
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/ui.core.js"></script>
<script type="text/javascript" src="script/ui.datepicker.js"></script>
<script type="text/javascript">
$(function() {
$('#fechainicio1').datepicker({
changeMonth: true,
changeYear: true
});
$('#fechainicio2').datepicker({
changeMonth: true,
changeYear: true
});
$('#fechainicio3').datepicker({
changeMonth: true,
changeYear: true
});
$('#fechainicio4').datepicker({
changeMonth: true,
changeYear: true
});
});
</script>
<?
if($tipogrupo=='pool')
{
for($i=1;$i<=$numero;$i++)
{
?>
<table width="500" border="0" style="border:1px solid #990000;">
<tr bgcolor="#990000" style="color:#FFFFFF">
<td colspan="4"><b>Group Nº<?=$i;?></b></td>
</tr>
<tr bgcolor="#eeeeee" class="sobre">
<td align="right"><b>Aperture Date :</b></td>
<td align="left"><input name="fechainicio<?=$i;?>" type="text" id="fechainicio<?=$i;?>" size="10" maxlength="10"></td>
<td align="right"><b>Price :</b></td>
<td align="left"><input name="preciopool<?=$i;?>" type="text" id="preciopool<?=$i;?>" value="0.00" size="10" maxlength="10"></td>
</tr>
<tr class="sobre">
<td align="right"><b>Date Begin :</b></td>
<td align="left"><input name="inicioprecio<?=$i;?>" type="text" id="inicioprecio<?=$i;?>" size="10" maxlength="10"></td>
<td align="right"><b>Date End</b></td>
<td align="left"><input name="finprecio<?=$i;?>" type="text" id="finprecio<?=$i;?>" size="10" maxlength="10"></td>
</tr>
</table>
<?
}
}
else if($tipogrupo=='private')
{
for($i=1;$i<=$numero;$i++)
{ ?>
<table width="800" border="0" style="border:1px solid #990000;">
<tr bgcolor="#990000" style="color:#FFFFFF">
<td colspan="8"><b>Group Nº<?=$i;?></b></td>
</tr>
<tr bgcolor="#eeeeee" class="sobre">
<td align="right"><b>Aperture Date :</b></td>
<td align="left"><input name="fechaini<?=$i;?>" type="text" id="fechaini<?=$i;?>" size="10" maxlength="10"></td>
<td align="right"><b>Date Begin :</b></td>
<td align="left"><input name="fechaprecioini<?=$i;?>" type="text" id="fechaprecioini<?=$i;?>" size="10" maxlength="10"></td>
<td align="right"><b>Date End</b></td>
<td align="left"><input name="fechapreciofin<?=$i;?>" type="text" id="fechapreciofin<?=$i;?>" size="10" maxlength="10"></td>
<td> </td>
<td> </td>
</tr>
<tr class="sobre">
<td align="right"><b>Price 1 pax</b></td>
<td align="left"><input name="pax1<?=$i;?>" type="text" id="pax1<?=$i;?>" value="0.00" size="10" maxlength="10" style="text-align:right"></td>
<td align="right"><b>Price 2 pax</b></td>
<td align="left"><input name="pax2<?=$i;?>" type="text" id="pax2<?=$i;?>" value="0.00" size="10" maxlength="10" style="text-align:right"></td>
<td align="right"><b>Price 3 pax</b></td>
<td align="left"><input name="pax3<?=$i;?>" type="text" id="pax3<?=$i;?>" value="0.00" size="10" maxlength="10" style="text-align:right"></td>
<td align="right"><b>Price 4-6 pax</b></td>
<td align="left"><input name="pax46<?=$i;?>" type="text" id="pax46<?=$i;?>" value="0.00" size="10" maxlength="10" style="text-align:right"></td>
</tr>
<tr bgcolor="#eeeeee" class="sobre">
<td align="right"><b>Price 7-9 pax</b></td>
<td align="left"><input name="pax79<?=$i;?>" type="text" id="pax79<?=$i;?>" value="0.00" size="10" maxlength="10" style="text-align:right"></td>
<td align="right"><b>Price 10-12 pax</b></td>
<td align="left"><input name="pax1012<?=$i;?>" type="text" id="pax1012<?=$i;?>" value="0.00" size="10" maxlength="10" style="text-align:right"></td>
<td align="right"><b>Price 13-16 pax</b></td>
<td align="left"><input name="pax1316<?=$i;?>" type="text" id="pax1316<?=$i;?>" value="0.00" size="10" maxlength="10" style="text-align:right"></td>
<td> </td>
<td> </td>
</tr>
</table>
<? }
}
}
?>
Ahora cuando seleccino algun campo de los select esto normal mente me cambia y muestra lo que deseo [osea el numeroy tipos de campo], el problema es con el JQUERY que no funciona, porke en los campos input date me deberia desplegar un calendario pero no me lo muestra, parece q el AJAX deshabiliara al JQUERY, ya q si lo pruebo el JQUERY en la principal si lo ejecuta, pero cuando es cargado por el AJAX NO.
.
Ayuda porfas!!!
acepto sugerencias de otros metodos para hacer esto de recargar...