Vamos a poner que tenemos un formulario con una caja de texto y un botón submit. Lo que haremos será desactivar o deshabilitar el botón submit hasta que no haya algo escrito en la caja de texto.

<input type="text" name="textField" />
 <input type="submit" value="send" />

Para deshabilitar o desactivar el boton submit. Usaremos Jquery para llevar a cabo esta tarea y no usar Javascript a pelo.
Seleccionamos todos los inputs que sean del tipo submit y le agregamos el atributo disabled=”disabled”

$('input[type="submit"]').attr('disabled','disabled');

Para habilitar o activar el botón submit y poder enviar el formulario. Ejecutamos el siguiente código. Que lo que hace es eliminar el atributo disabled que hemos agregado anteriormente.

$('input[type="submit"]').removeAttr('disabled');

Ejemplo completo.
Cuando la caja de texto esta vacía el botón submit de desactiva. Cuando algo se escribe en la caja del formulario se muestra el boton submit activo. Si la caja de texto volviese a estar vacía se tendría que volver a desactivar el botón submit otra vez.

$(document).ready(function(){
     $('input[type="submit"]').attr('disabled','disabled');
     $('input[type="text"]').keypress(function(){
            if($(this).val() != ''){
               $('input[type="submit"]').removeAttr('disabled');
            }
     });
 });

Tags de búsquedas:

javascript habilitar botón al marcar un cjeckbox, jquery desactivar click, activar y desactivar botones con js, habilitar boton en jquery, html deshabilitar formulario y hacer un submit, jquery bloquear elementos dentro un div, jquery deshabilitar boton, jquery habilitar por id, jquery submit, deshabilitar un boton y habilitar uno deshabilitado javascript

Related posts:

1. Comprobar, seleccionar y deseleccionar todos los checkbox de un formulario con jquery
2. Cambiar el nombre de una clase css con javascript y con jquery
3. ajax y jquery en cakephp
4. Añadir el boton “me gusta” “like” de Facebook en tu blog wordpress
5. Registrar eventos del botón +1 de Google en Google Analytics

(function() {
   // Inicialmente ocultamos todos los elementos del listado
   var lis = $('li').hide();

   // El desencadenante es en este caso un anchor, un enalce. Esto es muy generico pero se puede customizar, claro.
   $('a').click(function() {
      var i = 0;

      // Hacemos un FadeIn a cada elemento del listado cuando llega a los 200 ms, despues,
      // cuando ha terminado, recursivamente se llama a displayImages.
      // Cuando eq(i) hace referencia a un elemento que no existe,
      // jQuery devolverá un objeto vacio y no continuará haciendo fadeIn
      (function displayImages() {
         lis.eq(i++).fadeIn(200, displayImages);
      })();
   });
})();

Lo que hace este uso efectivo es el hecho de que, cuando lis.eq (i) se refiere a un elemento que no existe en el conjunto, se devuelve un objeto vacio jQuery. Cuando esto sucede, los métodos posteriores de la cadena (fadeIn) nunca será llamados.

Fuente: http://net.tutsplus.com/

Tags de búsquedas:

hacer lista de viseos con jquery

Related posts:

1. Comprobar, seleccionar y deseleccionar todos los checkbox de un formulario con jquery
2. Centrar un div con jquery
3. Cambiar el nombre de una clase css con javascript y con jquery
4. mensajes de ayuda o tooltip con jquery
5. Jquery activar desactivar boton submit de formulario

Seleccionar/deseleccionar un checkbox:

// Seleccionar un checkbox
$('input[name=acheckbox]').attr('checked', true);

// Deseleccionar un checkbox
$('input[name=acheckbox]').attr('checked', false);

Seleccionar/deseleccionar todos los checkbox:

// Seleccionar todos los checkboxes
$("input:checkbox").attr('checked', true);

// Deseleccionar todos los checkboxes
$("input:checkbox").attr('checked', false);

A continuación una función para obtener la lista de checkboxes seleccionados.
Se crea una función que extiende las propiedades de Jquery. Para todos los checkbox seleccionados se va guardando su valor en un array.
Con este array se puede pasar a un ajax, a otra funcion jquery, o se puede hacer lo que cada uno desee en su lógica.
También se puede hacer un alert() con el array para testear y comprobar los datos del mismo antes de continuar.

jQuery.fn.getCheckboxValues = function(){
    var values = [];
    var i = 0;
    this.each(function(){
        values[i++] = $(this).val();
    });
    return values;
} 

var arr = $("input:checked").getCheckboxValues();

Tags de búsquedas:

checkbox marcar desmarcar todos, ajax comprobar checkbox, obtener datos vector checkbox nombre, obtener el valor de un checkbox jquery, pasar chekbox a array en php, pasar parametros con ajax jquery, pasar valores de checkboxes a arreglo con javascript, recoger valores checkbox jquery, seleccionar checkbox javascript, seleccionar todos los tags con el mismo nombre en jquery

Related posts:

