Comunidad de diseño web y desarrollo en internet online

Ajax accesible

Citar            
MensajeEscrito el 23 Oct 2008 05:12 pm
Buenas tardes,

Estoy creando una aplicacion que carga un calendario a través de ajax. Necesito que sea totalmente accesible.
He estado programandola y consigo que funcione pero solo en el primer click, en el segundo toma el evento por defecto (es decir, el href del ancla)

alguien me puede decir porque me pasa esto.

La url de la aplicacion http://www.benirock.es (el calendario de la derecha a media altura)

Mi codigo ajax:

function nuevoAjax()
{
/* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por
lo que se puede copiar tal como esta aqui */
var xmlhttp=false;
try
{
// Creacion del objeto AJAX para navegadores no IE
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
// Creacion del objet AJAX para IE
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(E)
{
if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp=new XMLHttpRequest();
}
}
return xmlhttp;
}


function cargaCalendario(fecha)
{
var ajax=nuevoAjax();
ajax.open("GET", "./calendario/calendario.php?fecha="+fecha, true);
//alert("includes/consulta_pinta_productos.php?idserie="+idserie+"&idmedida="+idmedida);
ajax.onreadystatechange=function()
{
if (ajax.readyState==1) {
document.getElementById('calendario').innerHTML="<div align='center' style='margin-top:50px;'><img src='./calendario/loader.gif' alt='Cargando' title='Cargando' /><br />Cargando...</div>";
//document.getElementById('derecha').innerHTML="Cargando...";
}
else if (ajax.readyState==4){
if(ajax.status==200){
document.getElementById('calendario').innerHTML=ajax.responseText;
//document.getElementById('calendario').innerHTML=fecha;

//document.getElementById('derecha').innerHTML=ajax.responseText;
//document.getElementById(idcapaapintar).innerHTML=ajax.responseText;
}
}
}
ajax.send(null);
}


function aplicarEventos(){
if(document.getElementById && document.getElementsByTagName){
var anterior = document.getElementById("anterior");
var siguiente = document.getElementById("siguiente");
var fecha_anterior = anterior.getAttribute("name");
var fecha_siguiente = siguiente.getAttribute("name");

anterior.onclick = function (oEvent) {
var oEvent = (typeof oEvent != "undefined")? oEvent : event;
oEvent.returnValue = false;
if(oEvent.preventDefault){
oEvent.preventDefault();
}
cargaCalendario(fecha_anterior);
//return false; //ESTE RETURN PUEDE CAUSAR QUE VAYA MAL.
}

siguiente.onclick = function (oEvent) {
var oEvent = (typeof oEvent != "undefined")? oEvent : event;
oEvent.returnValue = false;
if(oEvent.preventDefault){
oEvent.preventDefault();
}
cargaCalendario(fecha_siguiente);
//return false;
}

}
}

Y mi script calendario.php (desde el index para que se cargue la primera vez, hago un require de este mismo archivo)

<?
function comprueba_eventos ($dia,$mes,$ano) {

$fecha_formateada = $ano."-".$mes."-".$dia;

$myconn = mysql_connect("localhost","agenda","abis2008");

if (! $myconn){
echo "Error al intentar conectarse con el servidor MySQL";
exit();
}

if (! mysql_select_db("agenda",$myconn)){
echo "No se pudo conectar correctamente con la Base de datos";
exit();
}

$sql = "SELECT * FROM eventos where fecha = '$fecha_formateada'";
$result = mysql_query($sql);

if (! $result){
echo "La consulta SQL contiene errores.";
exit();
}

if (mysql_num_rows($result) != 0):
return true;
else:
return false;
endif;
}

function calcula_numero_dia_semana($dia,$mes,$ano){
$numerodiasemana = date('w', mktime(0,0,0,$mes,$dia,$ano));
if ($numerodiasemana == 0)
$numerodiasemana = 6;
else
$numerodiasemana--;
return $numerodiasemana;
}

//funcion que devuelve el último día de un mes y año dados
function ultimoDia($mes,$ano){
$ultimo_dia=28;
while (checkdate($mes,$ultimo_dia + 1,$ano)){
$ultimo_dia++;
}
return $ultimo_dia;
}

