Foros del Web » Programando para Internet » Javascript » Frameworks JS »

cargar script de mootools

 Estas en el tema de cargar script de mootools en el foro de Frameworks JS en Foros del Web. saludos, tengo problamas con mootools, soy super novato en eso, les cuento baje el codigo de un calendario hecho con mootool, se llama vlaCalendar, me ...
  #1 (permalink)  
Antiguo 19/05/2009, 20:42
 
Fecha de Ingreso: noviembre-2007
Mensajes: 237
Antigüedad: 17 años, 1 mes
Puntos: 4
cargar script de mootools
saludos, tengo problamas con mootools, soy super novato en eso, les cuento

baje el codigo de un calendario hecho con mootool, se llama vlaCalendar, me funciona corerctamente cuando lo aplico en la pagina principal, pero cuando lo aplico en una pagina secundaria, la cual es llamada con ajax, no funciona, creo que nocarga mootools, nose donde se debe agregar el script, este es el codigo que realiza la llamada al calendario

Código PHP:
<script type="text/javascript">
        window.addEvent('domready', function() {
          
          new vlaDatePicker('muestra_calendario', 
        { openWith: 'togglePicker', offset: { y: -2, x: 2 }, 
         separateInput: { day: 'day', month: 'month',
         year: 'year' } } );        
        });    
        
        
    </script>

<body>

<table cellpadding="0">
<tr>
    <td>
    <span id="muestra_calendario">
        <input id="day" name="day" type="text" style="width: 18px; border-width: 1px 0 1px 1px;" maxlength="2" /><input value="/" type="text" style="width: 5px; border-width: 1px 0 1px 0;" disabled="disabled" /><input name="month" id="month" class="textbox" type="text" style="width: 16px; border-width: 1px 0 1px 0;" maxlength="2" /><input value="/" type="text" style="width: 5px; border-width: 1px 0 1px 0;" disabled="disabled" /><input name="year" id="year" type="text" style="width: 28px; border-width: 1px 0 1px 0;" maxlength="4" /><input type="text" style="width: 15px; border-width: 1px 1px 1px 0;" disabled="disabled" /><img src="images/calendar.gif" id="togglePicker" class="pickerImg" width="13px" height="12px" alt="" />
        <input type="text" id="txtFecha" name="txtFecha" />


        </span>
    </td>
</tr>
</table>

</body> 
espero se entienda mi problema, gracias
  #2 (permalink)  
Antiguo 20/05/2009, 09:19
 
Fecha de Ingreso: mayo-2009
Ubicación: DF
Mensajes: 39
Antigüedad: 15 años, 7 meses
Puntos: 2
Respuesta: cargar script de mootools
Hola Oscar (no e usado el script que mencionas pero hagamos el intento), lo que pasa es que al cargar este codigo que pones, en el domready. Creas el objeto vlaDatePicker y lo vinculas (segun veo el codigo a tu div muestra calendario) este codigo que pusiste te debe de funcionar sin problema, cierto????

Bueno tomando como base esto, lo que debes hacer en la pagina siguiente, la que cargas con Ajax.. es que en su evento onComplete debes repetir la instruccion para crear el siguiente calendario

Código PHP:
new vlaDatePicker('muestra_calendario', 
        { openWith: 'togglePicker', offset: { y: -2, x: 2 }, 
         separateInput: { day: 'day', month: 'month',
         year: 'year' } } ); 
Obviamente sustituyendo "muestra_calendario" por el div correspondiente

Estaria bien su postearas tu codigo completo para ver en que parte te esta fallando
  #3 (permalink)  
Antiguo 20/05/2009, 09:35
 
Fecha de Ingreso: noviembre-2007
Mensajes: 237
Antigüedad: 17 años, 1 mes
Puntos: 4
Respuesta: cargar script de mootools
ok, gracias por la respuesta, voy a revisar lo que dices y poner mi codigo completo, dame unas horas, que en este momento voy saliendo , gracias de nuevo por tu ayuda
  #4 (permalink)  
Antiguo 20/05/2009, 14:02
 