1. Jquery activar desactivar boton submit de formulario
2. Cambiar el nombre de una clase css con javascript y con jquery
3. Mostrar elementos secuencialmente con Jquery
4. Centrar un div con jquery
5. mensajes de ayuda o tooltip con jquery

Fue bastante complejo y me llevó un tiempo, ahora lo retomo para publicarlo y compartirlo. Inicialmente seguí las indicaciones de un articulo publicado en bakery.cakephp.org que al final se puede ver la fuente original.

El sistema de votos por estrellas es ya muy conocido y lo tienen integrados muchos sites, pero meterlo en cakephp es un poco mas “laberíntico” porque hay muchos archivos que interfieren y en muchas capas de la lógica.

A continuación indico los pasos que he seguido

1 )
Lo primero descargar el plugin. Tener en cuenta la versión de Cakephp que uséis. Aquí indico las dos versiones disponibles hasta el momento.

Descargar Rating plugin v2.3 for CakePHP 1.2.zip - Descargado 40 veces


Descargar Rating plugin v2.4 for CakePHP 1.3 .zip - Descargado 89 veces

2)
Extraer el plugin, incluir la carpeta rating en la carpeta de plugins en app/plugins

3)
Copiar el archivo rating/config/plugin_rating.php a tu carpeta app en app/config/plugin_rating.php

En este archivo se pueden especificar muchos detalles de configuración

Si se quiere habilitar para que usuarios anónimos no logeaos puedan usar el sistema para votar habrá que tener la siguiente activa a true

$config['Rating.guest'] = true;

Otro punto interesante de la configuración del plugins es poder guardar los resultados de cada voto en su modelo (tabla) correspondiente. Para ello tener en cuenta las siguientes variables.

$config['Rating.saveToModel'] = true;
$config['Rating.modelAverageField'] = 'votos_media';
$config['Rating.modelVotesField'] = 'votos';

Vienen bien explicadas en el archivo, así como las sqls que habría que ejecutar para crear los campos necesarios en cada tabla. Pero serían así



ALTER TABLE [TABLA] ADD (votos_media decimal(3,1) unsigned default '0.0');
ALTER TABLE [TABLA] ADD (votos int(11) unsigned default '0');

Si esto diera algún problema, recordar borrar la cache de los modelos  en  app/tmp/cache/models.

4)
Ejecutar las consultas que hay en el archivo install.sql para crear la tabla de ratings donde se guardarán todos los votos.

CREATE TABLE `ratings` (
 `id` int(11) unsigned NOT NULL auto_increment,
 `user_id` char(36) NOT NULL default '',
 `model_id` char(36) NOT NULL default '',
 `model` varchar(100) NOT NULL default '',
 `rating` tinyint(2) unsigned NOT NULL default '0',
 `name` varchar(100) default '',
 `created` datetime default NULL,
 `modified` datetime default NULL,
 PRIMARY KEY (`id`),
 KEY `rating` (`model_id`,`model`,`rating`,`name`)
);

5)
Cargar los archivos javascript y css del plugin en el layout o directamente en una vista. Reemplazar [your_framework] por prototype_min o jquery_min dependiendo del framework javascript que useis.
Personalmente yo he usado y me gusta mucho mas jquery.

<?php
 echo $javascript->link('/rating/js/rating_jquery_min');
 echo $html->css('/rating/css/rating');
?>

6)
Agregar el elemento rating en la vista de la siguiente manera. Reemplazar [name_of_your_model] y [id_of_your_model] por vuestros valores

<?php
echo $this->element('rating', array('plugin' => 'rating',
 'model' => '[name_of_your_model]',
 'id' => [id_of_your_model]));
?>

Un ejemplo real podría ser el siguiente:

<?php
echo $this->element('rating', array('plugin' => 'rating',
'model' => 'Articulo',
'id' => $articulo_ficha['Articulo']['id']));
?>

Puediera ser que os de errores. Yo tuve que poner el archivo /rating/model/rating.php en mi aplicación app/models/rating.php
También comenté todo el sistema que tiene de validación de campos.

<?php
/**
 * Model for the AJAX star rating plugin.
 *
 * @author Michael Schneidt <michael.schneidt@arcor.de>
 * @copyright Copyright 2009, Michael Schneidt
 * @license http://www.opensource.org/licenses/mit-license.php
 * @link http://bakery.cakephp.org/articles/view/ajax-star-rating-plugin-1
 * @version 2.3
 */
class Rating extends RatingAppModel {
  var $name = 'Rating';
  /*
  var $validate = array('user_id' => array('rule' => array('maxLength' => 36),
                                           'required' => true),
                        'model_id' => array('rule' => array('maxLength' => 36),
                                            'required' => true),
                        'model' => array('rule' => 'alphaNumeric',
                                         'required' => true));
*/
}
?>

Espero que os funcione a la primera!

Fuente original: http://bakery.cakephp.org/articles/schneimi/2010/08/19/ajax-star-rating-plugin-1

Tags de búsquedas:

cakephp sistema de votacion, ajax sistema de comentarios, sistema de votacion ajax, sistema de votacion con ajax, sistema de votación con estrellas o star rating con jquery, sistema de votacion online jquery, sistemas votacion estrellas php