function dame_nombre_mes($mes){
switch ($mes){
case 1:
$nombre_mes="Enero";
break;
case 2:
$nombre_mes="Febrero";
break;
case 3:
$nombre_mes="Marzo";
break;
case 4:
$nombre_mes="Abril";
break;
case 5:
$nombre_mes="Mayo";
break;
case 6:
$nombre_mes="Junio";
break;
case 7:
$nombre_mes="Julio";
break;
case 8:
$nombre_mes="Agosto";
break;
case 9:
$nombre_mes="Septiembre";
break;
case 10:
$nombre_mes="Octubre";
break;
case 11:
$nombre_mes="Noviembre";
break;
case 12:
$nombre_mes="Diciembre";
break;
}
return $nombre_mes;
}

//PINTAMOS EL CALENDARIO

if (!$_GET['fecha']):
$tiempo_actual = time();
$mes = date("n", $tiempo_actual);
$ano = date("Y", $tiempo_actual);
$dia=date("d");
$fecha=$ano . "-" . $mes . "-" . $dia;
else:
$fecha= $_GET['fecha'];
$dia = 1;
$ano = substr($fecha,0,4);
$mes = substr($fecha,4);
$fecha=$ano . "-" . $mes . "-" . $dia;
endif;

$mes_hoy=date("m");
$ano_hoy=date("Y");
if (($mes_hoy <> $mes) || ($ano_hoy <> $ano))
{
$hoy=0;
}
else
{
$hoy=date("d");
}
//tomo el nombre del mes que hay que imprimir
$nombre_mes = dame_nombre_mes($mes);

//construyo la cabecera de la tabla
echo '<table width="100%" cellspacing="2" cellpadding="1" summary="Calendario" border="0"><tr><td colspan="7" align="center" class="tit">';
echo '<table width="100%" cellspacing="1" cellpadding="1" summary="Calendario" border="0"><tr><td style="font-size:10pt;font-weight:bold;color:black;">';
//calculo el mes y ano del mes anterior
$mes_anterior = $mes - 1;
$ano_anterior = $ano;
if ($mes_anterior==0){
$ano_anterior--;
$mes_anterior=12;
}
echo '<a href="anterior.php" id="anterior" name="'.$ano_anterior.$mes_anterior.'">&lt;&lt;</a></td>';
//echo "<a href='".$_SERVER['PHP_SELF']."?fecha=$ano_anterior$mes_anterior'>&lt;&lt;</a></td>";
echo '<td align="center" class="tit">'.$nombre_mes." ".$ano.'</td>';
echo '<td align="right" style="font-size:10pt; font-weight:bold; color:black;">';
//calculo el mes y ano del mes siguiente
$mes_siguiente = $mes + 1;
$ano_siguiente = $ano;
if ($mes_siguiente==13){
$ano_siguiente++;
$mes_siguiente=1;
}
echo '<a href="siguiente.php" id="siguiente" name="'.$ano_siguiente.$mes_siguiente.'">&gt;&gt;</a></td></tr></table></td></tr>';
echo " <tr>
<td align='center' class='altn'>Lu</td>
<td align='center' class='altn'>Ma</td>
<td align='center' class='altn'>Mi</td>
<td align='center' class='altn'>Ju</td>
<td align='center' class='altn'>Vi</td>
<td align='center' class='altn'>Sa</td>
<td align='center' class='altn'>Do</td>
</tr>";

//Variable para llevar la cuenta del dia actual
$dia_actual = 1;

//calculo el numero del dia de la semana del primer dia
$numero_dia = calcula_numero_dia_semana(1,$mes,$ano);
//echo "Numero del dia de demana del primer: $numero_dia <br>";

//calculo el último dia del mes
$ultimo_dia = ultimoDia($mes,$ano);

//escribo la primera fila de la semana
echo "<tr>";
for ($i=0;$i<7;$i++){
if ($i < $numero_dia){
//si el dia de la semana i es menor que el numero del primer dia de la semana no pongo nada en la celda
echo "<td></td>";
} else {
if (($i == 5) || ($i == 6))
{
if (comprueba_eventos($dia_actual,$mes,$ano))
{
$fecha_formato = $ano."-".$mes."-".$dia_actual;
echo "<td class='da'><a href='actividades.php?dia=$fecha_formato' class='da'>$dia_actual</a></td>";
}
else
{
echo "<td class='fs'>$dia_actual</td>";
}
}
else
{
if (comprueba_eventos($dia_actual,$mes,$ano))
{
$fecha_formato = $ano."-".$mes."-".$dia_actual;
echo "<td class='da'><a href='actividades.php?dia=$fecha_formato' class='da'>$dia_actual</a></td>";
}
else
{
echo "<td align='center'>$dia_actual</td>";
}
}
$dia_actual++;
}
}
echo "</tr>";