Fecha de Ingreso: noviembre-2007
Mensajes: 237
Antigüedad: 17 años, 1 mes
Puntos: 4
Respuesta: cargar script de mootools
Aqui dejo un ejemplo pequeño del problema que tengo.

en el archivo prueba1.php el calendario funciona sin problemas, pero cuando llamo al archivo prueba2.php este no me funcona en dicha pagina, nose cual es el problema ya qe no se como funciona mootools, quizas ese es el problema, espero me ayuden porfa, gracias

PRUEBA1.PHP
Código PHP:
<head>
<link rel="stylesheet" media="screen" href="styles/vlaCal-v2.1.css" type="text/css" />
<link rel="stylesheet" media="screen" href="styles/vlaCal-v2.1-adobe_cs3.css" type="text/css" />
<link rel="stylesheet" media="screen" href="styles/vlaCal-2.1-apple_widget.css" type="text/css" />
    
<script type="text/javascript" src="jslib/mootools-1.2-core-compressed.js"></script>
<script type="text/javascript" src="jslib/vlaCal-v2.1-compressed.js"></script>
    
<script language="JavaScript1.2" src="script.js"></script>
    
<!-- You could also include the uncompressed versions for developing purposes:
<script type="text/javascript" src="jslib/mootools-1.2-core.js"></script>
<script type="text/javascript" src="jslib/vlaCal-v2.1.js"></script>-->
    
<title>Vista-Like Ajax Calendar version 2.1.1 - Examples</title>
    
<style>
body {
        cursor: default;
        text-align: left;
        font-family: calibri, arial, sans-serif;
        font-size: 13px;
        margin: 0;
        padding: 5px;
    }
    
table th {
        vertical-align: top;
    }

input {
        text-align: center;
        font-family: calibri, arial, sans-serif;
        font-size: 13px;
        background-color: white;
        border: 1px solid;
        border-color: #abadb3 #dbdfe6 #e3e9ef #e2e3ea;
        padding: 2px;
    }
input:focus, input:hover  {
        border-color: #5794bf #b7d5ea #c7e2f1 #c5daed;
    }

.pickerImg {
        position: absolute;
        margin-left: -16px;
        margin-top: 5px;
        cursor: pointer;
    }
.infoBox {
        background-color: #fefdec;
        border: 1px solid #edebcd;
        padding: 6px;
        margin-bottom: 20px;
    }
    </style>
    
<script type="text/javascript">
window.addEvent('domready', function() { 
            
    new vlaDatePicker('exampleIII', { openWith: 'togglePicker', offset: { y: -2, x: 2 }, separateInput: { day: 'day', month: 'month', year: 'year' } });
                
        });    
    </script>
</head>

<body>
    
    <table cellpadding="0">
        <tr>
            <th>Example III</th>
            <td>
                <span id="exampleIII">
                    <input name="day" type="text" style="width: 18px; border-width: 1px 0 1px 1px;" maxlength="2" /><input value="/" type="text" style="width: 5px; border-width: 1px 0 1px 0;" disabled="disabled" /><input name="month" class="textbox" type="text" style="width: 16px; border-width: 1px 0 1px 0;" maxlength="2" /><input value="/" type="text" style="width: 5px; border-width: 1px 0 1px 0;" disabled="disabled" /><input name="year" type="text" style="width: 28px; border-width: 1px 0 1px 0;" maxlength="4" /><input type="text" style="width: 15px; border-width: 1px 1px 1px 0;" disabled="disabled" /><img src="images/calendar.gif" id="togglePicker" class="pickerImg" width="13px" height="12px" alt="" />
                </span>
            </td>
        </tr>
        
        
    </table>
    <input type="button" value="Enviar" onclick="envia()" />
    
    <div id="contenido">
    a
    </div>
</body>
</html> 

