This topic contains 11 replies, has 2 voices, and was last updated by Jai Jai 11 months ago.

Ajax Modal Inside Datatable Button


  • Thavo
    Participant

    Posts: 12
    Member Reply #13648

    Hello,

    How do I use ajax modal inside datatable?
    I’m using remote datatable.

    Best regards,

    Jai
    Jai
    Keymaster

    Posts: 2700
    Support Staff Reply #13659

    Hi ­čÖé

    In define columns option, there is template callback.
    You can modify the column in the datatable to add the button with modal.

    In all our demo datatable, we have column template with some custom buttons.

    Thanks


    Thavo
    Participant

    Posts: 12
    Member Reply #13666

    Yes I know, I’m currently using datatable column template, I want to know how to call remote modal.

    I want to click in edit button and open a remote modal, can you help me with that?

    Jai
    Jai
    Keymaster

    Posts: 2700
    Support Staff Reply #13678

    Hi ­čÖé

    What response content that will return from remote? some json text format?

    Thanks


    Thavo
    Participant

    Posts: 12
    Member Reply #13683

    The content will be returned in html inside Modal content.

    Jai
    Jai
    Keymaster

    Posts: 2700
    Support Staff Reply #13697

    Hi ­čÖé

    Here is full code I tested on;

    For column definition

    {
        field: 'Modal',
        title: 'Modal',
        sortable: false,
        template: function(row, index, datatable) {
          var modal = '\n' +
              '<!--begin::Modal-->\n' +
              '<div class="modal fade" id="m_modal_' + index + '" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">\n' +
              '  <div class="modal-dialog" role="document">\n' +
              '    <div class="modal-content">\n' +
              '      <div class="modal-header">\n' +
              '        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>\n' +
              '        <button type="button" class="close" data-dismiss="modal" aria-label="Close">\n' +
              '          <span aria-hidden="true">&times;</span>\n' +
              '        </button>\n' +
              '      </div>\n' +
              '      <div class="modal-body">\n' +
              '       <p>' + row.Notes + '\n' +
              '      </div>\n' +
              '    </div>\n' +
              '  </div>\n' +
              '</div>\n' +
              '<!--end::Modal-->\n';
          return modal + '\
    <a href="#" data-toggle="modal" data-target="#m_modal_' + index + '" class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill" title="Delete">\
     <i class="la la-trash"></i>\
    </a>\
    ';
        },
      }

     

    After datatable init, need to init modal programmatically, since the datatable template is rendered after ajax call;

    // reinitialize modal after datatable is init
    datatable.on('m-datatable--on-init', function(e) {
      datatable.find('.modal').on('hidden.bs.modal', function(e) {
        // modal backdrop issue wont removed after modal closed
        $('.modal-backdrop').remove();
      });
      datatable.find('[data-toggle="modal"]').click(function() {
        // trigger modal open on click
        $(this).modal();
      });
    });

     

    Thanks


    Thavo
    Participant

    Posts: 12
    Member Reply #13784

    Thanks for help!


    Thavo
    Participant

    Posts: 12
    Member Reply #13802

    Hello again,

    How do I submit form inside this modal?
    I tried:

    $('form').submit(function(e){
    console.log("teste");
    e.preventDefault();
    });

    However the page refresh.
    What am I doing wrong?


    Thavo
    Participant

    Posts: 12
    Member Reply #13803

    Anoter question : Jquery Validate Inside Modal Datatable

    How should I apply jquery validate inside datatable modal?

     

    Jai
    Jai
    Keymaster

    Posts: 2700
    Support Staff Reply #13845

    Hi ­čÖé

    Can you do check, does $(‘form’) selector should have a proper form object?

    Thanks


    Thavo
    Participant

    Posts: 12
    Member Reply #13924

    Jai
    Jai
    Keymaster

    Posts: 2700
    Support Staff Reply #13982

    Hi ­čÖé

    Can you try to add delegate event listener like this? On initialization, your form in modal may don’t exist yet.

    $(‘document’).on(‘submit’, ‘form’, function(e){

    console.log(“teste”);

    e.preventDefault();

    });

    Thanks

You must be logged in to reply to this topic.