problema al utilizar ajax.updater

educacanis · #1 (**permalink**) 16/02/2012, 08:57

hola, haciendo un calendario con ajax, php y mysql, utilizo updater de prototype y una función que he hecho para pasar de un mes a otro que es la siguiente.

Código Javascript:

Ver original<script src="../js/Prototype.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
    var current_month = <?PHP echo @$month ?>;
    var current_year = <?PHP echo @$year ?>;
    
    function getPrevMonth()
    {
        if(current_month == 1)
        {
            current_month = 12;
            current_year = current_year - 1;
        }
        else
        {
            current_month = current_month - 1;
        }
        params = 'month='+current_month+'&year='+current_year;
        new Ajax.Updater('calendar_wrapper',window.location.pathname,{method:'post',parameters: params});
    }
        function getNextMonth()
        {
            if(current_month == 12)
            {
                current_month = 1;
                current_year = current_year + 1;
            }
            else
            {
                current_month = current_month + 1;
            }
            params = 'month='+current_month+'&year='+current_year;
            new Ajax.Updater('calendar_wrapper',window.location.pathname,{method:'post',parameters: params});
        }
</script>

cuando el calendario está solo en una página funciona a la perfección, pero ahora quería insertarlo en la web y resulta que al dar al mes siguiente se me sigue cargando la página y en el div el calendario del mes siguiente, pero toda la información de fuera del div que está por debajo en el código de repente desaparece...

Alguien puede saber porqué es??

Raziel_Ravenheart · #2 (**permalink**) 16/02/2012, 13:56

Podrías brindarnos también el código html por favor, por casualidad, ese siguiente no es un botón del tipo "submit" dentro de un formulario??

Cuando se trata de este tipo de cosas, es decir, eventos generados por el usuario, ajax ni php tienen la culpa, generalmente, es algo que se programó en javascript y/o prototype en este caso, o html, que tiene que ver con los eventos.

Si se pudieran ver tanto el resto del código javascript, se podría detectar más fácilmente el error...!!!

educacanis · #3 (**permalink**) 17/02/2012, 04:59

Cita:

Iniciado por Raziel_Ravenheart

Podrías brindarnos también el código html por favor, por casualidad, ese siguiente no es un botón del tipo "submit" dentro de un formulario??

Cuando se trata de este tipo de cosas, es decir, eventos generados por el usuario, ajax ni php tienen la culpa, generalmente, es algo que se programó en javascript y/o prototype en este caso, o html, que tiene que ver con los eventos.

Si se pudieran ver tanto el resto del código javascript, se podría detectar más fácilmente el error...!!!

ok, te pongo el codigo, aunque no hay ningún botón de formulario...
te voy a poner también la función de php que genera el calendario, a ver si el problema es algo del php, aunque no creo...

Función php que genera el calendario.

Código PHP:

  <?php require_once('../Conexiones/conexion.php'); ?>

 
<?php

 
mysql_select_db($database_conexion, $conexion);

 
 
function isAjax() {

 return isset($_SERVER['HTTP_X_REQUESTED_WITH']) &&

     $_SERVER ['HTTP_X_REQUESTED_WITH']  == 'XMLHttpRequest';

}

 
if(isAjax() && isset($_POST['month']))

{

    $month = $_POST['month'];

    $year = !isset($_POST['year']) ? date('Y', $current_time) : $_POST['year'];

    die(getCalendar($month,$year));

}

 
//asigna variables para el mes(mm) y el año actual (yyyy)

$month = date('n', time());

$year = date('Y', time());

$calendar = getCalendar($month,$year);

 
function getCalendar($month,$year)

