Obtener el datetime actual a través de jquery

Posted by Jesús E. Pérez Villegas | Posted in jQuery | Posted on 11-12-2013

0

Con estas líneas de código lo que haré será que cuando clique en un enlace, automáticamente se me situe el datetime actual en un input, listo para ser enviado y almacenado como campo DateTime en mySql

Código HTML

<input id=”inputFecha” type=”text” name=”User[delete_date]” value=”” />
<a id=”enlace” href=”#”>Enlace</a>

 

Código Javascript utilizado

$(document).ready(function(){
$('#enlace').click(function(event){
	event.preventDefault();
	var param1 = new Date();
	var param2 = param1.getFullYear() + '-' + (param1.getMonth()+1) + '-'
 + param1.getDate() + ' ' + param1.getHours() + ':' + param1.getMinutes()
 + ':' + param1.getSeconds();
	$('#inputFecha').val(param2);
});
});

Y es que como sabéis al final el datetime en sql tiene que ser del tipo: 2013-12-11 11:25:00

Cómo recargar una página utilizando jQuery

Posted by Jesús E. Pérez Villegas | Posted in javascript, jQuery | Posted on 12-06-2012

0

Simplemente con el código que pongo aquí debajo se puede hacer que una página se refresque.

    $(document).ready(function() {
        $('#miboton').click(function() {
            // Recargo la página
            location.reload();
        });
    });

Y este sería el botón en cuestión

<input id="miboton" type="button" value="Refrescar" />

Cómo añadir, eliminar o cambiar una validación de jQuery de una página

Posted by Jesús E. Pérez Villegas | Posted in javascript, jQuery | Posted on 04-06-2012

3

Problema de hoy: Tengo una validación en un formulario, pero necesito que cambie unos parámetro cada vez que hago un ajax determinado.
Pregunta: ¿cómo puedo eliminar una regla añadiéndole otra?

$('form').validate({
    rules: {
        leftform_input1: { required: true },
        leftform_input2: { required: true }
    },
    messages: {
        leftform_input1: "Field is required",
        leftform_input2: "Field is required"
    }
});
  • Para eliminar reglas de validación
    var settings = $('form').validate().settings;
    delete settings.rules.rightform_input1;
    delete settings.messages.rightform_input1;
  • Para añadir reglas de validación:
    var settings = $('form').validate().settings;
    settings.rules.leftform_input1 = {required: true};
    settings.messages.leftform_input1 = "Field is required";

La solución la encontré en esta página

Captcha visual para cakePHP

Posted by Jesús E. Pérez Villegas | Posted in CakePHP, jQuery | Posted on 09-09-2010

0

Hola a todos, hoy vamos a integrar un componente captcha en un proyecto de cakePHP. Es cierto que hay dos o tres por la red, pero la peculiaridad de este es que es un captcha totalmente visual (podéis ver aquí el ejemplo, recordad que tenéis que rellenar los dos campos):

Es decir que tendremos que arrastrar en el caso superior mediante el ratón el reloj desde donde está hasta el círculo quedando de la siguiente forma para que pueda continuarse adecuadamente…

Pasos a seguir:

1- En la función del controlador donde queramos utilizarlo añadimos las siguientes líneas de código

/*Para el captcha*/
$rand = rand(0,4);
$_SESSION['captcha'] = $rand;
$this->set('rand',$rand);



2- En la función del controlador donde queramos recibir los datos incluiremos estas líneas:

/* this compare captcha's number from POST and SESSION */
if($_SERVER['REQUEST_METHOD'] == "POST" && $this->data['captcha'] && $this->data['captcha'] == $_SESSION['captcha']){
        /* this line makes session free, we recommend you to keep it */
        unset($_SESSION['captcha']);
} elseif($_SERVER['REQUEST_METHOD'] == "POST" && !$this->data['captcha']){
       // Aquí redireccionaremos a donde queramos que vaya en 
       // este caso erróneo
       $this->redirect('/');
}



3-En la vista(en mi caso en la plantilla) añadimos las siguientes líneas en el header

<link rel="stylesheet" href="/css/captcha.css" type="text/css" />

<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="/js/jquery.captcha.js"></script>

<?php if(isset($rand)){
   echo '<script type="text/javascript">
      $j(function() {
        $j(".ajax-fc-container").captcha({
          url: '.$rand.',
          borderColor: "silver",
          text: "Arrastra <span>scissors</span> al círculo.",
          formId:"formulario" //aquí el id del formulario
        });
      });
    </script>';
}?>



4-Dentro de la vista donde queramos que se dibuje el captcha añadiremos las siguientes líneas (así de sencillo!!)

<!-- Begin of captcha -->
<div class="ajax-fc-container">You must enable javascript to see captcha here!
</div>
<!-- End of captcha -->



5-Para que funcione será necesario copiar los archivos siguientes en las carpetas que indicamos:

  • captcha.css en la carpeta webroot/css.
  • Las imágenes que se encuentran en la carpeta imgs del zip en la carpeta webroot/imgs (son 13 imágenes, entre ellas están las imágenes entre las cuáles será necesario escoger)
  • Los archivos iepngfix.htcjquery-1.3.2.min.js, jquery-ui-1.7.2.custom.min.js y jquery.captcha.js en la carpeta webroot/js.

6-(Opcional)Modificar la línea 37 del archivo jquery.captcha.js para cambiar el name del input que se generará name=\”data[captcha]\”


Aquí os dejo dichos archivos para que os los descarguéis. Dejar claro también que este componente no lo cree yo, sino estos señores, sólo me he limitado a adaptarlo a cakePHP y a explicar cómo se utiliza en español ;)

jQuery – Cómo poder mover y redimensionar una imagen al mismo tiempo

Posted by Jesús E. Pérez Villegas | Posted in javascript, jQuery | Posted on 31-08-2010

2

Me he encontrado con un problema en mis inicios de jquery: quería poder redimensionar una imagen y al mismo tiempo también quería tener la posibilidad de moverla por la pantalla.

Utilizando el archivo de jquery.ui me las prometía muy felices, ya que simplemente creía que poniendo una de estas dos opciones funcionaría:

  1. $(“.nombreClase”).resizable().draggable();
  2. $(“.nombreClase”).resizable();$(“.nombreClase”).draggable();

Ahora puedo decir que ninguna de las dos anteriores funciona, es necesario separar estas dos acciones.

La solución válida será pues la siguiente:

  • $(“.movible”).resizable().parent().draggable();

Y nada más, me vuelvo a enfrascar en el trabajo XD

Nota: Esta web fue la que me mostró el buen camino!!