[英]Submit Form in Bootstrap Modal with IronRouter / MeteorJS
我正在嘗試向正在創建的類似於食譜的Web應用程序提交新的開胃菜。 布局具有恆定的頁眉/導航,允許用戶添加新的開胃菜,這會觸發一個模態和包含開胃菜名稱,說明和照片的表格。 我希望該模式在提交后關閉,並保留在觸發該模式的當前頁面上。 目前,我的提交表單不起作用,我不確定問題出在哪里...
當前部署版本的鏈接是: http : //reed-cookbook.meteor.com/
我的路由器:
// lib/router.js
Router.configure({
layoutTemplate: 'layout'
});
Router.map(function() {
this.route('allRecipes', {
path: '/'
});
this.route('appetizers', {
path: '/appetizers'
});
this.route('appetizerPage', {
path: '/appetizers/:_id',
data: function() { return Appetizers.findOne(this.params._id); }
});
this.route('desserts', {
path: '/desserts'
});
this.route('mainCourses', {
path: '/maincourses'
});
this.route('submit', {
path: '/appetizerSubmit'
});
});
我的開胃html表格:
// client/views/forms/appetizerForm.html
<template name="appetizerForm">
<!-- This is the appetizer modal -->
<div class="modal fade" id="myAppModal" 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-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add An Appetizer</h4>
</div>
<div class="modal-body">
<!-- This is the appetizer form -->
<form>
<div class="form-group">
<label for="inputNewLabel">Name</label>
<input type="text" class="form-control" id="addNewAppetizer" name="appName" placeholder="What is the name of this appetizer?">
</div>
<div class="form-group">
<label for="inputNewLabel">Description</label>
<input type="text" class="form-control" id="addNewAppDesc" name="appDesc" placeholder="Share details about your appetizer.">
</div>
<div class="form-group">
<label for="inputNewLabel">Add Photo</label>
<input type="file" id="addNewAppPic" name="appPic">
<p class="help-block">Upload a photo of your appetizer.</p>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" value="submitApp">Submit Appetizer</button>
</div>
</div>
我的appetizerForm.js用於此特定的html功能:
// client/views/forms/appetizerForm.js
Template.appetizerForm.events({
'submitApp': function(e) {
e.preventDefault();
var appetizer = {
name: $(e.target).find('[name=appName]').val(),
description: $(e.target).find('[name=appDesc]'),
photo: $(e.target).find('[name=appPic]').val()
}
appetizer._id = Appetizers.insert(appetizer);
Router.go('/', appetizer);
}
});
您的事件映射語法錯誤,它必須是eventType cssSelector
。
Template.appetizerForm.events({
"submit form": function(event, template) {
event.preventDefault();
[...]
template.$(".modal").modal("hide");
}
});
如果您希望模態在表單提交時關閉,請使用jQuery插件語法在模態上調用hide方法。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.