rails y más cosas » Ajax http://www.railsymas.com Nuevas Tecnologías Sat, 28 Jan 2012 10:23:40 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Desarrollo web ejemplo jquery botones http://www.railsymas.com/2010/04/29/desarrollo-web-ejemplo-jquery-botones/ http://www.railsymas.com/2010/04/29/desarrollo-web-ejemplo-jquery-botones/#comments Fri, 30 Apr 2010 00:48:37 +0000 admin http://www.railsymas.com/?p=1476 Jquery nos permite trabajar de una forma rápida y sencilla con el dom del árbol de elementos

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script  type="text/javascript" src="jquery.js" ></script>	
 <style type="text/css">
   #contenedor {
     width:600px;
     margin-left:auto;
     margin-right:auto;
   }
   #contenido {
   width:370px;    
   float:left;
   height:400px;
   }
 
   .segundo
   {
     font-size:14px;
     background-color:#ff8844;
   }
   .tercero
   {
     font-size:16px;
     background-color:#88ff77;
   }
   .contenidonuevo{
    color:#fff;    
   }
 
   #capaboton {
     float:left;
     width:160px;         
     padding:20px;    
    }
 
    .boton { width:100px;
    background-color:#ccc;
    border: #ddd 3px solid;
    padding:10px;     
    text-align:center;
    margin-bottom:5px;
    }  
 
    .seleccionado {
    border-style:double;
    border-color:#000;
   }    
   .ocultar {
    display:none;
   }
 
   </style>
  <script type="text/javascript">
 
     $(document).ready( function()
     { 
	$("#primero").bind("click", function () {
 
	  $("#contenido").removeClass("segundo").removeClass("tercero");	
	  $("#capaboton .boton").removeClass("seleccionado");
	  $(this).addClass("seleccionado");
 
 
	});
 
	$("#segundo").bind("click", function () {
 
	  $("#contenido").addClass("segundo").removeClass("tercero");
	  $("#capaboton .boton").removeClass("seleccionado");
	  $(this).addClass("seleccionado");
	});
 
	$("#tercero").bind("click", function () {
 
	  $("#contenido").addClass("tercero").removeClass("segundo");
	  $("#capaboton .boton").removeClass("seleccionado");
	  $(this).addClass("seleccionado");
 
	 });
	$("#contenido h2").toggle(	
	function() { $("#capaboton .boton").addClass("ocultar"); }
	, 
        function() { $("#capaboton .boton").removeClass("ocultar"); }        
	);
     }
     );
  </script>
</head>
<body>
<div id="contenedor">
  <div id="contenido">
    <h2> Jquery </h2>
    <p>
       texto dentro de una capa de contenido
    </p>       
  </div>
  <div id="capaboton">
     <div class="boton" id="primero">
     cambiar
     </div>
     <div class="boton" id="segundo">
     cambiar dos
     </div>
     <div class="boton" id="tercero">
     cambiar tres
     </div>
  </div>
</div>
</body>
</html>

imagen inicial

seleccionamos el segundo botón

seleccionamos el tercer botón

]]> http://www.railsymas.com/2010/04/29/desarrollo-web-ejemplo-jquery-botones/feed/ 0 Calendario realizado con prototype http://www.railsymas.com/2009/11/30/calendario-realizado-con-prototype/ http://www.railsymas.com/2009/11/30/calendario-realizado-con-prototype/#comments Mon, 30 Nov 2009 19:09:29 +0000 admin http://www.railsymas.com/?p=956 months
Número de meses que mostramos (default: 2).
format
Formato para las fechas en los elementos input (default: %b %d, %Y)
weekOffset
Fecha de inicio de la semana (usa 1 para empezar la semana en Lunes).
startField, endField
Declara un rango de inicio y fin. (por defecto lo genera automáticamente)
previousButton, todayButton, nextButton, resetButton


Declara los botones de navegación (por defecto lo genera automáticamente)
earliest, latest
Permite espeficiar los rangos de fechas anteriores o posteriores que no podrán ser seleccionadas
maxRange
Limita el máximo de días a la vez

