十九 Django 1.5.4 jquery ajax bootstrap

http://www.malsup.com/jquery/form/#getting-started

jQuery Form Plugin可以简便且隐式地使用AJAX改善HTML表单（Form）。主要的函数ajaxForm和ajaxSubmit从表单元素中收集信息然后决定如何管理提交过程。这两个函数都支持很多的选项，它们可以使你完全控制数据的提交方式。用AJAX提交表单再没有jQuery Form Plugin更方便的了

代码见https://github.com/alexdzul/demo

一.views.py

from django.shortcuts import render_to_response
from django.template import RequestContext
from demo.apps.ventas.models import producto
from demo.apps.home.forms import ContactForm, LoginForm,RegisterForm
from django.core.mail import EmailMultiAlternatives # Enviamos HTML
from django.contrib.auth.models import User
import django
from demo.settings import URL_LOGIN
from django.contrib.auth import login,logout,authenticate
from django.http import HttpResponseRedirect, HttpResponse
# Paginacion en Django
from django.core.paginator import Paginator,EmptyPage,InvalidPage
from django.contrib.auth.decorators import login_required
import simplejson

def index_view(request):
        return render_to_response('home/index.html',context_instance=RequestContext(request))

@login_required(login_url=URL_LOGIN)
def about_view(request):
        version = django.get_version()
        mensaje = "Esto es un mensaje desde mi vista"
        ctx = {'msg':mensaje,'version':version}
        return render_to_response('home/about.html',ctx,context_instance=RequestContext(request))

def productos_view(request,pagina):
        if request.method=="POST":
                if "product_id" in request.POST:
                        try:
                                id_producto = request.POST['product_id']
                                p = producto.objects.get(pk=id_producto)
                                mensaje = {"status":"True","product_id":p.id}
                                p.delete() # Elinamos objeto de la base de datos
                                return HttpResponse(simplejson.dumps(mensaje),mimetype='application/json')
                        except:
                                mensae = {"status":"False"}
                                return HttpResponse(simplejson.dumps(mensaje),mimetype='application/json')
        lista_prod = producto.objects.filter(status=True) # Select * from ventas_productos where status = True
        paginator = Paginator(lista_prod,5) # Cuantos productos quieres por pagina? = 3
        try:
                page = int(pagina)
        except:
                page = 1
        try:
                productos = paginator.page(page)
        except (EmptyPage,InvalidPage):
                productos = paginator.page(paginator.num_pages)
        ctx = {'productos':productos}
        return render_to_response('home/productos.html',ctx,context_instance=RequestContext(request))

def singleProduct_view(request,id_prod):
        prod = producto.objects.get(id=id_prod)
        cats = prod.categorias.all() # Obteniendo las categorias del producto encontrado
        ctx = {'producto':prod,'categorias':cats}
        return render_to_response('home/SingleProducto.html',ctx,context_instance=RequestContext(request))

@login_required(login_url=URL_LOGIN)
def contacto_view(request):
        info_enviado = False # Definir si se envio la informacion o no se envio
        email = ""
        titulo = ""
        texto = ""
        if request.method == "POST":
                formulario = ContactForm(request.POST)
                if formulario.is_valid():
                        info_enviado = True
                        email = formulario.cleaned_data['Email']
                        titulo = formulario.cleaned_data['Titulo']
                        texto = formulario.cleaned_data['Texto']

                        # Configuracion enviando mensaje via GMAIL
                        to_admin = 'alexexc2@gmail.com'
                        html_content = "Informacion recibida de [%s] <br><br><br>***Mensaje****<br><br>%s"%(email,texto)
                        msg = EmailMultiAlternatives('Correo de Contacto',html_content,'from@server.com',[to_admin])
                        msg.attach_alternative(html_content,'text/html') # Definimos el contenido como HTML
                        msg.send() # Enviamos en correo
        else:
                formulario = ContactForm()
        ctx = {'form':formulario,'email':email,'titulo':titulo,'texto':texto,'info_enviado':info_enviado}
        return render_to_response('home/contacto.html',ctx,context_instance=RequestContext(request))

