Archive for category: AJAX

07Jan 2009 40 Comments

Combos dependientes AJAX

Categories: AJAX, PHP - Tags: , , ,

Muchas veces necesitamos crear combos que se llenen según lo que elegimos en otro combo, por ejemplo si tenemos un combo paises queremos que cuando se elija un país, otro combo se llene con las ciudades o estados.
Seguramente haz visto otros tutoriales y ejemplos pero estos son muy dificiles de modificar a lo que tu deseas, asi que he decidio implementar estos combos dependientes con jquery y con 2 archivos php llamados combo1.php y combo2.php, donde puedes modificar facilmente lo que desees que haga el combo.

Crear los combos dependientes

Veamos primero el codigo html que vamos a usar para este ejemplo

1
2
3
4
5
6
7
8
9
<select name="combo1" id="combo1"> 
    <option value="op1_1">Option1</option>
    <option value="op1_2">Option2</option>
    <option value="op1_3">Option3</option>    
</select>
<select name="combo2" id="combo2"> 
</select>
<select name="combo3" id="combo3"> 
</select>

Ojo: puedes cambia el nombre de los combobox al que desees pero no modifiques el ID

Implementando la función JQuery

Voy a postear el codigo unicamente para el primer combo, ya que el segundo es practicamente igual (si deseas ver el codigo completo basta que descargues el ejemplo)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function(){
// Creamos el evento change para detectar el elemento elegido
$("#combo1").change(function () {
    $("#combo1 option:selected").each(function () {
                        // capturamos el valor elegido
            elegido=$(this).val();
                        // Llamamos al archivo combo1.php
            $.post("combo1.php", { elegido: elegido }, function(data){
                        // Asignamos las nuevas opciones para el combo2
            $("#combo2").html(data);
                        // reseteamos el combo3
            $("#combo3").html("");
        });        
        });
   })
});

Modificando las opciones mostradas

Si descargas el ejemplo veras que hay 2 archivos: combo1.php y combo2.php los cuales contiene un echo que segun el valor enviado imprime el contenido del combo2 y combo3 respectivamente. Si quisieras hacer que invoquen una base de datos simplemente pega tu codigo de conexión con un bucle que imprima el contenido del combo, es decir una cadena con los select.

1
2
3
4
5
6
$rpta= '
    <option value="op2_1">Option1</option>
    <option value="op2_2">Option2</option>
    <option value="op2_3">Option3</option>
    '; 
echo $rpta;

Puedes descargar todo el codigo AQUI
Puedes ver la demo AQUI

02Jan 2009 0 Comments

Star Rating jquery sin base de datos 2

Categories: AJAX, PHP - Tags: , , , ,

Puedes ver la primera parte del tutorial aqui
Ya tenemos las estrellas, tambien se marcan las estrellas, ahora nos falta guardar la votación
<h2>Guardar la votación</h2>
Para eso debemos crear un archivo llamado datos.txt y deben asegurarnos que sea escribible, el codigo php requerido es:

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
// Verificamos si se ha votado
if (isset($_POST['my_vote'])) {
Abrimos el archivo datos.txt
$filename = 'datos.txt';
// Capturamos el valor del voto
$somecontent = $_POST['my_vote']."\n";
// Verificamos que nuestro archivo sea escribible
if (!$handle = fopen($filename, 'a')) {
echo "Cannot open file ($filename)";
exit;
}
// Escribimos $somecontent en nuestro archivo
if (fwrite($handle, $somecontent) === FALSE) {
// Marcamos error de escritura
echo "Cannot write to file ($filename)";
exit;
}
// El archivo se escribio correctamente y lo cerramos
fclose($handle);
}
//abro el archivo para lectura
$archivo = fopen ("datos.txt", "r");
$num_lineas = 0;
while (!feof ($archivo)) {
// Leo linea por linea las votaciones pasadas
if ($linea = fgets($archivo)){
// Guardo la cantidad de votaciones y sus valores
$num_lineas++;
$valores[$num_lineas]=$linea;
}
}
fclose ($archivo);
//print_r($valores);
// Calculo el total
$total=0;
for ($i=1; $i&lt;=$num_lineas; $i++) {
$total=$total+$valores[$i];
}
// Hallo el promedio y lo redondeo
$promedio=$total/$num_lineas;
echo "total: ".round($promedio);
?&gt;

Finalmente puedes decargar todos los archivos del tutorial aqui

02Jan 2009 8 Comments

Star Rating jquery sin base de datos 1

Categories: AJAX, PHP - Tags: , , , ,

Para la parte del css me he basado en el codigo de Komodo Media, e cual pueden encontrar aqui
Lo interesante de este script es que uso jquery y guardo la votación en un archivo de texto y asi ya no requiero una base de datos

El diseño

Las instrucciones detalladas como ya indique las pueden encontrar en Komodo Media, asi que yo me voy a limitar a copiar el codigo del formulario.

1
2
3
4
5
6
7
8
9
10
11
12
13
<form name="frm_rating" method="post" action="index.php">
    <ul class='star-rating'>
        <li class='current-rating' style='width:<?php echo 25 * round($promedio);?>px;'>Currently 3.5/6 Stars.</li>
        <li class="star"><a href='#' title='1' class='one-star'>1</a></li>
        <li class="star"><a href='#' title='2' class='two-stars'>2</a></li>
        <li class="star"><a href='#' title='3' class='three-stars'>3</a></li>
        <li class="star"><a href='#' title='4' class='four-stars'>4</a></li>
        <li class="star"><a href='#' title='5' class='five-stars'>5</a></li>
        <li class="star"><a href='#' title='6' class='six-stars'>6</a></li>
    </ul>
    <input type="hidden" name="my_vote" value="0" id="my_vote" />
    <input type="submit" name="submit" value="Votar" />
</form>

La hoja de estilos y el grafico de las estrellas lo encuentran en el archivo zip al final del tutorial

AJAX

Ahora necesito que cuando se le de click a una estrella, esta se marque y el valor del campo hiddden “my_vote” se modifique
Para eso voy a hacer un simple javascript invocando mi libreria jquery:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script language="javascript" src="jquery-1.2.6.min.js"></script>
<script language="javascript">
$(document).ready(function(){
       // Detecto la estrella que es presionada
    $("li.star a").click(function(event){  
                // Recojo el valor de la estrella      
        valor_actual=$(this).attr("title");
                // Cambio el estilo para mostrar la estrella seleccionada
        $("li.current-rating").css("width", valor_actual*25);
                // Cambio el valor del campo hidden
        $("#my_vote").attr("value", valor_actual);
    });
});
</script>

Pueden ver la segunda parte del tutorial aqui
Otra forma de hacer un Star Rating usando un plugin para Jquery

06Nov 2008 12 Comments

File Manager para NicEdit

Categories: AJAX, PHP - Tags: , , ,

NicEdit es un pequeño pero muy potente editor WYSIWYG, pero le faltaba una herramienta muy util como es un administrador de archivos que además incluya la capacidad de subir archivos, es por eso que he programado esta pequeña utilidad extra.

Puedes descargar todos los archivos aqui

Para configurarlo, edita el archivo filemanager/config.inc.php

Para verlo funcionando, simplemente elige el icono de imagen y veras un nuevo boton “Choose”, este abrirá el administrador de archivos

filemanager-uploader

filemanager-uploader

Suscribete

Ahora también puedes suscribirte via correo electrónico

Ingresa tu dirección de correo:

Delivered by FeedBurner


Facebook

Mi Galeria flickr

[ Ver más ]

© Copyright - Miguel Manchego - Design by Kriesi