Related posts:

1. ajax y jquery en cakephp
2. usando memcached con cakephp
3. recortar imagenes en cakephp con jquery.
4. cakephp funcion para bloquear ips y evitar spam
5. Autocomplementador en AJAX

Con la función $(window).width() y $(window).height() obtenemos el ancho y altura de la ventana abierta.
Con la función outerWidth() y outerHeight() obtenemos el ancho y altura del div.

$(document).ready(function(){

     $(window).resize(function(){
          $('#contenedor_caja').css({
               position:'absolute',
               left: ($(window).width() - $('#contenedor_caja').outerWidth())/2,
               top: ($(window).height() - $('#contenedor_caja').outerHeight())/2
          });

	});

// Ejecutamos la función
$(window).resize();

});

<div id="contenedor_caja">
<p>Contenido del div</p>
</div>

Tags de búsquedas:

centrar div horizontalmente jquery, centrar una pantalla javascript, centrar con javascript, funcion java para centrar div, jquery centrar, jquery centrar capa, modificar posicion de un elemento jquery, modificer un div con query, posicionar un div con jquery, situar un div a un % de la pantalla

Related posts:

1. Cambiar el nombre de una clase css con javascript y con jquery
2. Comprobar, seleccionar y deseleccionar todos los checkbox de un formulario con jquery
3. Mostrar elementos secuencialmente con Jquery
4. mensajes de ayuda o tooltip con jquery
5. recortar imagenes en cakephp con jquery.

En este caso voy a explicar como usar menus desplegables con ajax y jquery.
De manera que teniendo un menú select option con una serie de categorías al seleccionar una de ellas te aparezcan sus subcategorías.

Básicamente necesitamos descargar y subir la librería de jquery a nuestro servidor o usar la que hay en Google Code, crear nuestro formulario con una serie de id que son los elementos que harán de “bindeo” con jquery, una función en nuestro controlador que busque las subcategorias de la categoria dado el id y una vista para renderizar el select option con las subcategorías que hemos obtenido

Lo explico con mas detalle.

1.- INSERTAR LA LIBRERÍA DE JQUERY
Sino nada va a funcionar, podéis incluir directamente este fragmento de código entre las etiquetas <head></head>

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

2.- EL FORMULARIO
Tener una vista o un HTML donde tengáis un formulario.
En el formulario habrá que crear un identificador para el select option en este caso he puesto

id="select_categoria"

Este es un select option de ejemplo, faltaría poner todo el html que vosotros necesitéis, pero para explicarlo con sólo esto es suficiente

<select id="select_categoria">
  <option value="1">categoria1</option>
  <option value="2">categoria2</option>
  <option value="3">categoria3</option>
</select>

También habrá que crear un div o un p para que cuando se devuelva el select option con las subcategorias se pinten en dentro de un html. Lo ideal sería ponerlo después del select option para que las subcategorias se visualicen a continuación

<div id="div_subcategorias_wrapper"></div>

3.- LAS FUNCIONES JQUERY

Este puede que sea el paso mas difícil de todo el proceso

El id que hemos puesto al select option de las categorías se utiliza para que jquery haga un bindeo a una determinada acción que nosotros especifiquemos. En este caso estamos bindeando que el id select_categoria, en jquery se definen mediante el símbolo # (por si alguien no lo sabe y esta algo perdido) se binde a una accion de click, por lo que cuando se seleccione una categoría haciendo click sobre ella se lanza la función siguiente de jquery.
Se hace una llamada ajax $.ajax(); con una serie de parámetros
type: si es GET o POST
url: la url a la que llamamos para obtener la información necesaria, $(this).val() es el valor de la categoría que he seleccionado, en este caso si identificador por el que buscaré sus subcategorías relacionadas
beforeSend: (antes de enviar) lo que hago es meter en el div que hemos creado para pintar los select option de las subcategorias, meto un div con un gif animado, esto da el efecto como que se esta cargando algo y el usuario entiende que tiene que esperar. El gif que verían sería algo como esto:
success: cuando ha terminado y se devuelve la información, se genera la variable msg (yo la he llamado así) que contiene el resultado de lo que se ha ejecutado en el controlador, simplemente lo insertamos en el div anterior y ya tendríamos los select option cargados dinámicamente.

$("document").ready(
function() {

    $('#select_categoria').bind('click', function()
    {
        $.ajax({
               type: "GET",
               url: "/articulos/obtener_subcategorias/"+$(this).val(),
               beforeSend: function() {
                     $('#div_subcategorias_wrapper').html('<div class="rating-flash" id="cargando_div">Cargando  <img src="/img/ajax-loader_mini.gif"></div>');
                     },
               success: function(msg){
                   $('#div_subcategorias_wrapper').html(msg);
               }
             });
    });

}
);

4.- El CONTROLADOR O LA LÓGICA DE PHP

Esta parte es variable, yo estoy explicando el ejemplo para quien usa CakePHP pero se puede hacer en php puro si se quiere u otro framework.

