Mostrando entradas con la etiqueta ajax. Mostrar todas las entradas
Mostrando entradas con la etiqueta ajax. Mostrar todas las entradas

martes, 17 de noviembre de 2015

7 - Tutorial de Laravel 5 - Validar con Ajax JSON y mensajes flash



Bienvenid@s, en este capítulo del Tutorial de Laravel 5 continuamos viendo aspectos de validación de formularios, concretamente nos centraremos en realizar una petición vía ajax al servidor para validar el formulario con el cual estuvimos trabajando en el capítulo anterior, de existir algún error obtendremos una respuesta en formato json con los posibles mensajes de error, esto lo controlaremos desde el método response(array $errors) de la clase MiFormulario, igualmente recibiremos una respuesta json desde la acción validarMiFormulario de ser válido el formulario para mostrar un mensaje de enhorabuena en la vista.

Manejaremos dos posibilidades la utilización de la tecnología ajax para el caso de que el usuario tenga activado javascript, que es lo normal y la extraña posibilidad de que lo tenga desactivado, en este caso controlaremos la petición directa al servidor.

También veremos otro punto importante, el cual es la redirección enviando mensajes flash.

El código de cada uno de los ejercicios los podéis ver a continuación:

Vista miformulario.blade.php:


@extends('layouts.home')
@section('title', 'Mi formulario')
@section('description', 'Validar Mi formulario')
@section('keywords', 'validar, mi, formulario')

@section('content')

<h1>Mi Formulario</h1>

<div class="text-success" id='result'>
    @if(Session::has('message'))
        {{Session::get('message')}}
    @endif
</div>

<form method="post" action="{{url('home/validarmiformulario')}}" id='form'>
    <div class="form-group">
        <label for="nombre">Nombre: </label>
        <input type="text" name="nombre" class="form-control" value="{{Input::old('nombre')}}" />
        <div class="text-danger" id='error_nombre'>{{$errors->formulario->first('nombre')}}</div>
    </div>
    
    <div class="form-group">
        <label for="email">Email: </label>
        <input type="text" name="email" class="form-control" value="{{Input::old('email')}}" />
        <div class="text-danger" id='error_email'>{{$errors->formulario->first('email')}}</div>
    </div>
    {{csrf_field()}}
    <button type="submit" class="btn btn-primary">Enviar</button>
</form>

<script>
 $(function(){
     $("#form").submit(function(e){
         
         var fields = $(this).serialize();
         $.post("{{url('home/validarmiformulario')}}", fields, function(data){
             
             if(data.valid !== undefined){
                 $("#result").html("Enhorabuena formulario enviado correctamente");
                 $("#form")[0].reset();
                 $("#error_nombre").html('');
                 $("#error_email").html('');
             }
             else{
                 $("#error_nombre").html('');
                 $("#error_email").html('');
                 if (data.nombre !== undefined){
                    $("#error_nombre").html(data.nombre); 
                 }
                 if (data.email !== undefined){
                     $("#error_email").html(data.email);
                 }
             }
             
         });
         
         return false;
     });
 });
</script>

@stop


Clase MiFormulario.php:

<?php

namespace App\Http\Requests;
use App\Http\Requests\Request;

class MiFormulario extends Request{
    
    protected $redirect = "home/miformulario";
    
    public function rules(){
        return [
            'nombre' => 'required|min:3|max:12|regex:/^[a-z]+$/i',
            'email' => 'required|email',
        ];
    }
    
    public function messages(){
        return [
            'nombre.required' => 'El campo nombre es requerido',
            'nombre.min' => 'El mínimo permitido son 3 caracteres',
            'nombre.max' => 'El máximo permitido son 12 caracteres',
            'nombre.regex' => 'Sólo se aceptan letras',
            'email.required' => 'El campo email es requerido',
            'email.email' => 'El formato de email es incorrecto',
        ];
    }
    
    public function response(array $errors){
        if ($this->ajax()){
            return response()->json($errors, 200);
        }
        else
        {
        return redirect($this->redirect)
                ->withErrors($errors, 'formulario')
                ->withInput();
        }
    }
    
    public function authorize(){
        return true;
    }
    
}


Acción validarMiFormulario del controlador HomeController:

    public function validarMiFormulario(MiFormulario $formulario){
        $validator = Validator::make(
                $formulario->all(), 
                $formulario->rules(),
                $formulario->messages()
                );
        if ($validator->valid()){
            
            if ($formulario->ajax()){
                return response()->json(["valid" => true], 200);
            }
            else{
            return redirect('home/miformulario')
                    ->with('message', 'Enhorabuena formulario enviado correctamente');
            }
        }
    }





domingo, 1 de noviembre de 2015

Crop Image Plugin - Recortar imagen con PHP y jQuery


