Bootstrap以模态提交表单并保持在同一页面中

时间:2016-08-31 09:13:58

标签: twitter-bootstrap grails bootstrap-modal

我在 grails 项目中使用 bootstrap ,在我的 gsp 页面中,我有一个按钮(b1)当我点击它时会显示一个bootstrap模式。在模态中我有一个表单和提交按钮,我需要的是在提交表单后退出模态并保持在我所在的页面(包含的页面)的 B1

这是我的代码:

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">${'Volunteer for ' + tekEventInstance.name}</h4>
            </div>

            <div class="modal-body">
                <label class="label-warning">Welcome to the team!
                Your help will make a huge difference.</label>
                <g:form controller="tekEvent" action="volunteer" method="POST" target="_blank">
                    <input type="hidden" name="id" value="${tekEventInstance.id}" />
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-success" value="Submit" >Submit</button>
                </g:form>
            </div>
        </div>

    </div>
</div>
<!-- Modal -->

我的志愿者操作在提交表单后呈现一条消息。我在引导程序之前使用 gui:dialog 并且消息显示在同一页面中,但现在显示在一个带有网址的新窗口:http://localhost:8080/TekDays/tekEvent/volunteer。我甚至没有带有volunteer.gsp的页面!

这是我的志愿者行动:

def volunteer = {
    def event = TekEvent.get(params.id)
    event.addToVolunteers(session.user)
    event.save()
    render "Thank you for Volunteering"

}

提前致谢

1 个答案:

答案 0 :(得分:0)

您可以通过以下方式实现:

使用ajax将值提交给操作。请参阅此链接。 http://api.jquery.com/jquery.ajax/

或者

创建formRemote。 http://docs.grails.org/2.1.0/ref/Tags/formRemote.html

从志愿者行动重定向到呈现上述gsp的行动。

由于