Jquery 以引导模式提交Django表单_Jquery_Python_Django_Forms_Twitter Bootstrap

Jquery 以引导模式提交Django表单

jquery python django forms twitter-bootstrap

Jquery 以引导模式提交Django表单,jquery,python,django,forms,twitter-bootstrap,Jquery,Python,Django,Forms,Twitter Bootstrap,我是Django的新手，我正在试图弄清楚如何在modal中提交表单。我有两个Django应用程序，前端和登录。前端应用程序交付页面，登录应该处理表单。我使用crispy表单来呈现表单，但无法让表单提交。我已经为此挣扎了几天。通读了很多关于这个的帖子，仍然无法理解。任何帮助都将不胜感激。非常感谢你。我正在使用Django版本1.6 前端应用程序的URL.py： from django.conf.urls import patterns, url from django.contrib import

我是Django的新手，我正在试图弄清楚如何在modal中提交表单。我有两个Django应用程序，前端和登录。前端应用程序交付页面，登录应该处理表单。我使用crispy表单来呈现表单，但无法让表单提交。我已经为此挣扎了几天。通读了很多关于这个的帖子，仍然无法理解。任何帮助都将不胜感激。非常感谢你。我正在使用Django版本1.6

前端应用程序的URL.py：

from django.conf.urls import patterns, url
from django.contrib import admin
from frontend import views
from login.views import registration

urlpatterns = patterns('',
    url(r'^$', views.index, name='index'),
    url(r'^about/$', views.about, name='about'),
    url(r'^contact/$', views.contact, name='contact'),
    url(r'^$', 'index', name='index'),
    url(r'^$',views.registration, name='register'),
)

from django.conf.urls import patterns, url
from login import views

urlpatterns = patterns('',
   url(r'^register/$', views.registration, name='index.html')

)

前端应用程序的views.py：

from django.template import RequestContext
from django.shortcuts import render_to_response
from login.forms import RegistrationForm
from login.forms import LoginForm
from login.views import registration

def index(request):
    return render_to_response('index.html', {'regform':RegistrationForm(),'loginform': LoginForm()} )


def about(request):
    return render_to_response('about.html')

def contact(request):
    return render_to_response('contact.html')

from django.template import RequestContext
from django.shortcuts import render_to_response
from login.forms import RegistrationForm



def registration(request):


    context = RequestContext(request)


    registered = False


if request.method == 'POST':
    
    user_form = RegistrationForm(request.POST)
    

    
    user = user_form.save()

        
    user.set_password(user.password)
    user.save()

    registered = True

   


else:
    user_form = RegistrationForm()
    
return render_to_response('index.html', {'regform': user_form}, context)

def login(request):
   context = RequestContext(request)
   login_form = LoginForm()
   return render_to_response('index.html', {loginform: login_form}, context)

def addUser(request):

form = RegistrationForm(data=request.POST or None)
if form.is_valid():
    # You could actually save through AJAX and return a success code here
    form.save()
    return {'success': True}

form_html = render_crispy_form(form)
return {'success': False, 'form_html': form_html}

登录应用程序的URL.py：

from django.conf.urls import patterns, url
from django.contrib import admin
from frontend import views
from login.views import registration

urlpatterns = patterns('',
    url(r'^$', views.index, name='index'),
    url(r'^about/$', views.about, name='about'),
    url(r'^contact/$', views.contact, name='contact'),
    url(r'^$', 'index', name='index'),
    url(r'^$',views.registration, name='register'),
)

from django.conf.urls import patterns, url
from login import views

urlpatterns = patterns('',
   url(r'^register/$', views.registration, name='index.html')

)

登录应用程序的views.py：

from django.template import RequestContext
from django.shortcuts import render_to_response
from login.forms import RegistrationForm
from login.forms import LoginForm
from login.views import registration

def index(request):
    return render_to_response('index.html', {'regform':RegistrationForm(),'loginform': LoginForm()} )


def about(request):
    return render_to_response('about.html')

def contact(request):
    return render_to_response('contact.html')

from django.template import RequestContext
from django.shortcuts import render_to_response
from login.forms import RegistrationForm



def registration(request):


    context = RequestContext(request)


    registered = False


if request.method == 'POST':
    
    user_form = RegistrationForm(request.POST)
    

    
    user = user_form.save()

        
    user.set_password(user.password)
    user.save()

    registered = True

   


else:
    user_form = RegistrationForm()
    
return render_to_response('index.html', {'regform': user_form}, context)

def login(request):
   context = RequestContext(request)
   login_form = LoginForm()
   return render_to_response('index.html', {loginform: login_form}, context)

def addUser(request):

form = RegistrationForm(data=request.POST or None)
if form.is_valid():
    # You could actually save through AJAX and return a success code here
    form.save()
    return {'success': True}

form_html = render_crispy_form(form)
return {'success': False, 'form_html': form_html}

登录应用程序的forms.py：

from django.contrib.auth.models import User
from django import forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Submit, Layout, Field
from crispy_forms.bootstrap import (PrependedText, PrependedAppendedText, FormActions)
from login.models import User



class RegistrationForm(forms.ModelForm):
     password = forms.CharField(widget=forms.PasswordInput())

     class Meta:
           model = User
           fields = ('username', 'email', 'first_name','last_name','password')
           helper = FormHelper()
           helper.form_method = 'POST'
           helper.add_input(Submit('save', 'save', css_class='btn-primary'))

     class LoginForm(forms.ModelForm):
           password = forms.CharField(widget=forms.PasswordInput())

 class Meta:
    model = User
    fields = ('username', 'password')
