No has iniciado sesión
Conectar al sistema | Registrar usuario
Categorías Articulo
 
2 votos
Agregando Ajax a la Agenda
 
Agregando Ajax a la Agenda de mi articulo anterior.. Para ver el Resultado final lo pueden ver desde
Acá - tambien desde aca mi Articulo Anterior

Basicamente es la misma agenda a la cual ahora por medio de ajax le pasamos el valor mes y el valor año seleccionados de dos select que contienen estos valores , los valores del mes estan en un array y los valores de año son un bucle les dejo el codigo para que lo vean lo mejoren y lo adapten a lo suyo

Pagina index.php

 
000 
001 
002 
003 
004 
005 
006 
007 
008 
009 
010 
011 
012 
013 
014 
015 
016 
017 
018 
019 
020 
021 
022 
023 
024 
025 
026 
027 
028 
029 
030 
031 
032 
033 
034 
035 
036 
037 
038 
039 
040 
041 
042 
043 
044 
045 
046 
047 
048 
049 
050 
051 
052 
053 
054 
055 
056 
057 
058 
059 

<html>
<head>
<script type="text/javascript" src="ajax.js"></script>
<style>
.calendario{font-size:80%;text-align: center;width:160px;height:50px;margin-left:0%;margin-top:1px; background: #FAFAFA;} 
.gris {background: #F0F0F0;-moz-border-radius:3px;-webkit-border-radius:3px;border: 1px solid #000000;}
.dias tr{background: #F0F0F0;-moz-border-radius:3px;-webkit-border-radius:3px;border: 1px solid #000000;}
.dias td{background: #F0F0F0;}
</style>
</head>
<body>
<?php 
if($_POST['a']){$anio=$_POST['a'];}else{$anio=date('Y');}
if(
$_POST['m']){$mees=$_POST['m'];}else{$mees=date('n');}
$actual=date('Y');
$hasta=$actual+50;
$mes=0;
$i=0;
         
$meses = array()
         
$meses[1] = "Enero"
         
$meses[2] = "Febrero"
         
$meses[3] = "Marzo";
     
$meses[4] = "Abril"
         
$meses[5] = "Mayo";
     
$meses[6] = "Junio";
     
$meses[7] = "Julio";
     
$meses[8] = "Agosto";
     
$meses[9] = "Septiembre";
     
$meses[10] = "Octubre";
     
$meses[11] = "Noviembre";
     
$meses[12] = "Diciembre";
 
echo
'<div align="center" id="divcalendario">';    
echo
'<select id="mesj" name="" style="width:80px; height:15px;margin-left:0px; font-size:60%;" class="input" onchange="cargarmesanio(); return false">';     
for(
$mes=1$mes<=12$mes++){if($mes==$mees){echo'<option value="'.$mes.'" selected >'.$meses[$mes].'</option>';}else{echo'<option value="'.$mes.'" >'.$meses[$mes].'</option>';}}
echo
'</select> - ';             
echo
'<select id="anioj" name="" style="width:50px; height:15px;margin-left:0px; font-size:60%;" class="input" onchange="cargarmesanio();return false" >';
for(
$a=$actual;$a<=$hasta;$a++){if($a==$anio){echo'<option value="'.$a.'" SELECTED>'.$a.'</option>';}else{echo'<option value="'.$a.'" >'.$a.'</option>';}}
echo
'</select>';
$dias date('t')$hoy date('j')
if ((
$diasem date('w'mktime(000$mees1$anio))) == 0) $diasem 7
$start false$sum 0
echo
'<table class="calendario" cellpadding="0" cellspacing="0">'
echo 
'<tr class="dias"> 
<td><b>L</b></td><td><b>M</b></td><td><b>M</b></td><td><b>J</b></td><td><b>V</b></td><td><b>S</b></td><td><b>D</b></td></tr><tr>'

for (
$i 1$i <= ($dias $sum)$i++) { 
if (!
$start)if ($i <= && $i == $diasem) { $start true$sum $i 1} else { echo '<td></td>'} 
if (
$start){if (($i 1) % == 0) echo '</tr><tr>'
$ao=date("Y");$ms=date("n");$ds=$i $sum;
if(
$anio==$ao and $mees==$ms){echo '<td' ($i == ($hoy $sum) ? ' class="gris"' '') . '>';
}else{echo 
'<td' ($i == ($hoy $sum) ? ' class=""' '') . '>';}
echo
"<a href='javascript:cargarfecha(\"$anio-$mees-$ds\")' style='text-decoration: none; color:black; face:georgia; size:3%;' title='Ir a Fecha'>".($i $sum )."</td>"
echo
'</a>';}}
echo 
'</tr></table>';
echo
'</div>'
?>
</body>
</html>
 
Pagina Ajax.js

 
000 
001 
002 
003 
004 
005 
006 
007 
008 
009 
010 
011 
012 
013 
014 
015 
016 
017 
018 
019 
020 
021 
022 
023 
024 
025 
026 
027 
028 
029 
030 
031 
032 
033 
034 
035 
036 

function nuevoAjax(){
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;
}
 
function cargarfecha(fecha){
alert(fecha);
}
function cargarmesanio(){
    a=document.getElementById('anioj').value;
    m=document.getElementById('mesj').value;
    div=document.getElementById('divcalendario');
    div.innerHTML='<center><img src="ajax-loader.gif"/></center>';
        ajax=nuevoAjax();
        ajax.open("POST", "index.php",true);
    ajax.onreadystatechange=function() {
        if (ajax.readyState==4) {
        div.innerHTML=ajax.responseText
        }
    }
    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    ajax.send("a="+a+"&m="+m)
}
 
 
 
¿? Resolver dudas
Si tienes problemas o dudas con el contenido del artículo no dudes a preguntar en los foros de Otros de Programación Web indicando el artículo al que te refieres.
 
Comentarios
Este artículo no ha sido comentado hasta el momento
 
Redes Sociales
Programación Webon

Compartir en Google Plus