Put HTML Form In Bootstrap 4 Modal Inside DataTable

zgoforth

Hello, so I have a DataTable and an HTML form that is used to update the DataTable by sending info collected to its respective SharePoint list. I found on this site about Bootstrap Modals, and was curious to if I can place the modal in the header of my DataTable. Where I have my export dom dropdown button.

$(document).ready(function() {
    var collapsedGroups = {}; 
    var top = '';
    var parent = '';
    
  var table = $('#myTable').DataTable( {
    "columns": [
      { "data": "Program", visible: false },
      { "data": "Deliverable", visible: false },
      { "data": " ",},
      { "data": "To" },
      { "data": "Date" },
      { "data": "Approved" },
      { "data": "Notes" }
    ],
    
    dom: "<'row'<'col-sm-12 col-md-10'f><'col-sm-12 col-md-2'B>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
     buttons: [{
      extend: 'collection',
      className: "btn-dark",
      text: 'Export',
      buttons:
      [{
      extend: "excel", className: "btn-dark"
    },
      {
      extend: "pdf", className: "btn-dark"
    },
       {
      extend: "print", className: "btn-dark"   
    },
      ],
    }],
    order: [[0, 'asc'], [1, 'asc'] ],   
    rowGroup: {
            dataSrc: [
            'Program',
            'Deliverable'
            ],
            startRender: function (rows,group,level){
                var all;
                if (level === 0) {
                    top = group;
                    all = group;
                } else if (level === 1) {
                    parent = top + group; 
                    all = parent; 
                    // if parent collapsed, nothing to do
                    if (!collapsedGroups[top]) {
                        return;
                    }                   
                } else {
                    // if parent collapsed, nothing to do
                    if (!collapsedGroups[parent]) {
                        return;
                    } 
                    all = top + parent + group;
                }

                var collapsed = !collapsedGroups[all];
                console.log('collapsed:', collapsed);
              
              rows.nodes().each(function(r) {
                r.style.display = collapsed ? 'none' : '';
              });
              //Add category name to the <tr>.
              return $('<tr/>')
                .append('<td colspan="8">' + group + ' (' + rows.count() + ')</td>')
                .attr('data-name', all)
                .toggleClass('collapsed', collapsed);
                
            
            }
            
        }
  } );
    
 loadData();

 $('#myTable tbody').on('click', 'tr.dtrg-start', function () {
        var name = $(this).data('name');
        collapsedGroups[name] = !collapsedGroups[name];
        table.draw(false);
    });   

    
} );

Here is my modal with form in it.
https://jsfiddle.net/roh6cvp7/

kthorngren

You can use a Custom Button for this. Here is an example. In the button you can use .modal('show') to show the modal.

Kevin

zgoforth

@kthorngren I added it to my datatable buttons section, and nothing happened. I tried making a DataTable with static version of my data but it isnt working -.- https://jsfiddle.net/y67124Ls/

kthorngren

I tried making a DataTable with static version of my data but it isnt working

Did you look at the browser's console for errors?

Kevin

zgoforth

@kthorngren fixed/updated it. this fiddle for some reason wont group my data properly but thats not the issue I am worried about https://jsfiddle.net/y67124Ls/

I cant seem to figure why the button I tried to implement doesn't show up. Can't find anything in the console.

kthorngren

You provided the same test case link.

I cant seem to figure why the button I tried to implement doesn't show up.

Did you include the buttons JS and CSS code? Your first example only has jquery.dataTables.min.css and is missing datatables.js and the buttons code.

Kevin

zgoforth

My apologies. Yes I do have it https://jsfiddle.net/y67124Ls/1/

tangerine

Your alert is missing a closing bracket.

(alert( 'Button activated' );

Testing your test cases before posting them would be a sensible idea.

zgoforth

@tangerine I have.

kthorngren

Not sure if you still have a question. Its working, you placed it inside the buttons collection so you have to click the Export button.

Kevin

zgoforth

@kthorngren my apologies I didn't recall adding it to "extend" for that to happen but it did. My question is how do I get my HTML form to show up in that button

kthorngren

My question is how do I get my HTML form to show up in that button

As I mentioned earlier....

you can use .modal('show') to show the modal.

Kevin

zgoforth

@kthorngren I understand that. but the modal('show') requires a javscript function. How can I insert a HTML form into that? I have tried looking it up and all I can see is a table not a form, which is nothing like I want.
for example.. https://jsfiddle.net/y67124Ls/2/

kthorngren

You need your modal HTML code from your first example. Then instead of the button in your first example you are using the custom button. To have the custom button show the modal you will replace the alert message with $('#myModal').modal('show'); where myModal is the HTML id of the modal.

Kevin

zgoforth

@kthorngren so would I need to wrap the form element in a div with the class name

<

div class="myModal">

zgoforth

I replaced the alert message with $('#myModal').modal('show'); and nothing occurs once I click the Update Table button

zgoforth

And once I put it in the div, it disappears..

kthorngren

I replaced the alert message with $('#myModal').modal('show'); and nothing occurs once I click the Update Table button

Do you get any errors in the console?

Did you update the test case? if so what is the link?

Kevin

zgoforth

https://jsfiddle.net/y67124Ls/3/
It says : $(...).modal is not a function

kthorngren

Did you load bootstrap.js? You need the bootstrap.js to use the Bootstrap API's.

Kevin

zgoforth

Yes, If you look at the top of the HTML block, you will see all of the java and css files I loaded.

kthorngren

I don't see bootstrap.js. Please load bootstrap.js to see if it fixes your issue.

Kevin

zgoforth

Very nice.

zgoforth

It posts it in the upperleft of the screen, how can I fix the CSS for it to be positioned in the center.

kthorngren

See if the Bootstrap Modal docs help you position the modal.

Kevin

zgoforth

@kthorngren just figured it out before you commented that. Thank you. Sorry for the cross posts. One last thing. When it opens, I cant close it without hitting submit on the form. Not even the escape button works.

zgoforth

Ive come across some videos where they edit it through html div elements. This is the last way I would want to edit it. Is it easier with more jQuery? Why doesn't this work

text: 'Update Table',
    action: function (e, dt, node, config){
        $('#myModal').modal('toggle');
        }
    }

as opposed to $('#myModal').modal('show');

kthorngren

Ive come across some videos where they edit it through html div elements. This is the last way I would want to edit it. Is it easier with more jQuery?

I don't understand what you mean. However this sounds more like a Bootstrap Modal question which you will get better support on Stack Overflow.

Why doesn't this work

I don't know. Again this is a Bootstrap question.

Kevin

zgoforth

@kthorngren Just made a post on there, thnak you. But now my form doesn't work wit the dropdowns or anything in the modal its so annoying 0.o