También hay que tener cuenta que el siguiente controller es de ejemplo, y sirve como guía para quien ya sepa CakePHP.

<?php
class ArticulosController extends AppController
{
    var $uses = array('Articulo','ArticuloCategoria','ArticuloSubcategoria');
    function index()
    {
        // lógica
    }

    function obtener_subcategorias($id)
    {
        $this->layout = 'ajax';
        // aquí la lógica que uséis para obtener datos de la base de datos
        // y generar un array con todas las categorías
        // por lo normal y rápido será usar la funcion find con el primer parámetro list para que lo devuelva formateado con el identificador de cada opcion como key de los nodos del array
        $subcategorias = $this->ArticuloSubcategoria->find('list',array('conditions' => array('ArticuloSubcategoria.categoria_id' => $id), 'fields' => 'nombre_subcategoria'));
        $this->set('listado_subcategorias',$subcategorias);
    }

}
?>

5.- RENDERIZAR EL SELECT OPTION EN LA VISTA

Renderizar el resultado de lo que hemos obtenido en la función obtener_subcategorias() en la vista
Necesitaremos crear la vista /app/views/articulos/obtener_subcategoria.ctp

<? echo $form->input('Articulo.id_subcategoria', array('options' => $listado_subcategorias,'label'=>false,'div'=>null));?>

Y listo! el resultado lo recoge el ajax y lo pinta en el div que hemos explicado anteriormente.

Es muy sencillo usar AJAX con JQUERY, integrarlo con CakePHP puede ser algo mas liado hasta que lo haces la primera vez.

Cualquier duda o comentario no dudéis en escribirlo.

Tags de búsquedas:

busqueda cakephp select, jquery ajax cakephp, usar jquery con cakephp, jquery click ajax, cakephp ajax, jquery onclick para $select, mensaje de espera al guardar en jquery, jquery añadir options mediante ajax a un select, jquery ajax phpcake, jquery ajax option

Related posts:

1. Cakephp ajax start voting. Sistema de votaciones en ajax mediante estrellas
2. Autocomplementador en AJAX
3. recortar imagenes en cakephp con jquery.
4. mensajes de ayuda o tooltip con jquery
5. Comprobar, seleccionar y deseleccionar todos los checkbox de un formulario con jquery

El publin se puede configurar y permite diferentes funcionalidades que nos ayudará y nos enriquecerá la tarea de recortar una imagen, ya sea a nosotros a los usuarios cuando por ejemplo quieren subir un avatar y recortar la zona que quieran de la foto previamente subida.

El plugin permite trabajar escalando imágenes o recortando unas dimesiones asignadas. Por ejemplo.
1.- Selecciona y recorta una imagen con unas dimensiones determinadas.

$(document).ready(function () { $('#avatar').imgAreaSelect({ maxWidth: 200, maxHeight: 150, handles: true }); });

2.- Selecciona y recorta la foto manteniendo un porcentaje escalado previamente asignado.

$(document).ready(function () { $('#avatar').imgAreaSelect({ aspectRatio: '4:3', handles: true }); });

Esto es muy sencillo de integrar en php y jquery pero bueno como ya sabemos en Cakephp se complica un poquito mas debiado a que hay que seguir el patrón de diseño MVC.
Como siempre habrá que crear un componente que interactue con el controlador o controladores, un helper para incluir en la vista las funciones de javascript y la implementación de la vista.

Para esta receta necesitaremos

1.- El componente
/app/controllers/components/jq_imgcrop.php

<?php
class JqImgcropComponent extends Object
{

    function uploadImage($uploadedInfo, $uploadTo, $prefix)
    {
        $webpath = $uploadTo;
        $upload_dir = WWW_ROOT.str_replace("/", DS, $uploadTo);
        $upload_path = $upload_dir.DS;
        $max_file = "34457280";
        $max_width = 400;
        // añado al prefijo, el identificador de tiempo, para que el archivo que se suba siempre sea unico
        $prefix = $prefix.time();

        $userfile_name = $uploadedInfo['name'];
        $userfile_tmp =  $uploadedInfo["tmp_name"];
        $userfile_size = $uploadedInfo["size"];
        //$filename = $prefix.basename($uploadedInfo["name"]);
        $id_unic = $uuid = String::uuid();
        $extension =  $this->getFileExtension($uploadedInfo["name"]);
        if (($extension != "jpeg")  && ($extension != "jpg") && ($extension != "gif") && ($extension != "png"))
        {
            return false;
        }
        $filename = $prefix.$id_unic.'.'.$extension;
        //$file_ext = mb_substr($filename, strrpos($filename, ".") + 1);
        $uploadTarget = $upload_path.$filename;

        if(empty($uploadedInfo)) {
                  return false;
                }

        if (isset($uploadedInfo['name'])){
            move_uploaded_file($userfile_tmp, $uploadTarget );
            chmod ($uploadTarget , 0777);
            $width = $this->getWidth($uploadTarget);
            $height = $this->getHeight($uploadTarget);
            // Scale the image if it is greater than the width set above
            if ($width > $max_width){
                $scale = $max_width/$width;
                $uploaded = $this->resizeImage($uploadTarget,$width,$height,$scale);
            }else{
                $scale = 1;
                $uploaded = $this->resizeImage($uploadTarget,$width,$height,$scale);
            }
        }
        return array('imagePath' => $webpath.$filename, 'imageName' => $filename, 'imageWidth' => $this->getWidth($uploadTarget), 'imageHeight' => $this->getHeight($uploadTarget));
    }

