Modal form submit inside child row

skouky@gmail.com

Hi All,

I am new to DataTables. I am trying to enhance my existing tables with the great sorting and filtering support provided by the DataTables library. I have most of it working, but one important details is causing me some issues at the moment.

In summary, I need to be able to expand/collapse a child row with additional details and options for each row. This child row has a button (among other things) that will bring up a Modal with a form that can be submitted. The problem I am experiencing is that when I hit the Modal form submit button, the event.preventDefault() does not seem to be in effect. The form is being posted to the url specified in the form's action attribute instead of using my $('form').on('submit', function(event).

I have included a simplified version of my code below.

I hope there is a simple fix/work-around for this and appreciate any help you can provide.

Best regards,
Michael

---

<style>

td.details-control {
  background: url('path-to-add-square-button.png') no-repeat center center;
  cursor: pointer;
  }

tr.shown td.details-control {
  background: url('path-to-minus-square-button.png') no-repeat center center;
  }

</style>

<script>

function format ( d ) {
  return d.AJAXHTML_CASEDETAILS;
}


$(document).ready(function() {

  var siteTable = $('#myDTable').DataTable( {
    ajax: '/apps/dash/managerdashboardajax',
    paging:   false,
    info:     false,
    order: [[2, 'asc']],
    columns: [
                { orderable: false,
                  data: null,
                  defaultContent: '',
                  className: 'details-control' },
                { data: 'CUSTOMER_NAME'},
                { data: 'PRODUCT_FAMILY'}
             ],
  });


  $('#myDTable tbody').on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = siteTable.row( tr );
 
    if ( row.child.isShown() ) {
      row.child.hide();
      tr.removeClass('shown');
    }
    else {
      row.child( format(row.data()) ).show();
      tr.addClass('shown');
    }
  });


  $('form').on('submit', function(event) {
    var fieldId = $(this).attr('id');
    $.ajax({
      data : {
        userid:          $('#userid' + fieldId).val(),
        caseid:          $('#caseid' + fieldId).val(),
        comments:        $('#comments' + fieldId).val()
      },
      type : 'POST',
      url : '/apps/dash/requestrefresh'
    })
    .done(function(data) {
      if (data.error) {
        console.log(data)
      }
      else {
        $('#userid' + fieldId).val('');
        $('#caseid' + fieldId).val('');
        $('#comments' + fieldId).val('');
        $(".modal").modal('hide');
      }
    });
    event.preventDefault();
  });


});

</script>

Sample Modal contained in AJAXHTML_CASEDETAILS:

<div class="modal fade" id="ModalRRid12345" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <form id="id12345" action="/" method="post" role="form" class="form-horizontal" autocomplete="off">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">id12345 Sample Case Title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
          <div class="form-row">
            <div class="form-group col-md-12">
              <label class="small">
                Comments to be sent with the request for case refresh:
              </label>
              <textarea id="commentsid12345" rows="8" class="form-control form-control-sm" name="comments"></textarea>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <input type="hidden" id="useridid12345" value="some_userid" />
          <input type="hidden" id="caseidid12345" value="id12345" />
          <button type="submit" class="btn btn-primary">Submit</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        </div>
      </div>
    </div>
  </form>
</div>

kthorngren

I don't think there is anything specific about using child detail rows that would cause the problem. Have you tested without using child rows to see if the problem still exists? Can you post a test case replicating the issue?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

skouky@gmail.com

Hi Kevin,

Thanks for taking a look. It is suddenly working now. I had made a number of changes in the meantime and unfortunately I am not sure what triggered the change in behavior.

I will leave it at that.

Best regards,
Michael