{

    global $conexion; //importante definirla como global dentro de la función para que pueda conectar las consultas

    include("../Funciones/funciones.php");

 
    $current_time = time();

    

    $month_start = mktime(0,0,0,$month, 1, $year); 

    

    $month_name = date('F', $month_start); 

    $first_day = date('D', $month_start);

    

//cambiar a letras españolas

    switch($first_day)

    {

    case "Mon":

        $offset = 0;

        break;

    case "Tue":

        $offset = 1;

        break;

    case "Wed":

        $offset = 2;

        break;

    case "Thu":

        $offset = 3;

        break;

    case "Fri":

        $offset = 4;

        break;

    case "Sat":

        $offset = 5;

        break;

    case "Sun":

        $offset = 6;

        break;

    } 

    

    //define el número de días del mes del calendario gregoriano

    if($month == 1)

        $num_days_last = cal_days_in_month(CAL_GREGORIAN, 12, ($year -1));

    else

        $num_days_last = cal_days_in_month(CAL_GREGORIAN, ($month - 1), $year);

    

    $num_days_current = cal_days_in_month(CAL_GREGORIAN, $month, $year); 

    

    for($i = 0; $i < $num_days_current; $i++)

    {

        $num_days_array[] = $i+1;

    } 

    

    for($i = 0; $i < $num_days_last; $i++)

    {

        $num_days_last_array[] = '';

    }

    

    if($offset > 0){ 

        $offset_correction = array_slice($num_days_last_array, -$offset, $offset);

        $new_count = array_merge($offset_correction, $num_days_array);

        $offset_count = count($offset_correction);

    }

    else

    { 

        $new_count = $num_days_array;

    }

    

    $current_num = count($new_count); 

    

    if($current_num > 35)

    {

        $num_weeks = 6;

        $outset = (42 - $current_num);

    }

    else if($current_num < 35)

    {

        $num_weeks = 5;

        $outset = (35 - $current_num);

    }

    if($current_num == 35)

    {

        $num_weeks = 5;

        $outset = 0;

    }

    

    // Outset Correction

    for($i = 1; $i <= $outset; $i++)

    {

        $new_count[] = '';

    }

    

    // Now let's "chunk" the $new_count array

    // into weeks. Each week has 7 days

    // so we will array_chunk it into 7 days.

    

    $weeks = array_chunk($new_count, 7);

    

    ob_start();

    

    $last_month = $month == 1 ? 12 : $month - 1;

    $next_month = $month == 12 ? 1 : $month + 1;

    

echo <<<EOS

        <div border=1 align="center" valign="center" cellspacing=0 id="tabla-calendario">

        <img src="../Imagenes/web/Inicio/calendario titulo.PNG" width="175px"/>

     <table border=0 cellspacing=0 cellpadding="3px" width="150px" style="border-width:0px">

        <tr>

                <td colspan= 3><a href="#" class="monthnav" onclick="getPrevMonth();return false;">&laquo; Prev</a></td>

        <td colspan= 4><a href="#" class="monthnav" onclick="getNextMonth();return false;">Next &raquo;</a></td>

    </tr>

 
                 <tr>

            <td colspan=7 class="mescalendario" align=center>$mes[$month] $year</b></td>

 
     <tr>

              <th id="semanacalendario">L</th>

              <th id="semanacalendario">M</th>

              <th id="semanacalendario">M</th>

              <th id="semanacalendario">J</th>

              <th id="semanacalendario">V</th>

              <th id="semanacalendario">S</th>

              <th id="semanacalendario">D</th>

              </tr>

EOS;

    

    foreach($weeks AS $week){

        echo '<tr class="week">'; 

        foreach($week as $day)

        {

            

 
        $ID = $year."-".$month."-".$day ;

        $query_calendario = "SELECT * FROM eventos WHERE fecha_evento = '$ID'";

        $calendario = mysql_query($query_calendario, $conexion) or die(mysql_error());

        $row_calendario = mysql_fetch_assoc($calendario);

        $num_eventos = mysql_num_rows($calendario);

            

            

            if($day == date('d', $current_time) && $month == date('m', $current_time) && $year == date('Y', $current_time)){

                if ($num_eventos != 0 ) {

                    echo '<td title="HOY |' .$row_calendario['titulo_evento']. '" id="hoyconeventos" align="center"><b><!--<a href="mostrar.php?evento=$evento" target="evento">-->'.$day.'</a></b></td>';

                }else{ 

                echo '<td id="hoysineventos">'.$day.'</td>'; 

                }

            }else{

            if ($num_eventos != 0 ) {

                echo '<td title="'.$row_calendario['titulo_evento'].'" id="otrosdiasconeventos" align="center"><b>'.$day.'</b></td>'; 

                }else{ 

                echo '<td>'.$day.'</td>'; 

                }            }

        }

        echo '</tr>';

    }

    

    echo '</table>';

    

    return ob_get_clean();

}

?>

script Javascript de la cabecera del archivo:

Código Javascript:

