Como inserir dados utilizando formulários modais do BOOTSTRAP?

[Elias Coutinho]

Bom dia meus amigos,

Criei uma aplicação django e indo pelo curso normal do django posso fazer a inserção de registros e consequentemente listalo em uma tabela ou lista.

Minha dúvida é: Criei um formulário modal utilizando o bootstrap e ao invés de chamar um formulário para inserir os dados em outro template gostaria de chamar um formulário modal e continuar no mesmo template da lista, assim eu ao concluir a inserção não precisaria ficar trocando de templates direto.

O motivo de ser assim é para que eu cadastre os endereços de uma pessoa sem sair do formulário de cadastro da pessoa.

Abaixo tem os códigos:


As views

Digite o código aqui...# _*_  encoding: utf-8 _*_
from django.shortcuts import render
from django.shortcuts import render_to_response
from django.template import RequestContext
from django.contrib import messages
from django.http import HttpResponseRedirect
from django.core.urlresolvers import reverse
from models import ItemAgenda
from forms import FormItemAgenda

# Create your views here.

def lista(request):
    lista_itens = ItemAgenda.objects.all()
    return render_to_response("lista.html", {'lista_itens': lista_itens})

def adiciona(request):
    if request.method == "POST":
        form =FormItemAgenda(request.POST, request.FILES)
        if form.is_valid():
            form.save()
            #item.save()

            messages.success(request, 'Agendamento cadastrado com sucesso!')
            return HttpResponseRedirect('/')
    #return render_to_response("salvo.html",{})
    else:
        form =FormItemAgenda()
    return render_to_response("adiciona.html",{'form': form},
            context_instance=RequestContext(request))

Abaixo os templates:

Adiciona.html

Digite o código aqui...{% extends "base.html" %}

{% block corpo %}
    <form action="" method="post">
        {% csrf_token %}
        {{form.as_p}}
        <button type="submit">Adicionar</button>
    </form>
{% endblock %}

Lista.html

{% extends 'base.html' %}

{% block corpo %}
<a href="/adiciona/">Adiciona novo agendamento</a>
        <h1>Seus Agendamentos</h1>
                <table>
                        <tr>
                                <th>Data</th>
                                <th>Hora</th>
                                <th>Titulo</th>
                        </tr>
                {% for item in lista_itens %}
                        <tr>
                                <td>{{ item.data | date:'d/m/Y' }}</td>
                                <td>{{ item.hora }}</td>
                                <td>{{ item.titulo }}</td>
                        </tr>
                {% empty %}
                        <li>Sem itens na lista.</li>
                {% endfor %}
                </table>
</section>
{% endblock %}

Gostaria que pudesse chamar um modal no Lista.htm que viesse os campos do Adiciona.html e todas as suas funcionalidades, mas conforme tentei não funciona.

{% extends 'base.html' %}

{% block corpo %}
<a href="/adiciona/">Adiciona novo agendamento</a>

    <div class="container" style="margin-top: 6px;">
        <button class="btn btn-info" data-toggle="modal" data-target="#miventana">Abrir modal</button>
        <div class="modal fade" id="miventana" tab-index="-1" role="dialog" aria-labelledby="myModalLabel" aria-hiden="true">
            <div class="modal-dialog">
                <div class="modal-content">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4>Titulo do formulario modal!</h4>
                </div>

                <div class="modal-body">
                            <form action="" method="post">
                                {{form.as_p}}
                            </form>
                </div>

                <div class="modal-footer">
                <button type="submit" class="btn btn-primary" data-dismiss="modal">Adicionar</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">Fechar</button>
                </div>

                </div>
            </div>
        </div>
    </div>


        <h1>Seus Agendamentos</h1>
                <table>
                        <tr>
                                <th>Data</th>
                                <th>Hora</th>
                                <th>Titulo</th>
                        </tr>
                {% for item in lista_itens %}
                        <tr>
                                <td>{{ item.data | date:'d/m/Y' }}</td>
                                <td>{{ item.hora }}</td>
                                <td>{{ item.titulo }}</td>
                        </tr>
                {% empty %}
                        <li>Sem itens na lista.</li>
                {% endfor %}
                </table>
</section>
{% endblock %}Digite o código aqui...

Alguém pode me ajudar?

Obrigado.

[Neto]

Se você quer realizar o cadastro sem sair da página, você ter que usar Ajax. http://api.jquery.com/jquery.ajax/

[Neto]

No caso para importar uma página dentro do modal, você terá que usar load() do jQuery.

[Elias Coutinho]

Obrigado pela dica, você tem algum exemplo que eu possa baixar?

--
Você recebeu essa mensagem porque está inscrito em um tópico no grupo "Django Brasil" dos Grupos do Google.
Para cancelar inscrição nesse tópico, acesse https://groups.google.com/d/topic/django-brasil/j1P7M3Dw8jo/unsubscribe.
Para cancelar inscrição nesse grupo e todos os seus tópicos, envie um e-mail para django-brasi...@googlegroups.com.
Para mais opções, acesse https://groups.google.com/d/optout.

--

Elias Coutinho.
Aprender sobre alguns assuntos é fundamental.
Aprender sobre Deus é indiscutivelmente o melhor conteúdo.