Problems, need help? Have a tip or advice? Post it here.
3 posts Page 1 of 1
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:
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">&times;</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)
Image
where innovation meets technology
:?:
Image
where innovation meets technology
Ok so this is the working code:

Code: Select all
        <!-- Button to Call the Modal -->
        <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>
        <!-- Button to Call the Modal -->

   <!-- 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">&times;</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:set submit_success="<cms:get_flash 'submit_success' />" />
                  <cms:if submit_success >
                       <div class="row">
                          <div class="gxcpl-ptop-10"></div>
                          <div class="col-md-10 col-md-offset-1">
                               <div class="alert alert-success text-center">
                                <strong>Success:</strong> Your application has been submitted.
                             </div>
                         </div>
                         <div class="gxcpl-ptop-10"></div>
                      </div>
                   </cms:if>
                   <cms:if k_error >
                        <div class="row">
                           <div class="gxcpl-ptop-10"></div>
                            <cms:each k_error >
                               <div class="col-md-10 col-md-offset-1 text-center">
                                  <div class="alert alert-danger">
                                     <cms:show item />
                                  </div>
                               </div>
                            </cms:each>
                            <div class="gxcpl-ptop-10"></div>
                        </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:abort><cms:show my_buffer /></cms:abort>
                            <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>


I just had to shift the:
Code: Select all
<cms:set submit_success="<cms:get_flash 'submit_success' />" />
                  <cms:if submit_success >
                       ...
                   </cms:if>

block into the <cms:form>...</cms:form> just below the
Code: Select all
<cms:if k_success >
                        <cms:db_persist_form
                        ...
                   </cms:if>

block.

The code is fully functional and can be used to implement a Databound Form in a bootstrap modal.

Supports: Bootstrap v3

Hope it helps others!

Regards,
GenXCoders (Aashish)
Image
where innovation meets technology
3 posts Page 1 of 1