EDIT #1: Code Changes Updated: Able to show Error | Not Able to show Success Message
EDIT #2: Working code,
Features:
a. Does not all the bootstrap modal to close when 'ESC' button is pressed or mouse is clicked outside the modal.
b. Success and Error Messages are displayed in the modal itself.
c. AJAX is used so that the page does not refresh and closes the modal
Please jump to the third post
I have been through the forum and found a lot of resources for displaying a form (contact) in a bootstrap modal. One of the questions being min which was answered by @KK Sir (and can be found here).
What I have understood from these is that, we basically need to capture the form fields and the modal itself in <cms:capture> tag.
I am able to get the form in the modal, persist the modal when an error occurs. But the issue is that, I am not able to get the form to display.
This is the code I am working with:
Please suggest!
Regards,
GenxCoders (Aashish)
EDIT #2: Working code,
Features:
a. Does not all the bootstrap modal to close when 'ESC' button is pressed or mouse is clicked outside the modal.
b. Success and Error Messages are displayed in the modal itself.
c. AJAX is used so that the page does not refresh and closes the modal
Please jump to the third post
I have been through the forum and found a lot of resources for displaying a form (contact) in a bootstrap modal. One of the questions being min which was answered by @KK Sir (and can be found here).
What I have understood from these is that, we basically need to capture the form fields and the modal itself in <cms:capture> tag.
I am able to get the form in the modal, persist the modal when an error occurs. But the issue is that, I am not able to get the form to display.
This is the code I am working with:
- Code: Select all
<div class="container">
<div class="row">
<div class="col-md-12">
<center>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal" data-backdrop='static' data-keyboard='false'>
<i class="fa fa-sign-in"></i> Open Modal
</button>
</center>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<cms:capture into='my_form_buffer'>
<cms:form
id='updateform'
masterpage=k_template_name
mode='create'
enctype='multipart/form-data'
method='post'
anchor='0'
>
<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 Your Name</h4>
</div>
<cms:if k_success >
<cms:db_persist_form
_invalidate_cache='0'
_auto_title='1'
/>
<cms:if k_success >
<cms:set_flash name='submit_success' value='1' />
<cms:redirect k_page_link />
</cms:if>
</cms:if>
<cms:if k_error >
<div class="row">
<cms:each k_error >
<div class="col-md-12">
<div class="alert alert-danger">
<cms:show item />
</div>
</div>
</cms:each>
</div>
</cms:if>
<div class="modal-body">
<div class="row">
<cms:capture into='my_buffer'>
<div class="col-md-3">
<label for="name">Enter Name</label>
<div class="gxcpl-ptop-10"></div>
</div>
<div class="col-md-9">
<cms:input name="name" type="bound" class="form-control" />
<div class="gxcpl-ptop-10"></div>
</div>
</cms:capture>
<cms:if k_success>
<cms:set submit_success="<cms:get_flash 'submit_success' />" />
<cms:if submit_success >
<h4>Success: Your application has been submitted.</h4>
</cms:if>
<cms:else />
<cms:show my_buffer />
</cms:if>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
<button type="submit" class="btn btn-primary"><i class="fa fa-save"></i> Save changes</button>
</div>
</cms:form>
</cms:capture>
<cms:if "<cms:is_ajax />">
<cms:abort><cms:show my_form_buffer /></cms:abort>
<cms:else />
<cms:show my_form_buffer />
</cms:if>
</div>
</div>
</div>
Please suggest!
Regards,
GenxCoders (Aashish)