Enlace a la web Time frame

]]> http://www.railsymas.com/2009/11/30/calendario-realizado-con-prototype/feed/ 0 filosofía menos es más http://www.railsymas.com/2009/08/10/filosofia-menos-es-mas/ http://www.railsymas.com/2009/08/10/filosofia-menos-es-mas/#comments Mon, 10 Aug 2009 09:12:16 +0000 admin http://www.railsymas.com/?p=406 Es el lema que reza en el proyecto jquery, como con menos líneas de código podemos hacer más cosas. Una de las ventajas de jquery es la facilidad para poder acceder a diferentes elementos del árbol del dom sin tener que escribir pesadas líneas de código (bucles), para llegar al elemento y poder aplicar un efecto.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<script  type="text/javascript"   src="jquery.js"></script>
<style type="text/css">
   .par { color:#995511;   }
   .impar { color:#6666ff; }
   .unica { color:#779999; }
</style>
   <script type="text/javascript">
 
   $(document).ready ( function() {
        $("tr:odd").addClass("impar");
	$("tr:even").addClass("par");
	$('td:contains("tercera")').parent().find("td:eq(2)").addClass("unica");
   }	   
   );
      </script>
</head>
<body>
<table>
 
   <tr>
     <td> elemento uno </td>
     <td> elemento dos </td>
     <td> elemento tres </td>
   </tr>
   <tr>
    <td>  elemento dos uno</td>
    <td>  elemento dos dos </td>
    <td>  elemento dos tres </td>
   </tr>
   <tr>
    <td>  tercera fila </td>
    <td>  elemento tres dos </td>
    <td>  elemento tres tres </td>
   </tr>
 
</table>

cuando la función ready indica que el ábol del dom esta preparado acceder las filas de la tabla es algo rápido y sencillo.
Con $(“tr:odd”).addClass(“impar”) estamos añadiendo la clase css impar a las filas impares de la tabla, para las pares hacemos $(“tr:even”).addClass(“par”);

Tal es la versatilidad de jquery que nos permite acceder al padre “parent” “sibiling” hermano de un elemento del dom.

Para modificar el segundo elmento de la fila de la tabla que contiene la palabra “tercera” hacemos, $(‘td:contains(“tercera”)’).parent().find(“td:eq(2)”).addClass(“unica”); y le aplicamos la clase única.

]]> http://www.railsymas.com/2009/08/10/filosofia-menos-es-mas/feed/ 0 jquery framework para javascript http://www.railsymas.com/2009/08/09/jquery-framework-para-javascript/ http://www.railsymas.com/2009/08/09/jquery-framework-para-javascript/#comments Sun, 09 Aug 2009 11:04:52 +0000 admin http://www.railsymas.com/?p=398 jqurery

Para instalar jquery, nos descargamos la la página web oficial www.jquery.com el archivo jquery.js.

Para utilizarlo en los html ponemos . Es necesario insertar primero jquery.js si lo van a utilizar otros ficheros js creados por nosotros.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<head>
<style type="text/css">
	 .boton {   color:#00ff00;
			font-size:14px;
			text-decoration:none;
	            }
	</style>
        <script type="text/javascript" src="jquery.js"></script> 
	<script type="text/javascript">
	$(document).ready( 
	function mensaje ()
	{
	    alert ("hola mundo \n");
	    $("a").addClass("boton");
 
 
	}
	);
		</script>
 </head>
 <body>
   <a href="www.railsymas.com">enlace</a>
 
 </body>

Tenemos un estilo css incorporado a la página html y mediante jquery vamos a cambiar el color del enlace del body de azul predeterminado a verde además de cambiar el tamaño del texto del enlace.

Mediante $(document).ready, jquery determina que el árbol del dom está listo para ser tratado. Se carga la función mensaje que muestra una pequeña ventana de javascript con el mensaje hola mundo y $(“a”).addClass(“boton”); añade al enlace la clase boton de css.

]]> http://www.railsymas.com/2009/08/09/jquery-framework-para-javascript/feed/ 0 Ajax y php 3 parte http://www.railsymas.com/2009/07/14/ajax-y-php-3-parte/ http://www.railsymas.com/2009/07/14/ajax-y-php-3-parte/#comments Tue, 14 Jul 2009 09:52:44 +0000 admin http://www.railsymas.com/?p=235 Para terminar tenemos el código del fichero php respuesta.php

1
2
3
4
5
6
7
8
9
10
11
12

<?
 
	if (isset($_POST))
	{   
	    $nombre=$_POST["deporte"];
	    $apellidos=$_POST["color"];
	   $correo=$_POST["correo"];
 
	    echo "{deporte:'$deporte', color:'$color', correo:'$correo'}";
 
	}
?>
]]> http://www.railsymas.com/2009/07/14/ajax-y-php-3-parte/feed/ 0 Ajax y php 2 parte http://www.railsymas.com/2009/07/13/ajax-y-php-2-parte/ http://www.railsymas.com/2009/07/13/ajax-y-php-2-parte/#comments Mon, 13 Jul 2009 22:10:43 +0000 admin http://www.railsymas.com/?p=169 Código del fichero javascript validacion.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324

// JavaScript Document
 
window.onload=function ()
{
  document.forms[0].onsubmit=recogerFormulario;
  var selector=document.forms[0];
  selector.estilo.onchange=establecerEstilo;	 
 
 
}
 
