Replies

• allan Posts: 63,531Questions: 1Answers: 10,475 Site admin

  November 2017

  I'm reasonably sure that its an issue with the id of the modal. If that code runs, you'll have multiple elements with the same id (id="admNotesModal") which is not valid HTML. The browser will "correct" that by simply selecting the first one, which is what you are seeing.

  One option would be to have a simple counter that gets incremented each time the renderer runs and use that in the id, so it is always unique.

  Another option would be to have the modal external to the renderer and have an event handler that populates it with the required content. Personally I prefer that option as I think it will make a smaller page.

  Allan
• gcac Posts: 21Questions: 1Answers: 0

  December 2017

  Allan, thanks for the quick reply.

  That makes perfect sense. You'll have to forgive me, I'm not as adept in JS as I'd like. Could you provide some reference links that I can research or examples? I think I can get it if you point me in the right direction.

  Thanks!
  Nate
• gcac Posts: 21Questions: 1Answers: 0

  December 2017

  I got it working, and I think I did the first way. I'd still like any guidance you can throw my way on the second method. Heres what I did:

  Outside of the main $(document).ready(function() { :

  var counter; counter = 0;
  

  Then in my colum definitions:

             {
                  data: "requests.admin_notes",
                  defaultContent: '',
                  render: function (  data, type, val, meta ) {
  
                      if ( data != null && data != '') {
                          counter++;
                          return '<center><button type="button" onclick="counter++" class="btn btn-danger btn-circle" data-toggle="modal" data-target="#admNotesModal'+counter+'">'
                          +'<i class="fa fa-warning"></i></button></center>'
                          +'<div class="modal fade" id="admNotesModal'+counter+'" tabindex="-1" role="dialog" aria-labelledby="Admin Notes" aria-hidden="true">'
                              +'<div class="modal-dialog">'
                           +'<div class="modal-content">'
                           +'<div class="modal-header">'
                                  +'<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>'
                                  +'<h4 class="modal-title" id="myModalLabel">Admin Notes</h4>'
                              +'</div>'
                              +'<div class="modal-body">'
                              +data+'</div>';
                      }
                      else {
                              return;
                      }
                  }
  

  It seems to work but like you said generates a larger page..
• allan Posts: 63,531Questions: 1Answers: 10,475 Site admin

  December 2017

  Yup - that looks good for that method - nice one.

  So for the second method you would simply have the renderer return what you want to display in the table (i.e. the button). Remove the onclick DOM0 event handler and instead use something like:

  $('#myTable').on( 'click', 'button.btn', function () {
    var rowData = table.row( $(this).closest('tr') ).data();
  
    ...
  } };
  

  Then use rowData to write the data into an existing modal element and finally use the Bootstrap modal API to display the modal.

  Allan