    function getHeight($image)
    {
        $sizes = getimagesize($image);
        $height = $sizes[1];
        return $height;
    }

    function getWidth($image)
    {
        $sizes = getimagesize($image);
        $width = $sizes[0];
        return $width;
    }

    function resizeImage($image,$width,$height,$scale)
    {
        $newImageWidth = ceil($width * $scale);
        $newImageHeight = ceil($height * $scale);
        $newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
$ext = strtolower(mb_substr(basename($image), strrpos(basename($image), ".") + 1));
        $source = "";
        if($ext == "png"){
            $source = imagecreatefrompng($image);
        }elseif($ext == "jpg" || $ext == "jpeg"){
            $source = imagecreatefromjpeg($image);
        }elseif($ext == "gif"){
            $source = imagecreatefromgif($image);
        }
        imagecopyresampled($newImage,$source,0,0,0,0,$newImageWidth,$newImageHeight,$width,$height);
        imagejpeg($newImage,$image,90);
        chmod($image, 0777);
        return $image;
    }

    function resizeThumbnailImage($thumb_image_name, $image, $width, $height, $start_width, $start_height, $scale)
    {
        $newImageWidth = ceil($width * $scale);
        $newImageHeight = ceil($height * $scale);
        $newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
        $ext = strtolower(mb_substr(basename($image), strrpos(basename($image), ".") + 1));
        $source = "";
        if($ext == "png"){
            $source = imagecreatefrompng($image);
        }elseif($ext == "jpg" || $ext == "jpeg"){
            $source = imagecreatefromjpeg($image);
        }elseif($ext == "gif"){
            $source = imagecreatefromgif($image);
        }
        imagecopyresampled($newImage,$source,0,0,$start_width,$start_height,$newImageWidth,$newImageHeight,$width,$height);
        imagejpeg($newImage,$thumb_image_name,90);
        chmod($thumb_image_name, 0777);
        return $thumb_image_name;
    }

    function cropImage($thumb_width, $x1, $y1, $x2, $y2, $w, $h, $thumbLocation, $imageLocation)
    {
        $scale = $thumb_width/$w;
        $cropped = $this->resizeThumbnailImage(WWW_ROOT.str_replace("/", DS,$thumbLocation),WWW_ROOT.str_replace("/", DS,$imageLocation),$w,$h,$x1,$y1,$scale);
        return $cropped;
    }

     function getFileExtension($str)
     {
        /*
        $i = strrpos($str,".");
        if (!$i) { return ""; }
        $l = strlen($str) - $i;
        $ext = mb_substr($str,$i,$l);
        return $ext;
        */
        return end(explode(".", $str));

    }
}
?>

2.- El Helper

/app/views/helpers/cropimage.php

<?php
class CropimageHelper extends Helper {
    var $helpers = array('Html', 'Javascript', 'Form');

    function createJavaScript($imgW, $imgH, $thumbW, $thumbH) {
            return $this->output("<script type=\"text/javascript\">
                function preview(img, selection) {
                    var scaleX = $thumbW / selection.width;
                    var scaleY = $thumbW / selection.height;

                  /*
                  Esta parte esta dando un bug en IE x aunque en el resto de browsers va ok.
                    $('#thumbnail + div > img').css({
                        width: Math.round(scaleX * $imgW) + 'px',
                        height: Math.round(scaleY * $imgH) + 'px',
                        marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
                        marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
                    });
                    */
                    $('#x1').val(selection.x1);
                    $('#y1').val(selection.y1);
                    $('#x2').val(selection.x2);
                    $('#y2').val(selection.y2);
                    $('#w').val(selection.width);
                    $('#h').val(selection.height);
                }

                $(document).ready(function () {
                    $('#save_thumb').click(function() {
                        var x1 = $('#x1').val();
                        var y1 = $('#y1').val();
                        var x2 = $('#x2').val();
                        var y2 = $('#y2').val();
                        var w = $('#w').val();
                        var h = $('#h').val();
                        if(x1==\"\" || y1==\"\" || x2==\"\" || y2==\"\"|| w==\"\" || h==\"\"){
                            alert('Seleccione sobre la foto la zona que quiere');
                            return false;
                        }else{
                            return true;
                    }
                });
            });

            $(window).load(function () {
                $('#thumbnail').imgAreaSelect({ aspectRatio:'4:3', onSelectChange: preview });
            });
            </script>");
    }

  function createForm($imagePath, $tH, $tW)
  {
    $x1 = $this->Form->hidden('x1', array("value" => "", "id"=>"x1"));
    $y1 = $this->Form->hidden('y1', array("value" => "", "id"=>"y1"));
    $x2 = $this->Form->hidden('x2', array("value" => "", "id"=>"x2",));
    $y2 = $this->Form->hidden('y2', array("value" => "", "id"=>"y2"));
    $w = $this->Form->hidden('w', array("value" => "", "id"=>"w"));
    $h = $this->Form->hidden('h', array("value" => "", "id"=>"h"));
    $imgP = $this->Form->hidden('imagePath', array("value" => $imagePath));
    return $this->output("<img src=\"$imagePath\" style=\"float: left; margin-right: 10px;\" id=\"thumbnail\" alt=\"Create Thumbnail\" />
                <div style=\"position:relative; overflow:hidden; width:".$tW."px; height:".$tH."px; display:none\">
                    <img src=\"$imagePath\" style=\"position: relative;\" alt=\"Thumbnail Preview\" />
                </div>
                <br style=\"clear:both;\"/>$x1 $y1 $x2 $y2 $w $h $imgP");
    }
}
?>

3.- No olvidar incluir el componente ni el helper en el controlador

var $helpers = array('Cropimage');
var $components = array("JqImgcrop");

4.- Voy a integrar el ejemplo de redimensionar una imagen o una foto en un ejemplo real. En este caso yo he hecho una funcion para crear o modifcar el avatar del usuario en el controlador /app/controllers/usuarios_controller.php