// Definimos un constructor para los datos del formulario para quedar almacenados y trabajar con ellos
function formulario (deporte,color,correo)
{
   //propiedad deporte de la clase
   this.deporte=deporte;
   this.color=color;
   this.correo=correo;
   this.valido=false;
   this.mensaje="";
   //asignar la propiedad de un objeto a una funcion externa 
   this.validar=validar;
}
 
 
function recogerFormulario()
{ 
  //le pasamos los datos a las correspondientes funcion de comprobacion pasandole el nombre etc gracias al this del formulario 
 
   chequeoCampos(this.deporte.value,this.color.value,this.correo.value);
  // return false;
}
 
 
function validar(registro) 
{ 
 
 
	 //primero comprobamos que los campos del formulario no estan vacios 
	 //variable local que indica si todos los campos estan completos
	 var completo=true;
	 var direccion=true;
 
 
	 if ( this.deporte==null || this.deporte.length==0 )
	    {  completo=false; }
 
	 if ( this.color==null || this.color.length==0)
	 	{   completo=false; }
 
	 if ( this.correo==null || this.correo.length==0)
	 	{ completo=false; }
 
     if (this.correo.indexOf(".") == -1 || this.correo.indexOf("@") ==-1 || this.correo.indexOf(" ")!=-1)
	 {
		direccion=false; 
	 }
 
	if ((completo==true) && (direccion==true))
	{ this.valido=true; }
 
 
	descodificarMensaje(completo,direccion);	 
 
 
}
 
 
function descodificarMensaje(completo,direccion)
{
  var texto="";
  if (completo==false)
  {  texto="hay campos sin completar"; }
  else
  {
  if (direccion==false)
  {  texto="la direccion de correo no es correcta"; }
 
  }
 
  mensaje(texto,"red");
} 
 
 
//funcion encargada de mostrar el mensaje por pantalla en un determinado color
 
function limpiar()
{
  var formulario=document.forms[0];
 
  formulario.deporte.value="";
  formulario.color.value="";
  formulario.correo.value="";
 
}
 
function mensaje(texto,colores)
{ 
   //accedemos a la capa mensaje para escribir el codigo correspondiente
   var msj=document.getElementById("mensaje");
 
 
   //si no hay mensaje de error todo esta bien limpiamos los campos y si tenemos un mensaje anterior lo limpiamos
   if (texto=="")
   { limpiar();
       if (msj.hasChildNodes()) //si tienes nodos hijos
       {
	     msj.removeChild(msj.firstChild);
 
       }
 
   }
 
   //en caso contrario cogemos y escribimos el mensaje correspondiente y en el color correpondiente
   else
   {  
 
 
   //determinamos las propiedades de estilo
   msj.style.color=colores;
   msj.style.fontSize="0.9em";
 
   //eliminamos los mensajes antiguos que tuviese esa capa anteriormente
   if (msj.hasChildNodes()) //si tienes nodos hijos
   {
	  msj.removeChild(msj.firstChild);
 
   }
 
   //creamos el nuevo
   msj.appendChild(document.createTextNode(texto));
   }
 
 
}
 
 
function crearCadenaConsulta (deporte,color,correo)
{
 
 var cadenaConsulta="";
 
 cadenaConsulta="deporte="+deporte+"&"+"color="+color+"&"+"correo="+correo;
 
 
 return cadenaConsulta;  
 
 
}
 
 
 
 
function chequeoCampos(valordeporte,valorcolor,valorCorreo)
{   
 
	//creamos un objeto de la clase formulario
	var cadenaConsulta;
 
	var registro=new formulario(valordeporte,valorcolor,valorCorreo);
 
	//direccion de la url a donde va la peticion
	var url;
 
	//validate se convierte en la propiedad de 
	registro.validar();
 
 
	//si el registro es valido pasamos a crear la cadena de consulta 
	if (registro.valido==true)
	{
	  cadenaConsulta=crearCadenaConsulta(registro.deporte,registro.color,registro.correo);
 
	  peticion(cadenaConsulta);
	}
 
 
 
}
 
 
function peticion (cadenaConsulta)
{  
   //la direccion url donde ubicammos el fichero php
   var url="respuesta.php";
 
   if (window.XMLHttpRequest)
   {
 
	 http_request=new XMLHttpRequest();
 
   }
 
   else
   {
	  if (window.ActiveXObject)
	  {
 
		  http_request=new ActiveXObject("Microsoft.XMLHTTP");
 
		  if (!http_request)
		  {
			  http_request=new ActiveXObject("Msxml2.XMLHTTP");
		  }
	   }
    }
 
 
	try
	{
	http_request.onreadystatechange=muestraContenido;
	http_request.open("POST",url,true);
 
	//configuracion de la cabecera de una aplicacion post content type
	http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
	http_request.send(cadenaConsulta);
	}
 
	catch (err)
	{
		alert("espera unos segundo y vuelve a intentar conectar el servidor");
	} 
 
 
}
 
 
function muestraContenido ()
{    
 
	 if (http_request.readyState== 4 )
	 {  
	     alert("peticion completa");
 
		 if (http_request.status==200)
		 {   
			var respuesta=http_request.responseText;
		    alert(respuesta);
			var obj=eval("("+respuesta+")");
 
			devolverDatos(obj);
 
		 }
 
	 	 else
	 	 {
          alert("problema con la comunicacion con el servidor");
	 	 }
	 } 
 
}
 
 
function devolverDatos (obj)
{
	//mandamos los datos del servidor a la pagina del formulario a la capa de datos
	var capaDatos=document.getElementById("datos");
 
	//creamos la cadena a mostrar
 
    var info="<h4> Los datos del proceso de inscripción son:<h4>";
 
	info+="<br/>deporte: "+obj["deporte"]+"<br/>color: "+obj["color"]+"<br/>correo: "+obj["correo"]+"<br/>";
 
	//limpiamos si hay texto dinamico html
 
	capaDatos.innerHTML="";
 
	//damos formato
 
	capaDatos.style.backgroundColor="#99CC00";
	capaDatos.style.color="#FFFFFF";
	capaDatos.style.width="80%";
	capaDatos.style.border="thin solid black";
	capaDatos.style.padding="0.5em";	
	capaDatos.innerHTML=info;
 
}
 
 
function establecerEstilo ()
{
   var estilo=this.value;
   var capaDatos=document.getElementById("datos");
 
 
 
   switch (estilo) 
   {
	  case 'verde':
	  capaDatos.style.backgroundColor="#99CC00";
	  capaDatos.style.color="#FFFFFF";
	  capaDatos.style.width="80%";
	  capaDatos.style.border="thin solid black";
	  capaDatos.style.padding="0.5em";
	  break;
 
 
	  case 'azul':
	  capaDatos.style.backgroundColor="#0099FF";
	  capaDatos.style.color="#FFFFFF";
	  capaDatos.style.width="80%";
	  capaDatos.style.border="thin solid red";
	  capaDatos.style.padding="0.5em";
	  break;
 
	  case 'rosa':
	  capaDatos.style.backgroundColor="#FF33FF";
	  capaDatos.style.color="#FFFFFF";
	  capaDatos.style.width="80%";
	  capaDatos.style.border="thin solid green";
	  capaDatos.style.padding="0.5em";
	  break;
 
	  case 'cosmopolita':
	  capaDatos.style.backgroundColor="#6633CC";
	  capaDatos.style.color="#FFFFFF";
	  capaDatos.style.maxWidth="80%";
	  capaDatos.style.border="thin solid yellow";
	  capaDatos.style.padding="0.5em";
	  break;
 
   }
}