Ver original<script src="../js/Prototype.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
    var current_month = <?PHP echo @$month ?>;
    var current_year = <?PHP echo @$year ?>;
    
    function getPrevMonth()
    {
        if(current_month == 1)
        {
            current_month = 12;
            current_year = current_year - 1;
        }
        else
        {
            current_month = current_month - 1;
        }
        params = 'month='+current_month+'&year='+current_year;
        new Ajax.Updater('calendar_wrapper',window.location.pathname,{method:'post',parameters: params});
    }
        function getNextMonth()
        {
            if(current_month == 12)
            {
                current_month = 1;
                current_year = current_year + 1;
            }
            else
            {
                current_month = current_month + 1;
            }
            params = 'month='+current_month+'&year='+current_year;
            new Ajax.Updater('calendar_wrapper',window.location.pathname,{method:'post',parameters: params});
        }
</script>

por último codigo html de la página:

Código HTML:

<head>
aqui va el script js y las hojas de estilo</head>

<body>
<div id="cabecera_web">
     <img src="cabecera/>
</div>

<div class="contenedor-principal">
   <?php include("menu.php"); ?>


         <div id="calendar_wrapper"><?PHP echo @$calendar ?></div>

  <h2 style="padding:30px" class="TituloGeneral">Armas y Material</h2>
<div class="TextoGeneral">
     <ul>
       <li class="epigrafegeneral">
titulo 1       </li>
     </ul>
     <p>texto 1</p>
     
     <ul>
       <li class="epigrafegeneral">
        titulo 2
       </li>
     </ul>
     <p>texto 2
     </div>   

  </div>

el calendario se muestra aquí

Código HTML:

<div id="calendar_wrapper"><?PHP echo @$calendar ?></div>

y se muestra todo, pero cuando le doy a la flecha del mes siguiente... se borra todo lo de debajo del div.

Gracias por cualquier ayuda o sugerencia

educacanis · #4 (**permalink**) 17/02/2012, 15:16

He seguido probando a poner el div con el id que muestra el calendario en varios puntos de la página y sea donde sea, si le doy al link de mes anterior o mes siguiente, es como si eliminase todo el código siguiente y desapareciese la web en toda la parte que está por debajo.

Raziel_Ravenheart · #5 (**permalink**) 19/02/2012, 22:07

Te tengo un par de recomendaciones:

1. No uses '@' para suprimir errores y advertencias, por que esto te puede causar problemas después, es mejor ver los errores y hacer lo mejor para resolverlos que ocultarlos, ya que en futuras modificaciones del código, esto te puede generar un dolor de cabeza

2. Es la primera vez que veo el uso de
$_SERVER['HTTP_X_REQUESTED_WITH']
Como este es un encabezado enviado propiamente por objeto ajax, tienes que buscar el modo que sea reconocido correctamente, aunque mucho desaconsejan el uso de esto, ya que no es un estandard de php, si no un encabezado empleado por el cliente.

Dependiendo de la librería que estes utilizando debes encontrar el modo de hacer algo como
xmlHttpRequestObject.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

En tu caso creo que puedes leer acá: http://prototypejs.org/api/ajax/options

3. Por último, lo que puedo deducir leyendo también el tutorial de Ajax.updater de la librería prototype, es que tienes el código php en el mismo archivo que tienes el código html, por lo que estás utilizando, window.location.pathname, y esto causa que se llame a sí mismo por medio del método post, recargando todo el contenido de la página, yo te recomiendo que en lo máximo siempre que uses ajax, y para todo hagas archivos aparte, un archivo aparte para las funciones, otro aparte para el que recibe la petición ajax, y otro aparte para las conexiones y/o peticiones a las bases de datos (que ese si lo ví). Desde el archivo que recibe la petición ajax, cargas con require_once, include, include_once o el que sea de tu preferencia, el archivo con las funciones, tal cual estás haciendo con la conexión... en este caso ya te quedarían otros archivos, mas o menos así

calendario.html <- a este le quitas el código php y lo pones en un archivo aparte
calendario.php <- archivo que tiene lo extraido de calendario.html
funciones.php <- todas las funciones que ese ya lo tienes
conexion.php <-ese también lo tienes por aparte

de este modo al llamar el archivo calendario.php, no se vuelve a cargar todo el código de calendario.html y listo, así es que se usan todas las peticiones ajax, en muy pocos casos se utiliza ajax para llamar al mismo fichero.

Ten en cuenta todo esto y pronto estarás incluso un paso más adelante que todos mis compañeros de curso

