使用Bootstrap模式提交表单而不使用javascript?

时间:2013-07-08 18:06:50

标签: django twitter-bootstrap modal-dialog

我正在开发一个django应用程序,我正在尝试使用Bootstrap模式来显示和提交存储在单独的html文件中的表单。我有模式显示的形式,我可以按下保存按钮,它关闭模式并重定向(虽然页面显示空白,即使它是正确的URL)。我也在使用crispy-forms,因此按钮正在完成,而不是放在我的模态中。

我没有使用javascript的经验所以我希望使用bootstrap我能够避免使用它,并且必须有一种方法,对吧?

我知道我的表单有效,因为当我在模态之外加载html文件时,我可以保存我的表单,并且它正确地重定向到主页面,但它在模态中不起作用。

按钮触发模态

<button type="button" class="btn btn-primary btn-small" data-toggle="modal" href="new/" data-target="#newExpense" style="margin-left:15px;margin-top:20px">Add Expense(m)</button>

模态

<div id="newExpense" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="newExpenseLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>New Expense</h3>
  </div>
  <div class="modal-body">
    <!--new.html is automatically inserted here-->
  </div>
</div>

脆皮表格

class ExpenseForm(forms.ModelForm):

class Meta:
  model = Expense
  fields = ['date', 'store', 'price', 'payment_type', 'category']
  widgets = {
    'date': forms.DateInput,
  }

def __init__(self, *args, **kwargs):
  self.helper = FormHelper()
  self.helper.form_id = 'id-expenseForm'
  self.helper.form_method = 'POST'
  self.helper.form_class = 'form-horizontal'
  self.helper.help_text_inline = True

  self.helper.layout = Layout(
    Fieldset(
      '',
      'date',
      'store', 
      'price', 
      'payment_type',
      'category', 
      ),
    FormActions(
      Submit('save', 'Save'),
      Reset('reset', 'Reset'),
      )
    )
  super(ExpenseForm, self).__init__(*args, **kwargs)

查看功能

def new(request, template='expenses/new.html'):
  if request.method == 'POST':
    new_expense = ExpenseForm(request.POST)
  if new_expense.is_valid() and new_expense.clean():
    new_expense.save()
    return HttpResponseRedirect('/')
  else:
    new_expense = ExpenseForm()

  return render(request, template, {'new_expense':new_expense})

(很抱歉,如果那里的代码没有用,或者我缺少有用的代码)

0 个答案:

没有答案