   <?php
    /**
    * funcion para crear/ modificar el avatar del usuario
    * @version 1.0
    * @author Pedro Ventura
    *
    */
    function alterar_avatar()
    {
        $path_thmb_subida = $this->Avatars->comprobar_ruta_subida('usuarios');
        if($path_thmb_subida)
        {
            if(!empty($this->data))
            {
                if(isset($this->data['Avatar']['step']) && ($this->data['Avatar']['step']=='1'))
                {
                    # subo esta que será la original
                    # esta que subo despues se pisará con el thumb del cropping
                    $uploaded = $this->JqImgcrop->uploadImage($this->data['Avatar']['name1'], $path_thmb_subida, 'original_');
                    if($uploaded)
                    {
                        $this->set('uploaded',$uploaded);
                        $this->set('step',2);
                    }
                    else
                    {
                        $this->Session->setFlash(__('Tipo de archivo incorrecto, seleciona una imagen .jpg, .jpeg, .gif o .png',true));
                        $this->set('step',1);
                    }
                }
                if(isset($this->data['Avatar']['step']) && ($this->data['Avatar']['step']=='2'))
                {
                    # sustituyo el path del thumbnail que se acaba de subir pues es el original y cambio el nombre del archivo,
                    # para que se genere un thumbnail con un nombre nuevo
                    $path_thmb =  str_replace('original_','thumb_',$this->data['Usuario']['imagePath']);
                    $cropped = $this->JqImgcrop->cropImage(85, $this->data['Usuario']['x1'], $this->data['Usuario']['y1'], $this->data['Usuario']['x2'], $this->data['Usuario']['y2'], $this->data['Usuario']['w'], $this->data['Usuario']['h'], $path_thmb, $this->data['Usuario']['imagePath']);
                    $this->set('step',3);
                    # guardo el path del avatar en el registro del usuario
                    $this->Usuario->id = $_SESSION['Usuario']['id'];
                    $this->Usuario->saveField('avatar_path',$path_thmb);
                    $this->Session->setFlash(__('Avatar Alterado con éxito',true));
                    # seteo el avatar resultante despues de la redimension y lo asigno a la vista
                    $this->set('avatar_final',str_replace(WWW_ROOT,'',$cropped));
                }
            }
            else
            {
                $this->set('step',1);
            }
        }
    }
?>

5.- Los pasos para recortar la imagen integrados en la vista son los siguientes

<?
    /* librerías para crop de imagenes */
    echo $html->css('img_select/imgareaselect-animated_0.9.2',NULL, false). " \n";
    echo $javascript->link('jquery.imgareaselect_0.9.2.js',NULL, false);
    # formulario paso 1 de crear avatar
    if(isset($step) && ($step == 1))
    {
        echo $form->create('Usuario', array('type' => 'file','url' => array('controller' => 'usuarios', 'action' => 'alterar_avatar')));
        echo '<br />';
        echo $form->input('Avatar.step', array('label' => false,'div'=>null, 'type' => 'hidden', 'value'=>$step));
        echo '<br />';
        echo 'Selecciona tu avatar : '.  $form->file('Avatar.name1', array('size' => '60'));
        echo $form->submit('Guarda Avatar');
    }
    elseif(isset($step) && ($step == 2))
    {
        echo $cropimage->createJavaScript($uploaded['imageWidth'],$uploaded['imageHeight'],85,85,$uploaded["imagePath"]);
        echo $form->create('Usuario', array('type' => 'file','url' => array('controller' => 'usuarios', 'action' => 'alterar_avatar')));
        echo $form->input('Avatar.step', array('label' => false,'div'=>null, 'type' => 'hidden', 'value'=>$step));
        echo $cropimage->createForm($uploaded["imagePath"], 85, 85);
        echo $form->submit('Terminar', array("id"=>"save_thumb"));
        echo $form->end();
    }
    elseif(isset($step) && ($step == 3))
    {
        ?>
        <br />
        <p>Enhorabuena!! ya has creado tu avatar!! lo podrás ver en tu perfil.</p>
        <br />
        <?
        echo $html->image($avatar_final);
    }
    else
    {
        # sin acciones
    }
?>

Para los que les cueste seguir el flujo de datos, resumo a de manera básica.

1. Se incluyen el helper y el componente en el controlador
2. Una vez que se hace la llamada a la funcion empieza en step =1, es decir que dentro de la vista se va a mostrar la renderización que hay dentro de step 1. Esto se hace porque dentro de la funcionalidad de recortar hay 3 fases:
   • La fase inicial donde el usuario selecciona la foto que quiere subir y se envía. El controlador la recoge y la envía al componente que la sube.
   • Si el paso anterior se ha realizado con éxito, se para al step 2 que es cuando se tiene que seleccionar una zona de la foto mediante el propio plugin de Jquery ImgAreaSelect. Se recorgan y en en formulario se generan unas variables en input hidden con los valores del recorte realizado. Se envia al controlador y el contralador se lo delega al componente que realiza la redimension o recorte
   • Finalmente ya tenemos la imagen final recortada dependiendo de los patrones de redimension que hayamos configurado

En el helper hay un comentario, ya que hay un bug que no consigo arreglar, por falta de tiempo o simplemente porque estoy ciego y no veo el error. Hay una función preview que muestra una previsualizacion de como quedará la imagen o la foto después de ser recortada, yo la tengo comentada por esto mismo que comento. Está fallando en cualquier version de IE, intuyo que será por un tema de comillas, que no las interpreta bien y no es capaz de cerrarlas. Si alguien consigue debugear esta parte, por favor que lo comente!!

/*
  Esta parte esta dando un bug en IE x aunque en el resto de browsers va ok.
    $('#thumbnail + div > img').css({
        width: Math.round(scaleX * $imgW) + 'px',
        height: Math.round(scaleY * $imgH) + 'px',
        marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
        marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
    });
    */

Cualquier duda o pregunta comentarlas y las iré resolviendo.

Actualización: 25/11/201
Se me ha olvidado por completo indicar que hay que descargar la libreria de jquery, así como el plugin de imageArea.
Los adjunto en el siguiente zip.
También contiene un css y algunas imágenes para hacer todo el efecto de recorte.


Descargar Plugin image Area y CSS, Jquery.zip - Descargado 181 veces

Tags de búsquedas:

cakephp jquery, jquery cakephp, recortar foto para avatar, php upload de imagen y cortar, javascript recortar div y guardar imagen, javascript cortar imagenes, función recortar una imagen javascript, funcion recortar imagenes wordpress, cortar foto con php, codigo para subir imagenes en php y recortarlas

Related posts:

1. ajax y jquery en cakephp
2. Comprobar, seleccionar y deseleccionar todos los checkbox de un formulario con jquery
3. subir ficheros con swfupload componente cakephp
4. Captcha de seguridad en cakePHP con Securimage
5. componente geo posicionamiento ip con cakephp

Aquí es donde entra JQuery para ayudarnos a hacer los tooltips.

Hay muchos plugins de Jquery para hacer tooltips o éstos mensajes de ayuda, pero el que mas me ha gustado a mi es “SimpleTip”. Permite crear tooltips de manera muy sencilla usando cualquier elemento de la pagina con los selectores y gestores de eventos de Jquery. Los tooltips pueden ser estáticos, dinámicos, o se pueden cargar por AJAX con una variedad diferentes de efectos visuales.

Ejemplo sencillo de integración de un tooltip estático

$("#panel_usuario_cuenta").simpletip
    ({
        content:'Bienvenido usuario este es tu panel de control!!!',
        fixed:true,
        position: 'top'
    });

Sobre el elemento html que tiene el id=”panel_usuario_cuenta” aparecerá en la parte superior el mensaje indicado en la variable content

Mas información y descargas de las librerías en la web oficial:
http://craigsworks.com/projects/simpletip/

Tags de búsquedas:

mensajes de ayuda, mensajes jquery, mensajes con jquery, jquery mensajes, tooltip jquery ejemplo, tooltip jquery div ejemplos, tooltip jquery ejemplos, tooltip ayuda jquery, panel de mensajes en jquery, tooltip en tu web usando javascript

Related posts:

1. Jquery activar desactivar boton submit de formulario
2. Cambiar el nombre de una clase css con javascript y con jquery
3. Comprobar, seleccionar y deseleccionar todos los checkbox de un formulario con jquery
4. Centrar un div con jquery
5. Mostrar elementos secuencialmente con Jquery

Estaba haciendo un pequeño desarrollo con PHP y AJAX para que un usuario pudiese seleccionar su nick en un simple input text.
El tema es que cuando el nick estuviese ocupado me tendría que mostrar un mensaje en un div y cambiar el class para que se mostrase una clase css determinada.

Esto yo sabía como hacerlo en javascript, pero resulta que en IE 6 peta, como siempre!!!

Para lo que no lo sepan se haría con la siguiente sentencia:

document.getElementById("xxxxxxxxxx").setAttribute("class", "error");

donde:

1. xxxxxxxxxx es el id de mi div, tambien puede ser un p, o un span.
2. class, es el atributo que queremos cambiar de la etiqueta html que estamos usando, en mi caso es el div, pero repito, puede ser un p o un span.
3. error es el nombre de la clase css que he definido en mi hoja de estilos, que tiene un background y una imagen de fondo que muestra el look & feel de un mensajito de error.

Pero bueno lo que he aprendido es a hacerlo con jquery, lo cual es una pasada porque en sólo una linea puedes añadir, modificar o eliminar el nombre de la clase css.

La sentencia es la siguiente:

• Para añadir una clase css a un elemento HTML