def login_view(request):
        mensaje = ""
        if request.user.is_authenticated():
                return HttpResponseRedirect('/')
        else:
                if request.method == "POST":
                        form = LoginForm(request.POST)
                        if form.is_valid():
                                next = request.POST['next']
                                username = form.cleaned_data['username']
                                password = form.cleaned_data['password']
                                usuario = authenticate(username=username,password=password)
                                if usuario is not None and usuario.is_active:
                                        login(request,usuario)
                                        return HttpResponseRedirect(next)
                                else:
                                        mensaje = "usuario y/o password incorrecto"
                next = request.REQUEST.get('next')
                form = LoginForm()
                ctx = {'form':form,'mensaje':mensaje,'next':next}
                return render_to_response('home/login.html',ctx,context_instance=RequestContext(request))

def logout_view(request):
        logout(request)
        return HttpResponseRedirect('/')

def register_view(request):
        form = RegisterForm()
        if request.method == "POST":
                form = RegisterForm(request.POST)
                if form.is_valid():
                        usuario = form.cleaned_data['username']
                        email = form.cleaned_data['email']
                        password_one = form.cleaned_data['password_one']
                        password_two = form.cleaned_data['password_two']
                        u = User.objects.create_user(username=usuario,email=email,password=password_one)
                        u.save() # Guardar el objeto
                        return render_to_response('home/thanks_register.html',context_instance=RequestContext(request))
                else:
                        ctx = {'form':form}
                        return         render_to_response('home/register.html',ctx,context_instance=RequestContext(request))
        ctx = {'form':form}
        return render_to_response('home/register.html',ctx,context_instance=RequestContext(request))

二.demo.js

// Autor: @jqcaper
// Configuraciones Generales
var nombre_tabla = "#tabla_productos"; // id
var nombre_boton_eliminar = ".delete"; // Clase
var nombre_formulario_modal = "#frmEliminar"; //id
var nombre_ventana_modal = "#myModal"; // id
// Fin de configuraciones

    $(document).on('ready',function(){
        $(nombre_boton_eliminar).on('click',function(e){
            e.preventDefault();
            var Pid = $(this).attr('id');
            var name = $(this).data('name');
            $('#modal_idProducto').val(Pid);
            $('#modal_name').text(name);
        });

        var options = {
                success:function(response)
                {
                    if(response.status=="True"){
                        alert("Eliminado!");
                        var idProd = response.product_id;
                        var elementos= $(nombre_tabla+' >tbody >tr').length;
                        if(elementos==1){
                                location.reload();
                        }else{
                            $('#tr'+idProd).remove();
                            $(nombre_ventana_modal).modal('hide');
                        }
                        
                    }else{
                        alert("Hubo un error al eliminar!");
                        $(nombre_ventana_modal).modal('hide');
                    };
                }
            };

        $(nombre_formulario_modal).ajaxForm(options);
    });

三.base.html

{% extends 'base.html' %}
{% block title %} Lista de Productos {% endblock %}
{%block content %}

<!--IniciaModal-->
 <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
    <h3 id="myModalLabel">Eliminar Producto</h3>
    </div>
    <div class="modal-body">
    <p>¿Realmente desea eliminar el producto <span id="modal_name"></span>?</p>
    </div>
    <div class="modal-footer">
        <form method="post" id="frmEliminar">
            {% csrf_token %}
            <input type="hidden" id="modal_idProducto" name="product_id">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Cerrar</button>
            <button type="submit" class="btn btn-danger">Eliminar</button>
        </form>
    </div>
</div>
<!--EndModal-->

<h3>Catalogo de Productos:</h3>
{% if user.is_authenticated %}
<a href="{% url "vista_agregar_producto" %}" class="btn"><i class="icon-plus"></i> Nuevo</a><br>
{% endif %}
<br>
{% if productos %}
    <table class="table table-hover" id="tabla_productos">
            <thead>
                <tr>
                  <th>Producto</th>
                  <th>Precio</th>
                  <th>Stock</th>
                </tr>
        </thead>
    {% for p in productos %}
             <tbody>
                     <tr id="tr{{p.id}}">
                                <td>{{ p.nombre }}</td>
                                <td>{{ p.precio }}</td>
                                <td>{{ p.stock }}</td>
                                <td><a class="btn" href="/producto/{{p.id}}/"><i class="icon-search"></i> Ver</a></td>
                                <td><a class="btn" href="#"><i class="icon-shopping-cart"></i> Comprar</a></td>
                                {% if user.is_authenticated and user.is_staff %}
                                        <td><a class="btn" href="/edit/producto/{{p.id}}/"><i class="icon-pencil"></i> Editar </a></td>
                                        <td><a href="#myModal" role="button" class="btn btn-danger delete" data-toggle="modal" id="{{p.id}}" data-name="{{p.nombre}}"><i class="icon-trash icon-white"></i>Eliminar</a></td>
                                {% endif %}                                
                        </tr>
                </tbody>
        {% endfor %}
    </table>
        