Enlace “link” a siguiente post Enlace Ajax 3 parte FINAL DEL EJEMPLO “finish”

]]> http://www.railsymas.com/2009/07/13/ajax-y-php-2-parte/feed/ 0 Ajax y php 1 parte http://www.railsymas.com/2009/07/13/ajax-y-php-1-parte/ http://www.railsymas.com/2009/07/13/ajax-y-php-1-parte/#comments Mon, 13 Jul 2009 20:11:49 +0000 admin http://www.railsymas.com/?p=210 Creación del formulario html que nos va a servir para la recogida de datos que se le van a pasar al fichero php

Código del fichero html formulario html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<script type="text/javascript" src="validacion.js"> </script>
</head>
<body>
<h1>formulario</h1>
<form action="javascript:void%200">
<div id="mensaje"></div>
<p>Deporte favorito: <input type="text" name="deporte" size="20" maxlength="20"/></p>
<p>Color favorito: <input type="text" name="color" size="20" maxlength="20" /></p>
<p>Dirección de Correo: <input type="text" name="correo" size="20" maxlength="40" /></p>
<br/>
<input type="submit" name="enviar" value="enviar" />
<br/>
<br/>
<select name="estilo"> 
	<option label="verde" value="verde" selected>Verde</option>
	<option label="rosa" value="rosa">Rosa</option>
	<option label="azul" value="azul">Azul</option>
	<option label="cosmopolita" value="cosmopolita">Cosmopolita</option>
</select>
<br/>
<br/>
<div id="datos"></div>
</form>
</body>

Como se puede observar se trata de un formulario simple en el que se piden una serie de datos al usuario y se comprueba si estan en blanco los datos y si es una direccion de correo (“no se utilizan expresiones regulares”)
formularioajax

Una vez rellenados los campos correctamente el código javascript nos muestra las siguientes pantallas
peticioncompleta
Los datos enviados al servidor
datos
resultado de la devolución de los datos desde el servidor
resultado

Enlace “link” a siguiente post Enlace Ajax 2 parte

]]> http://www.railsymas.com/2009/07/13/ajax-y-php-1-parte/feed/ 1