Put HTML Form In Bootstrap 4 Modal Inside DataTable

Put HTML Form In Bootstrap 4 Modal Inside DataTable

zgoforthzgoforth Posts: 493Questions: 98Answers: 2
edited September 2020 in Free community support

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/

Replies

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

    @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/

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

    @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.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    edited September 2020

    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

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

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

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    Your alert is missing a closing bracket.

    (alert( 'Button activated' );

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

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

    @tangerine I have.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

    @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

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

    @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/

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    edited September 2020

    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

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

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

    <

    div class="myModal">

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

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

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

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

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

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

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

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

    Kevin

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

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

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

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

    Kevin

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

    Very nice.

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

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

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

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

    Kevin

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

    @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.

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2
    edited September 2020

    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');

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

    @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

This discussion has been closed.