PRUEBA2.PHP

Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-language" content="en" />
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="copyright" content="R. Schoo" />
    
    <link rel="stylesheet" media="screen" href="styles/vlaCal-v2.1.css" type="text/css" />
    <link rel="stylesheet" media="screen" href="styles/vlaCal-v2.1-adobe_cs3.css" type="text/css" />
    <link rel="stylesheet" media="screen" href="styles/vlaCal-v2.1-apple_widget.css" type="text/css" />
    
    <script type="text/javascript" src="jslib/mootools-1.2-core-compressed.js"></script>
    <script type="text/javascript" src="jslib/vlaCal-v2.1-compressed.js"></script>
    
    <!-- You could also include the uncompressed versions for developing purposes:
    <script type="text/javascript" src="jslib/mootools-1.2-core.js"></script>
    <script type="text/javascript" src="jslib/vlaCal-v2.1.js"></script>-->
    
    <title>Vista-Like Ajax Calendar version 2.1.1 - Examples</title>
    
    <style>
    body {
        cursor: default;
        text-align: left;
        font-family: calibri, arial, sans-serif;
        font-size: 13px;
        margin: 0;
        padding: 5px;
    }
    
    table th {
        vertical-align: top;
    }

    input {
        text-align: center;
        font-family: calibri, arial, sans-serif;
        font-size: 13px;
        background-color: white;
        border: 1px solid;
        border-color: #abadb3 #dbdfe6 #e3e9ef #e2e3ea;
        padding: 2px;
    }
    input:focus, input:hover  {
        border-color: #5794bf #b7d5ea #c7e2f1 #c5daed;
    }

    .pickerImg {
        position: absolute;
        margin-left: -16px;
        margin-top: 5px;
        cursor: pointer;
    }
    .infoBox {
        background-color: #fefdec;
        border: 1px solid #edebcd;
        padding: 6px;
        margin-bottom: 20px;
    }
    </style>
    
    <script type="text/javascript">
        window.addEvent('domready', function() { 
            
            new vlaDatePicker('exampleIII', { openWith: 'togglePicker', offset: { y: -2, x: 2 }, separateInput: { day: 'day', month: 'month', year: 'year' } });
                
        });    
    </script>
</head>
<body>
    
    <table cellpadding="0">
        <tr>
            <th>Example III</th>
            <td>
                <span id="exampleIII">
                    <input name="day" type="text" style="width: 18px; border-width: 1px 0 1px 1px;" maxlength="2" /><input value="/" type="text" style="width: 5px; border-width: 1px 0 1px 0;" disabled="disabled" /><input name="month" class="textbox" type="text" style="width: 16px; border-width: 1px 0 1px 0;" maxlength="2" /><input value="/" type="text" style="width: 5px; border-width: 1px 0 1px 0;" disabled="disabled" /><input name="year" type="text" style="width: 28px; border-width: 1px 0 1px 0;" maxlength="4" /><input type="text" style="width: 15px; border-width: 1px 1px 1px 0;" disabled="disabled" /><img src="images/calendar.gif" id="togglePicker" class="pickerImg" width="13px" height="12px" alt="" />
                </span>
            </td>
        </tr>
        
        
    </table>
    
</body>
</html> 

SCRIPT.JS

Código PHP:
// JavaScript Document

//******************************************************************
//Funcion para la conexion ajax
//******************************************************************
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;
}


//******************************************************************
// FUNCION 
//******************************************************************
function  envia()
{
     
    
    var central;

    central = document.getElementById('contenido');
    ajax=nuevoAjax();
    ajax.open("GET", "prueba2.php?cargar",true);
    
    ajax.onreadystatechange=function() 
    { 
       
        
    
        if (ajax.readyState==4) 
        {  
            central.innerHTML = ajax.responseText
            
        }
        
               
        
    }
    ajax.send(null)
} 
  #5 (permalink)  
Antiguo 20/05/2009, 16:56
 
Fecha de Ingreso: mayo-2009
Ubicación: DF
Mensajes: 39
Antigüedad: 15 años, 7 meses
Puntos: 2
Respuesta: cargar script de mootools
Hola que tal...

Mira hay varios detalles, te los listo:

1.- No definas los estilos 2 veces, mejor crea un archivo estilos.css y vinculalo a tu archivo Prueba1.php el cual es el principal

