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 %}