Crop Image Plugin es un plugin desarrollado con PHP y jQuery que te permite recortar imágenes, puedes seleccionar la posición y la anchura y altura que deseas extraer, por ejemplo, puede ser muy útil para dar la opción a los usuarios de configurar sus imágenes de pérfil, de un modo similar a los sistemas utilizados por Twitter ó Facebook.

Para descargar el plugin lo pueden hacer en el siguiente enlace ... http://www.phpclasses.org/package/9433-PHP-Crop-an-image-to-a-given-position-and-size.html


Crop Image Plugin - Recortar imagen con PHP y jQuery


martes, 22 de septiembre de 2015

Upload Multiple Images Ajax - Vista previa y subida múltiple de imágenes


El plugin upload-multiple-images-ajax te permite realizar subidas mútiples de imágenes a través de la tecnología ajax, este plugin está desarrollado con jQuery y PHP, entre sus características puedes encontrar la posibilidad de validar las imágenes tanto del lado del cliente como del servidor, por ejemplo, indicar el tipo de imágenes permitidas, el tamaño mínimo y máximo, el número máximo de imágenes que puede ser subidas, ... y por supuesto la previsualización de las imágenes antes de subirlas, con la posibilidad de quitar alguna de ellas si no te gusta a través de un botón de eliminar, el plugin es totalmente compatible con los estilos CSS de bootstrap 3.

Para descargar el plugin puedes hacerlo a través de Github siguiendo el siguiente enlace: https://github.com/ManuDavila/upload-multiple-images-ajax




martes, 11 de agosto de 2015

Tutorial de jQuery Ajax



Vídeo tutorial de uso de la tecnología Ajax a través de jQuery:


  • Ajax método $.post
  • Ajax método $.get
  • Ajax método $.getJSON
  • Ajax método $.ajax





lunes, 10 de agosto de 2015

jQuery Ajax - Método getJSON







Autor: codigofacilito

Título: Tutorial jQuery 34: Método getJSON

Descripción:

Curso de Ruby ► http://bit.ly/RubyFacilito

-----

MÁS CURSOS de CódigoFacilito:

Curso de Python:
►http://bit.ly/PythonFacilito

Curso para crear una página web en HTML5:
►http://bit.ly/PaginaWebHTML5

Curso de HTML5:
►http://bit.ly/HTML5Facilito

Curso de CSS:
►http://bit.ly/CSSFacilito

Curso de PHP:
►http://bit.ly/PHPFacilito

Curso de JavaScript y jQuery:
►http://bit.ly/jQueryFacilito

Curso de Java:
►http://bit.ly/JavaFacilito

Curso de C++:
►http://bit.ly/CFacilito

Curso de Xcode:
►http://bit.ly/XcodeFacilito

-----

Sitio web:
►http://codigofacilito.com/

Síguenos en Twitter:
►http://twitter.com/codigofacilito

"Like" en Facebook:
►http://facebook.com/codigofacilito

Suscríbete en YouTube:
►http://bit.ly/qHEewR

Únete al Newsletter:
►http://bit.ly/CorreoFacilito

-----



-----

Contacta al Tutor del Curso:
Canal:
http://www.youtube.com/DxvTuts
Twitter:
@DxvTweet
FanPage:
http://www.facebook.com/DxVBook

Otras sugerencias ...

Tutorial jQuery 30: Peticiones con el método 'ajax'
¿Cuánto dinero gana un programador web?
jQuery Mobile - Parte 2 - Descargando archivos e incluyendo el Framework
Crea un Tema de WordPress: Parte 12 - Archivo page.php
JSON AJAX PHP MYSQL EXAMPLE
Curso jQuery, Usando web services con JSON
jQuery Ajax Twitter API Tutorial
Json Tutorial 1: Introducción
[Basic] Loading data with Jquery AJAX JSON
JSON Tutorial for beginners w/ jQuery
INTRO to jQUERY's .getJSON() FUNCTION - Super Simple Javascript/jQuery Tutorials
Reading JSON with jQuery
Tutorial jQuery 25 - AJAX método $.getJSON
Trucos y Atajos de Teclado para Sublime Text
Using AJAX with jQuery
Using DBPedia
json.parse - Parsing JSON with JQuery
Working with JSON and PHP
Fetch JSON Data Using jQuery AJAX Method: getJSON

jQuery Ajax - Método POST







Autor: codigofacilito

Título: Tutorial jQuery 32: Método POST

Descripción:

¿Buscas tutorial del Método GET? Click aquí ► http://youtu.be/-qhVK_Nyk4c

Todos los videos del curso de jQuery aquí ► http://bit.ly/jQueryFacilito

-----

MÁS CURSOS de CódigoFacilito:

Curso de Python:
►http://bit.ly/PythonFacilito

Curso para crear una página web en HTML5:
►http://bit.ly/PaginaWebHTML5