2.- No es necesario que definas encabezados, <head> <title> <html> o incluso <body> en tu pagina prueba2.php... Ya que como la llamas via ajax, los encabezados que quedan en tu pagina son los de la pagina Prueba1.php

3.- Las lineas:

<script type="text/javascript" src="jslib/mootools-1.2-core-compressed.js"></script>
<script type="text/javascript" src="jslib/vlaCal-v2.1-compressed.js"></script>

Estan definidas en ambos archivos, solo es necesario que lo definas en el primero ya que es el principal ya que creo que eso te puede estar causando el conflicto. Al igual que los estilos, solo cargalos 1 vez

(Pruebalo hasta aqui tal vez ya funcione. )

4.- Ahora bien tu problema es que quieres que al cargar el contenido de prueba2.php se dispare la funcion siguient:

new vlaDatePicker('exampleIII', { openWith: 'togglePicker', offset: { y: -2, x: 2 }, separateInput: { day: 'day', month: 'month', year: 'year' } });

Podrias quitarla del archivo Prueba2 y ponerla en tu JS en la siguiente linea:

if (ajax.readyState==4)
{
central.innerHTML = ajax.responseText
new vlaDatePicker('exampleIII', { openWith: 'togglePicker', offset: { y: -2, x: 2 }, separateInput: { day: 'day', month: 'month', year: 'year' } });
}

Aqui es donde ya se cargo el contenido

---------------------------------------------------

Recuerda que el readyState == 4 significa que la peticion Ajax fue hecha con exito y regreso correctamente, ahora si entonces ya disparas la funcion DatePicker

Espero te sirva
  #6 (permalink)  
Antiguo 20/05/2009, 17:36
 