  $('#xxxxxxxxxx ').addClass('error');

• Para eliminarlo 

  $('#xxxxxxxxxx ').removeClass('error');

KEEP IT SIMPLE!!

Tags de búsquedas:

jquery cambiar class, cambiar clase jquery, jquery cambiar clase, cambiar clase con jquery, cambiar class jquery, cambiar class con jquery, cambiar clase css jquery, jquery cambiar css, cambiar css con jquery, cambiar css jquery

Related posts:

1. obtener el nombre del dominio con javascript
2. Centrar un div con jquery
3. Comprobar, seleccionar y deseleccionar todos los checkbox de un formulario con jquery
4. Mostrar elementos secuencialmente con Jquery
5. Cambiar el status de facebook desde una web externa o blog.

Pasos para la implementación de éste módulo:

• incluir el siguiente .js entre las etiquetas <head></head>

Ver .js

y las funciones javascript que podréis ver en la Demo Online

• Incluir también los estilos predeterminados, también los podréis ver en el código fuente de éste archivo.

• En la carpeta donde se encuentra éste ejemplo hay un php “rpc.php” que contiene la llamada a la base de datos y el cual devuelve el contenido.

    <?php

    // PHP5 Implementation - uses MySQLi.
    // mysqli('localhost', 'yourUsername', 'yourPassword', 'yourDatabase');
    $db = new mysqli('localhost', 'USERNAME' ,'PASSWORD', 'DATABASE');