Curso de HTML5:
►http://bit.ly/HTML5Facilito

Curso de CSS:
►http://bit.ly/CSSFacilito

Curso de PHP:
►http://bit.ly/PHPFacilito

Curso de JavaScript y jQuery:
►http://bit.ly/jQueryFacilito

Curso de Java:
►http://bit.ly/JavaFacilito

Curso de C++:
►http://bit.ly/CFacilito

Curso de Xcode:
►http://bit.ly/XcodeFacilito

-----

Sitio web:
►http://codigofacilito.com/

Síguenos en Twitter:
►http://twitter.com/codigofacilito

"Like" en Facebook:
►http://facebook.com/codigofacilito

Suscríbete en YouTube:
►http://bit.ly/qHEewR

Únete al Newsletter:
►http://bit.ly/CorreoFacilito

-----



-----

Contacta al Tutor del Curso:
Canal:
http://www.youtube.com/DxvTuts
Twitter:
@DxvTweet
FanPage:
http://www.facebook.com/DxVBook

Otras sugerencias ...

Tutorial jQuery 33: Método getScript
Tutorial jQuery 31: Método GET
Tutorial JavaScript 1 - "Hola Mundo", Variables y Operadores
Tutorial jQuery 30: Peticiones con el método 'ajax'
Aprende jQuery: Cómo enviar datos mediante Ajax usando PHP
Como enviar datos con Ajax atraves del método POST
enviar formulario con el metodo post
jQuery Basics: POST/GET Data (HTTP Request)
Requisições Ajax com jQuery
08 PHP MySQL - Simple CRUD - Delete
Tutorial jQuery 23 - AJAX método $.post
Json Tutorial 2: Arreglo de Objetos
Como enviar datos con AJAX, PHP, MySQL, jQuery y CSS
20 JQuery post and get
Simple login with PHP and jQuery AJAX
Como hacer peticion AJAX con Jquery - tutorial Javascript
Aprendendo AJAX utilizando JQuery e PHP - Parte 01
Metodos de Ajax GET, POST, LOAD JQuery
$.ajax Responses and jQuery Promises

jQuery Ajax - Método GET







Autor: codigofacilito

Título: Tutorial jQuery 31: Método GET

Descripción:

Muchos más videos de jQuery aquí ► http://bit.ly/jQueryFacilito

-----

MÁS CURSOS de CódigoFacilito:

Curso de Ruby
► http://bit.ly/RubyFacilito

Curso de Python:
►http://bit.ly/PythonFacilito

Curso para crear una página web en HTML5:
►http://bit.ly/PaginaWebHTML5

Curso de HTML5:
►http://bit.ly/HTML5Facilito

Curso de CSS:
►http://bit.ly/CSSFacilito

Curso de PHP:
►http://bit.ly/PHPFacilito

Curso de JavaScript y jQuery:
►http://bit.ly/jQueryFacilito

Curso de Java:
►http://bit.ly/JavaFacilito

Curso de C++:
►http://bit.ly/CFacilito

Curso de Xcode:
►http://bit.ly/XcodeFacilito

-----

Sitio web:
►http://codigofacilito.com/

Síguenos en Twitter:
►http://twitter.com/codigofacilito

"Like" en Facebook:
►http://facebook.com/codigofacilito

Suscríbete en YouTube:
►http://bit.ly/qHEewR

Únete al Newsletter:
►http://bit.ly/CorreoFacilito

-----



-----

Contacta al Tutor del Curso:
Canal:
http://www.youtube.com/DxvTuts
Twitter:
@DxvTweet
FanPage:
http://www.facebook.com/DxVBook

Otras sugerencias ...

Tutorial jQuery 32: Método POST
Tutorial jQuery 30: Peticiones con el método 'ajax'
Tutorial jQuery 34: Método getJSON
Tutorial JavaScript 1 - "Hola Mundo", Variables y Operadores
Aprende jQuery: Cómo enviar datos mediante Ajax usando PHP
instalación y seguridad de XAMPP en ubuntu 13.04
jQuery Basics: POST/GET Data (HTTP Request)
CodeIgniter, jQuery & JSON How To - http://geekhut.org
Curso Jquery Videotutorial 42 - crud inmobiliaria google maps
Json Tutorial 2: Arreglo de Objetos
PHP Tutorials: jQuery: Get Data from MySQL Database without Refreshing
Universidade XTI - jQuery - 01 - Introdução à jQuery
TUTORIA No.26 - Aplicaciones Web MVC con JSP + HTML + JavaScript + JPA
JQuery Tutorial 2.1 - Insertar mapas y marcadores con GMaps (HD)
Reading JSON with jQuery
Metodos de Ajax GET, POST, LOAD JQuery
AJAX Tutorial HD - JSP call to Java Servlet using jQuery & JSON response
JSON - PHP y Javascript
Using AJAX with jQuery