Fecha de Ingreso: noviembre-2007
Mensajes: 237
Antigüedad: 17 años, 1 mes
Puntos: 4
Respuesta: cargar script de mootools
gracias por la respuesta, hice los cambio que me sugeriste, pero aun asi no me funciona el segundo calendario :(

SCRIPT.JS
Código PHP:
function  envia()
{
     
    
    var central;

    central = document.getElementById('contenido');
    ajax=nuevoAjax();
    ajax.open("GET", "prueba2.php?cargar",true);
    
    ajax.onreadystatechange=function() 
    { 
       
        if (ajax.readyState==4)
        {
        central.innerHTML = ajax.responseText;
        new vlaDatePicker('exampleIII', { openWith: 'togglePicker', offset: { y: -2, x: 2 }, separateInput: { day: 'day',month: 'month', year: 'year' } });
        }
            
    }
    ajax.send(null)
} 

PRUEBA2.PHP
Código PHP:
<table cellpadding="0">
        <tr>
            <th>Example III</th>
            <td>
                <span id="exampleIII">
                    <input name="day" type="text" style="width: 18px; border-width: 1px 0 1px 1px;" maxlength="2" /><input value="/" type="text" style="width: 5px; border-width: 1px 0 1px 0;" disabled="disabled" /><input name="month" class="textbox" type="text" style="width: 16px; border-width: 1px 0 1px 0;" maxlength="2" /><input value="/" type="text" style="width: 5px; border-width: 1px 0 1px 0;" disabled="disabled" /><input name="year" type="text" style="width: 28px; border-width: 1px 0 1px 0;" maxlength="4" /><input type="text" style="width: 15px; border-width: 1px 1px 1px 0;" disabled="disabled" /><img src="images/calendar.gif" id="togglePicker" class="pickerImg" width="13px" height="12px" alt="" />
                </span>
            </td>
        </tr>
</table> 


nose mucho que hace esto, pero sera que falta eso??

window.addEvent('domready', function() {......}
  #7 (permalink)  
Antiguo 21/05/2009, 09:16
 
Fecha de Ingreso: mayo-2009
Ubicación: DF
Mensajes: 39
Antigüedad: 15 años, 7 meses
Puntos: 2
Respuesta: cargar script de mootools
Hola.. igual no habia visto como funcionaba tu script del calendario, sin embargo no logro ver el problema en tu codigo, tal vez necesitaria tenerlo completo.

Me baje el scritp del calendario e hice un ejemplo de lo que deseas hacer, te dejo el ZIP para que lo bajes y lo veas la direccion es

bensite.info/ ejemplos/ calendario.zip
(la puse asi porque aun no puedo postear URLS)

Lo que hice basicamente es un archivo, Prueba1.html el cual tiene un calendario funcionando, desde ahi hago una llamada ajax a Prueba2.html el cual solo trae un input para otro calendario, y al cargarse prueba2 en prueba1 genero el segundo calendario y listo. Funcionan los dos.

Espero te sirva.

Por cierto, estoy usando para la llamada Ajax el objeto Request.HTML es de mootools y simplifica las llamadas Ajax. Puedes hecharle un ojo en la documentacion ded mootools.
  #8 (permalink)  
Antiguo 21/05/2009, 11:57
 
Fecha de Ingreso: noviembre-2007
Mensajes: 237
Antigüedad: 17 años, 1 mes
Puntos: 4
Respuesta: cargar script de mootools
si me a sevido muchas gracias por la ayuda, pero tengo la ultima duda

cuando coloco el siguiente script, en donde tengo todas las funciones, me da el sisguiente error

Código PHP:
window.addEvent('domready', function() { 
            
               
            $('vinculo').addEvent('click', function(ev){
                ev.stop;
                new Request.HTML({
                    url: 'ventas/buscar_ventas.php',
                    method: 'get',
                    update: 'contenido',
                    onComplete: function(){
                        
                        new vlaDatePicker('txb_fecha1');
                            
                    }
                }).send();
            
            });
                
        }); 

window.addEvent is not a function
window.addEvent('domready', function() {
Última edición por oscar2h; 21/05/2009 a las 12:27
  #9 (permalink)  
Antiguo 21/05/2009, 13:55
 
Fecha de Ingreso: mayo-2009
Ubicación: DF
Mensajes: 39
Antigüedad: 15 años, 7 meses
Puntos: 2
Respuesta: cargar script de mootools
Si cargaste la libreria Mootools?????

El codigo que pones arriba debe ir despues de cargar los Js de mootools y tu libreria de Fechas.

Si tu codigo va en un archivo Js. este debe ir cargado despues de las librerias. Me imagino que va por ahi, revisa de nuevo el codigo que te envíe.

Saludos...

Hey y que te parecio el objeto Request.HTML.. de lujo no????

lee la documentacion de mootools y mira todas las opciones que tiene, es genial.
  #10 (permalink)  
Antiguo 21/05/2009, 14:45
 
Fecha de Ingreso: noviembre-2007
Mensajes: 237
Antigüedad: 17 años, 1 mes
Puntos: 4
Respuesta: cargar script de mootools
gracias, si esta excelente los del request.html, gracias.... voy a revisar lo que me aconsejas, no te molesto mas ;)
  #11 (permalink)  
Antiguo 21/05/2009, 18:05
 
Fecha de Ingreso: mayo-2009
Ubicación: DF
Mensajes: 39
Antigüedad: 15 años, 7 meses
Puntos: 2
Respuesta: cargar script de mootools
"no te molesto mas ;)" jajajaj

No es molestia amigo... Anda, espero jale bien todo =)
  #12 (permalink)  
Antiguo 24/05/2009, 19:50
 
Fecha de Ingreso: noviembre-2007
Mensajes: 237
Antigüedad: 17 años, 1 mes
Puntos: 4
Respuesta: cargar script de mootools
me falta otra ayudita con el calendario ja, como puedo hacer que el textbox este vacio al comienzo, solo se llene cuando se seleccione la fecha, lo intente pero lo unico que pude hacer es sacar la fecha, pero me aparece un 1 en su lugar :(

gracias
  #13 (permalink)  
Antiguo 25/05/2009, 10:21
 
Fecha de Ingreso: mayo-2009
Ubicación: DF
Mensajes: 39
Antigüedad: 15 años, 7 meses
Puntos: 2
Respuesta: cargar script de mootools
Creo que deberias ver la documentacion del Calendario, imagino que debe existir algun parametro por ahi que haga eso.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 09:11.