form in modal

[Shawn Michaels]

Hi, I managed to get form in modal to work, but I have problem - when I submit form the form hides and there is still shadow background there. I'm working with latest bootstrap (4.3.1) right now (don't know if it's the reason).

response.js with form.errors shows the form again but with accepted it's unable to hide. I suppose it should work without response.js at all but without it the form hides but as I stated before there is still shadow background over page.

def news():

    form = SQLFORM.factory(
        Field('your_name', requires=IS_NOT_EMPTY()),
        Field('your_state',))
   
    if form.process().accepted:
        response.js = '(function($) {$("#news").modal("hide");}(jQuery));'
        response.flash = 'form accepted'
    elif form.errors:
        response.js = '(function($) {$("#news").modal("show");}(jQuery));'
        response.flash = 'form has errors'
    else:
        #response.js = target_response
        response.flash = 'please fill the form'
    return dict(form=form)

<!-- news.load -->

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#news">
  News
</button>
<div class="modal fade" id="news" tabindex="-1" role="dialog" aria-labelledby="newsLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="newsLabel">News</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        {{=form}}
      </div>
    </div>
  </div>
</div>

<!-- index.html -->

{{extend 'layout.html'}}

{{=LOAD('default', 'news.load', ajax=True)}}

Is it possible to get forms in modal to work? If so, how, thanks.

[Leonel Câmara]

I use this little javascript function

function load_in_modal(url, modal_id, options, modal_options) {
    if (typeof options === 'undefined') {
      /* Example Options.
       * {title: "Add Image"}
       */
      options = {};
    }
    if (typeof modal_options === 'undefined') {
      modal_options = {}
    }
    modal_options.show = true;

    /* Remember to set an id in your modal's body */
    $.web2py.component(url, $('#' + modal_id + ' .modal-body').attr('id'));

    $('#' + modal_id).modal(modal_options);
    if (typeof options.title !== undefined) {
        $('#' + modal_id + ' .modal-title').text(options.title);
    }
}

Usage in your case would be to remove the LOAD call and change the button to this:

<button type="button" class="btn btn-primary" onclick="load_in_modal('{{=URL('default', 'news.load')}}', 'news')">
    News
</button>