@property   
def helper(self):        
    helper = FormHelper()
        helper.form_method = 'POST'
        helper.add_input(Submit('save', 'save', css_class='btn-primary'))
    return helper

Index.html模式：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog"  aria-labelledby="myModalLabel" aria-hidden="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 class="modal-title" id="myModalLabel">Register </h4>
      </div>
      <div class="modal-body">
   <ul class="nav nav-tabs">
     <li class="active"><a href="#tab1" data-toggle="tab">Login</a></li>
         <li><a href="#tab2" data-toggle="tab">Register</a></li>
     </ul>
        <form action="" method=post"> 
         <div class="tab-content">
           <div class="tab-pane active" id="tab1">
            
    {% crispy loginform %}
    
           </div>
           <div class="tab-pane" id="tab2">
             
    {% crispy regform %}
     
           </div>
         </form>
         </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary">Submit</button>
      
      </div>
    </div>
  </div>
</div>

根据要求，呈现了模态的HTML：

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"   aria-labelledby="myModalLabel" aria-hidden="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 class="modal-title" id="myModalLabel">Register </h4>
      </div>
      <div class="modal-body">
   <ul class="nav nav-tabs">
     <li class="active"><a href="#tab1" data-toggle="tab">Login</a></li>
         <li><a href="#tab2" data-toggle="tab">Register</a></li>
     </ul>
        <form id="login" action="/frontend/register/" method="POST"> 
         <div class="tab-content">
           <div class="tab-pane active" id="tab1">

更新的Forms.py：

class RegistrationForm(forms.ModelForm):
    password = forms.CharField(widget=forms.PasswordInput())
    class Meta:
         model = User
         fields = ('username', 'email', 'first_name','last_name','password')
    def __init__(self, *args, **kwargs):
             super(RegistrationForm, self).__init__(*args, **kwargs)
             self.helper = FormHelper()
             self.helper.form_id = 'id-registration'
             self.helper.form_class = 'blueForms'
             self.helper.form_method = 'post'
             self.helper.form_action = '/register/'
             self.helper.add_input(Submit('submit', 'Submit'))

问题已经解决：

<script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="{% static 'js/jquery-validation- 1.11.1/jquery.validate.js' %}"></script>   
<script>
$(document).ready(function () {
  var frm = $('#id-registration');
  $('#id-registration').validate({
  
    rules: {
        username: {required: true},
        email: {required: true},
        password: {required: true}
        
},

 submitHandler: function(){
    $.ajax({//begin
        type: 'POST', <!-- Get the form's method attribute(defined in login/forms.py -->
        url: frm.attr('action'),  <!-- Get the form's action attribute(defined in   login/forms.py -->
        data: $(frm).serialize(),    <!-- package the data -->
        success: function(data){
            $(frm).hide();
    $("#div-form").html("<h3 style='text-align:center;'>Thank you, for Registering!</h3>");
    
        },
        error: function(data) {           <!-- else print error -->
            $("#div-form").html("Failure!");
        }//end error
    });//end ajax

    return false;
    }   
    });   
    });



    </script>


$（文档）.ready（函数（）{
var frm=$（“#id注册”）；
$（“#id注册”）。验证({
规则：{
用户名：{必需：true}，
电子邮件：{必需：true}，
密码：{必需：true}
},
submitHandler:function（）{
$.ajax（{//begin
键入：“POST”，
url:frm.attr（'action'），
数据：$（frm）.serialize（），
成功：功能（数据）{
$（frm.hide（）；
$（“#div form”）.html（“谢谢您的注册！”）；
},
错误：函数（数据）{
$（“#div form”）.html（“失败！”）；
}//端错误
})；//结束ajax
返回false；
}   
});   
});

您有两种可能：

通过HTML post请求

将

放入

中。将submit按钮的类型更改为

type=“submit”

，并通过添加操作和修复方法中的打字错误来修复表单属性

通过AJAX请求

向submit按钮添加一个id，并在执行AJAX请求的按钮上附加一个click事件

<script>
    $('#login').on('click', function (e) {
        // login action
    });
</script>


$（'#login'）。在（'click'，函数（e）{
//登录操作
});

有关更多信息，请阅读

，首先，我会启动您的浏览器开发工具（例如Firefox中的Firebug）。在“网络”选项卡中，密切监视POST请求是否已发送

发送请求后，您可以检查请求的内容和答复。这有助于确定您的表单是否捕获了输入中的所有数据，或者您的url.py是否有问题

如果表单提交正确（状态为200），您可以开始调试Django应用程序。

我遇到了类似的问题，并解决了

data dismission=“modal”

为我解决了这个问题

它并没有太多的回答你的问题，但是有相同问题的人最终会出现在这个页面上，也许这会对他们有所帮助。

谢谢你的回答。我一直在努力让Ajax工作，但是我的JS没有达到标准。我在第一篇文章中将尝试的内容添加到代码库中。单击“提交”时，我没有看到任何情况发生。然后，您的“提交”按钮似乎未绑定到表单。你能发布呈现的HTML代码吗？我已经发布了。很抱歉格式化，我无法将其转到tab上。谢谢。在ajax请求中，您希望使用id=“login”提交表单数据。尝试数据：$（“#登录”）。序列化（）检查调试工具>控制台中的错误消息。我试了一下，但还是一无所获。我甚至连按下按钮的console.log（“clicked”）调用都没有。