//recorro todos los demás días hasta el final del mes
$numero_dia = 0;
while ($dia_actual <= $ultimo_dia){
//si estamos a principio de la semana escribo el <TR>
if ($numero_dia == 0)
echo "<tr>";
//si es el uñtimo de la semana, me pongo al principio de la semana y escribo el </tr>

if (($numero_dia == 5) || ($numero_dia == 6))
{
if (comprueba_eventos($dia_actual,$mes,$ano))
{
$fecha_formato = $ano."-".$mes."-".$dia_actual;
echo "<td class='da'><a href='actividades.php?dia=$fecha_formato' class='da'>$dia_actual</a></td>";
}
else
{
echo "<td class='fs' >$dia_actual</td>";
}
}
else
{
if (comprueba_eventos($dia_actual,$mes,$ano))
{
$fecha_formato = $ano."-".$mes."-".$dia_actual;
echo "<td class='da'><a href='actividades.php?dia=$fecha_formato' class='da'>$dia_actual</a></td>";
}
else
{
echo "<td align='center'>$dia_actual</td>";
}
}

$dia_actual++;
$numero_dia++;
if ($numero_dia == 7)
{
$numero_dia = 0;
echo "</tr>";
}

}

//compruebo que celdas me faltan por escribir vacias de la última semana del mes
for ($i=$numero_dia;$i<7;$i++){
echo "<td></td>";
}

echo "</tr>";
echo "</table>";

Por supuesto, en index.php, tengo la llamada al script js y window.onload = funcion;

Muchisimas gracias de antemano.

Saludos

Por antocs25

2 de clabLevel



 

firefox
Citar            
MensajeEscrito el 23 Oct 2008 07:38 pm
RESUME ¡¡¡¡


y si quieres dar todo el codigo solo pon las URL

Por Inyaka

Claber

3176 de clabLevel

9 tutoriales
2 articulos

Genero:Masculino   Desarrollador de GAIA

Programador y fotógrafo

firefox
Citar            
MensajeEscrito el 24 Oct 2008 06:32 am
Toda la razon, siento el post tan largo. Resumo:

Miren el funcionamiento de este archivo:

http://www.benirock.es/ajax.php

El primer click lo hace bien, pero a partir de entonces coge el comportamiento por defecto del ancla. (va a anterior.php y deberia llamar al ajax de nuevo, que coge getElementById('anterior'))

<a href="anterior.php" id="anterior" name="'.$ano_anterior.$mes_anterior.'">

Alguna sugerencia.

Gracias por la respuesta.

Por antocs25

2 de clabLevel



 

firefox
Citar            
MensajeEscrito el 24 Oct 2008 07:15 am
Creo que el problema esta en lo siguiente:

Mi documento que carga el php que luego llama al ajax tiene el siguiente script en su <head>

window.onload = funcion;

Como esta pagina no se recarga, me funciona la primera vez, pero las consecutivas no funciona.

Puede ser esto?¿

como solucionarlo??

gracias.

Por antocs25

2 de clabLevel



 

firefox
Citar            
MensajeEscrito el 24 Oct 2008 01:07 pm
el problema es que una ves que se carga gracias a la accion del 1º click debieras volver a cargar los eventos

te doy un ejemplo (usando jquery :P) en el cual se haría algo parecido a lo tuyo

Código HTML :

// se carga el documento
$(document).ready(  
   function(){
      // se cargan los eventos
      eventos();
   }
);
function eventos(){
      //cargo el evento a siguiente
      $("#siguiente").click(function(){avanza($(this))});   
}
function asignar(foco){
   $('#midiv_contenedor').load(
      "siguiente.php?var=xx",
      {         
         mivar:   foco.attr('id')
      },             
      function(){
         /* 
         * vuelvo a cargar los eventos
         *una ves ejecutada la accion
         */
         eventos(); // OJO <-- O_O
      }   
   );
}

Por Inyaka

Claber

3176 de clabLevel

9 tutoriales
2 articulos

Genero:Masculino   Desarrollador de GAIA

Programador y fotógrafo

firefox
Citar            
MensajeEscrito el 27 Oct 2008 07:31 am
Muchisimas gracias por la respuesta.

He probado haciendo un ejemplo sencillo y me parece que has solucionado mi problema.

Eres un artista.

Un saludo.

Por antocs25

2 de clabLevel



 

firefox
Citar            
MensajeEscrito el 27 Oct 2008 01:18 pm
de nada, tuviste muy buena actitud al aceptar mi primera critica ;)

Por Inyaka

Claber

3176 de clabLevel

9 tutoriales
2 articulos

Genero:Masculino   Desarrollador de GAIA

Programador y fotógrafo

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.