{% else %}
        <h2>No existen productos activos a la venta :( </h2>
{% endif %}
<br>
{% if productos %}
    <div class="pagination">
    <ul>
                <li><a href="/productos/page/1"> << </a></li>
        {% if productos.has_previous %}
                <li><a href="/productos/page/{{productos.previous_page_number }}/"> Prev </a></li>
        {% else %}
                <li><a href="#"> Prev </a></li>
        {% endif %}
        {% if productos.has_next %}
                <li><a href="/productos/page/{{productos.next_page_number }}/"> Next </a></li>
        {% else %}
                <li><a href="#"> Next </a></li>
        {% endif %}
                <li><a href="/productos/page/{{productos.paginator.num_pages }} "> >> </a><li>
        </ul>
        </div>
        <h4> Página {{ productos.number }} de {{ productos.paginator.num_pages }}</h4>
{% endif %}
{% endblock %}

三.productos.html

{% extends 'base.html' %}
{% block title %} Lista de Productos {% endblock %}
{%block content %}

<!--IniciaModal-->
 <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
    <h3 id="myModalLabel">Eliminar Producto</h3>
    </div>
    <div class="modal-body">
    <p>¿Realmente desea eliminar el producto <span id="modal_name"></span>?</p>
    </div>
    <div class="modal-footer">
        <form method="post" id="frmEliminar">
            {% csrf_token %}
            <input type="hidden" id="modal_idProducto" name="product_id">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Cerrar</button>
            <button type="submit" class="btn btn-danger">Eliminar</button>
        </form>
    </div>
</div>
<!--EndModal-->

<h3>Catalogo de Productos:</h3>
{% if user.is_authenticated %}
<a href="{% url "vista_agregar_producto" %}" class="btn"><i class="icon-plus"></i> Nuevo</a><br>
{% endif %}
<br>
{% if productos %}
    <table class="table table-hover" id="tabla_productos">
            <thead>
                <tr>
                  <th>Producto</th>
                  <th>Precio</th>
                  <th>Stock</th>
                </tr>
        </thead>
    {% for p in productos %}
             <tbody>
                     <tr id="tr{{p.id}}">
                                <td>{{ p.nombre }}</td>
                                <td>{{ p.precio }}</td>
                                <td>{{ p.stock }}</td>
                                <td><a class="btn" href="/producto/{{p.id}}/"><i class="icon-search"></i> Ver</a></td>
                                <td><a class="btn" href="#"><i class="icon-shopping-cart"></i> Comprar</a></td>
                                {% if user.is_authenticated and user.is_staff %}
                                        <td><a class="btn" href="/edit/producto/{{p.id}}/"><i class="icon-pencil"></i> Editar </a></td>
                                        <td><a href="#myModal" role="button" class="btn btn-danger delete" data-toggle="modal" id="{{p.id}}" data-name="{{p.nombre}}"><i class="icon-trash icon-white"></i>Eliminar</a></td>
                                {% endif %}                                
                        </tr>
                </tbody>
        {% endfor %}
    </table>
        
{% else %}
        <h2>No existen productos activos a la venta :( </h2>
{% endif %}
<br>
{% if productos %}
    <div class="pagination">
    <ul>
                <li><a href="/productos/page/1"> << </a></li>
        {% if productos.has_previous %}
                <li><a href="/productos/page/{{productos.previous_page_number }}/"> Prev </a></li>
        {% else %}
                <li><a href="#"> Prev </a></li>
        {% endif %}
        {% if productos.has_next %}
                <li><a href="/productos/page/{{productos.next_page_number }}/"> Next </a></li>
        {% else %}
                <li><a href="#"> Next </a></li>
        {% endif %}
                <li><a href="/productos/page/{{productos.paginator.num_pages }} "> >> </a><li>
        </ul>
        </div>
        <h4> Página {{ productos.number }} de {{ productos.paginator.num_pages }}</h4>
{% endif %}
{% endblock %}