Te felicito por el esfuerzo y por estar utilizando prototype y querer aprender por tu cuenta

una pregunta: por que usas prototype? elección personal? te lo exigieron? estás probando? no te gusta jQuery?

Yo en lo personal también andaba buscando alternativas a jQuery, ya que cualquiera que lo usa dice que programa en javascript, cuando en realidad este ya les entrega todo hecho... ese no es el caso de prototype, aunque ayuda mucho, siempre tiene algunas de las complicaciones de programar directamente con javascript

Exitos, respóndeme por favor y me cuentas como te fué

Saludos

Raziel_Ravenheart · #6 (**permalink**) 19/02/2012, 22:09

En el enlace que te puse, busca la opción

requestHeaders

esa es la que necesitas para mejorar un poco el código

educacanis · #7 (**permalink**) 20/02/2012, 04:25

a ver te cuento. El problema es que, aunque en php me defiendo ligeramente, en javascrip, ajax, jquery, etc. la verdad que no sé prácticmante nada. Lo que quería era conseguir que el calendario se moviese por los meses y encontré el código en una página web en inglés. Lo que hice fue incorporarlo más o menos lo que yo tenía.

He buscado lo que significaba cada cosa del código para entenderlo, pero no es que yo quisiese utilizar prototype era lo que se utilizaba en el ejemplo y al buscar lo que significaba la función Ajax. Updater() aquí me pareció que estaba bien utilizado.

Te haré caso quitando los @ y dividiendo el código. El problema es que yo voy aprendiendo muy poco a poco por mi cuenta, mirando como funcionan los códigos, buscando su significado y modificandolo para mi gusto.

El problema es que yo sólo quiero conseguir es pasar de un mes a otro en el calendario con eventos sin que se me recargue la página entera, pero no soy capaz de hacer yo sola un código y por eso tengo que ir recopilando de otros lados.

Si sabes de donde puedo conseguir realizar un código mejor para que me haga ésto con otras funciones en javascript, librerías o algo similar...

es que ya no sé que más hacer...

P.D. el otro día mirando el código vi que funcionaba si estaba mal escrito. Me explico:
si ponía

Código HTML:

Ver original<div><? echo @$calendario ?></div>

me borraba todo el código de debajo como ya te expliqué, pero sin embargo, dejé por error otra claúsula de </div> y se cerraba dos veces y entonces ya no se borraba nada más del código

escribiendo:

Código HTML:

Ver original<div>....</div></div>

me salía bien...

creo que al final se me está complicando mucho un problema simple... pero no sé que más hacer... si hago algún progreso te cuento.

Raziel_Ravenheart · #8 (**permalink**) 20/02/2012, 22:20

Pues la verdad, si, utilizo un calendario hecho todo con javascript y css, si necesito cargarle datos, lo hago desde la base de datos, por medio de ajax, siendo que yo utilizo ajax un poco diferente.

En el enlace que me diste, el de librosweb.es, lo utilizo hace mucho tiempo para estudiar, ahí también hay una sección de ajax y utilicé el código que está ahí.

El calendario que yo uso se llama dynarch calendar, y se puede utilizar gratuitamente para proyectos no comerciales, y el que lo hizo dice que toca pagar para utilizarlo comercial, pero la verdad llevo usándolo 6 meses en un sitio privado,.. nada público y no he tenido que pagar... aquí te dejo el enlace

http://www.dynarch.com/projects/calendar/

Te dejo el enlace. Yo se, ya me dijiste que tienes poca idea de javascript, pero si estás aprendiendo tecnologías web, tarde o temprano vas a tener que toparte con javascript, css, html5, y ajax.

Toca leerse casi todo el sitio del dynarch, o sea la parte del manual, para uno entender más o menos como funciona. Claro que de todos los que he visto, es uno que si me ha funcionado, por que intenté con los de DHTML Goodies y no tuve resultado alguno, lo que me pesa por que esos si son totalmente código libre.

En serio me gustaría poderte ayudar más, pero estoy un poco ocupado, y no creo que saques mucho si te ayudo a hacer todo y no entiendes, por eso te felicito al haber siquiera buscado ayuda y no andar por ahí tratando de copiar códigos a lo loco... jejeje aunque a veces es necesario.

Bueno ahí te dejo la inquietud, si lo que necesitas es otra cosas, solo avisa!!!!