    if(!$db) {
    // Show error if we cannot connect.
    echo 'ERROR: Could not connect to the database.';
    } else {
    // Is there a posted query string?
    if(isset($_POST['queryString'])) {
    $queryString = $db->real_escape_string($_POST['queryString']);

    // Is the string length greater than 0?

    if(strlen($queryString) >0) {
    // Run the query: We use LIKE '$queryString%'
    // The percentage sign is a wild-card, in my example of countries it works like this...
    // $queryString = 'Uni';
    // Returned data = 'United States, United Kindom';

    // YOU NEED TO ALTER THE QUERY TO MATCH YOUR DATABASE.
    // eg: SELECT yourColumnName FROM yourTable WHERE yourColumnName LIKE '$queryString%' LIMIT 10

    $query = $db->query("SELECT your_column FROM your_db_table WHERE your_column LIKE '$queryString%' LIMIT 10");
    if($query) {
    // While there are results loop through them - fetching an Object (i like PHP5 btw!).
    while ($result = $query ->fetch_object()) {
    // Format the results, im using <li> for the list, you can change it.
    // The onClick function fills the textbox with the result.

    // YOU MUST CHANGE: $result->value to $result->your_colum
    echo '<li onClick="fill(\''.$result->value.'\');">'.$result->value.'</li>';
    }
    } else {
    echo 'ERROR: There was a problem with the query.';
    }
    } else {
    // Dont do anything.
    } // There is a queryString.
    } else {
    echo 'There should be no direct access to this script!';
    }
    }
    ?>

Si usais SMARTY, habría que poner incluso menos código:

    <?
    include("/ruta_smarty_donde_teneis/config.php");
    include_once("/ruta_smarty_donde_teneis/sql.lib.php");
    abrirConexion();// o la funcion que hayas nombrado para crear una conexión
    $busqueda= $_POST['queryString']; // $_POST['queryString'] es la variable que lleva lo que estamos insertando en el formulario de búsqueda
    $sql_search="SELECT NOMBRE_CAMPO FROM NOMBRE_TABLA WHERE NOMBRE_CAMPO LIKE '$busqueda%' LIMIT 10";
    $db->query($sql_search);
    //$searching = $db->fetchObject();
    while ($searching = $db ->fetchObject())
    {
    echo '<li onClick="fill(\''.$searching->NombreFamoso.'\');">'.$searching->NombreFamoso.'</li>';
    }

    ?>

Tags de búsquedas:

jquery