title: Display PDF in popup
body: <p>I have searched for hours on a way to display a pdf on a modal window, I've seen the posts that have similar issue.
  I have made it to display a pdf on a modal window  <a href="https://i.stack.imgur.com/udjic.png" rel="nofollow noreferrer">as you can see in this picture</a></p>
  
  <p>My problem is, I have a list of users (datatable) <a href="https://i.stack.imgur.com/hs3tf.png" rel="nofollow noreferrer">picture2</a> where you can view the detail of a user and when you click on the "pdf" button, normally you should see the same modal as when you click on the button outside the datatable. I get this error on the web browser [picture3</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  
  
  
  
  
  
    // ------------------------------------  the datatables script, when clicking on the plus button, it shows more detail, about  -----------------------------------------------
  
  
    var table = $('#example').DataTable({
      "data": testdata.data,
      select: "single",
      "columns": [{
          "className": 'details-control',
          "orderable": false,
          "data": null,
          "defaultContent": '',
          "render": function() {
            return '&lt;i class="fa fa-plus-square" aria-hidden="true"&gt;&lt;/i&gt;';
          },
          width: "15px"
        },
        {
          "data": "name"
        },
        {
          "data": "position"
        },
        {
          "data": "office"
        },
        {
          "data": "salary"
        }
      ],
      "order": [
        [1, 'asc']
      ]
    });
  
    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function() {
      var tr = $(this).closest('tr');
      var tdi = tr.find("i.fa");
      var row = table.row(tr);
  
      if (row.child.isShown()) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
        tdi.first().removeClass('fa-minus-square');
        tdi.first().addClass('fa-plus-square');
      } else {
        // Open this row
        row.child(format(row.data())).show();
        tr.addClass('shown');
        tdi.first().removeClass('fa-plus-square');
        tdi.first().addClass('fa-minus-square');
      }
    });
  
    table.on("user-select", function(e, dt, type, cell, originalEvent) {
      if ($(cell.node()).hasClass("details-control")) {
        e.preventDefault();
      }
    });
  
  
  
  });
  
  
  
  
  
  
  function format(d) {
  
    return '&lt;div class="panel panel-primary"&gt;' +
      '&lt;div class="panel-heading"&gt;' +
      '&lt;h3 class="panel-title"&gt;Informations du candidat&lt;/h3&gt;' +
      '&lt;/div&gt;' +
      '&lt;div class="panel-body"&gt;' +
      '&lt;div class="row"&gt;' +
      '&lt;div class="col-md-3 col-lg-3 hidden-xs hidden-sm"&gt;' +
      '&lt;img class="img-circle" src="https://openclipart.org/download/211821/matt-icons_preferences-desktop-personal.svg?sz=100" alt="User Pic"&gt;' +
      '&lt;/div&gt;' +
      '&lt;div class="col-xs-2 col-sm-2 hidden-md hidden-lg"&gt;' +
      '&lt;img class="img-circle" src="https://openclipart.org/download/211821/matt-icons_preferences-desktop-personal.svg?sz=50" alt="User Pic"&gt;' +
      '&lt;/div&gt;' +
  
      '&lt;div class=" col-md-9 col-lg-9 hidden-xs hidden-sm"&gt;' +
      '&lt;strong&gt;' + d.name + '&lt;/strong&gt;&lt;br&gt;' +
      '&lt;table class="table table-user-information"&gt;' +
      '&lt;tbody&gt;' +
      '&lt;tr&gt;' +
      '&lt;td&gt;Titre: &lt;/td&gt;' +
      '&lt;td&gt;' + d.position + '&lt;/td&gt;' +
      '&lt;/tr&gt;' +
      '&lt;tr&gt;' +
      '&lt;td&gt;Date de disponibilité:&lt;/td&gt;' +
      '&lt;td&gt;' + d.start_date + '&lt;/td&gt;' +
      '&lt;/tr&gt;&lt;tr&gt; &lt;td&gt;Salair souhaité:&lt;/td&gt;' +
      '&lt;td&gt;' + d.salary + '&lt;/td&gt;' +
      '&lt;/tr&gt;&lt;tr&gt;' +
      '&lt;td&gt;Addresse:&lt;/td&gt;&lt;td&gt;' + d.office + '&lt;/td&gt;' +
      '&lt;/tr&gt; &lt;/tbody&gt;&lt;/table&gt; &lt;/div&gt; &lt;/div&gt;&lt;/div&gt;' +
      '&lt;div class="panel-footer"&gt;' +
      '&lt;a class="btn btn-primary voir-pdf" title="Exemple de PDF dans un « modal »" href="files/test.pdf"&gt;PDF&lt;/a&gt;' +
      ' &lt;span class="pull-right"&gt;' +
      '&lt;button class="btn btn-sm btn-warning" type="button" data-toggle="tooltip"' +
      'data-original-title="Edit this user"&gt;&lt;i class="glyphicon glyphicon-edit"&gt;&lt;/i&gt;&lt;/button&gt;' +
      '&lt;button class="btn btn-sm btn-danger" type="button"' +
      'data-toggle="tooltip" data-original-title="Remove this user"&gt;&lt;i class="glyphicon glyphicon-remove"&gt;&lt;/i&gt;&lt;/button&gt;' +
      '&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;';
  
    /* return '&lt;div class="card b-1 hover-shadow mb-20"&gt;' + 
         '&lt;div class="media card-body"&gt;' +
              '&lt;div class="media-left pr-12"&gt;' +
                  '&lt;img class="avatar avatar-xl no-radius" src="https://openclipart.org/download/211821/matt-icons_preferences-desktop-personal.svg" alt="..."&gt;&lt;/div&gt;' +
              '&lt;div class="media-body"&gt;' +
                  '&lt;div class="mb-2"&gt;' +
                      '&lt;span class="fs-20 pr-16"&gt;' + d.name +'&lt;/span&gt;'+
                 '&lt;/div&gt;' +
                  '&lt;small class="fs-16 fw-300 ls-1"&gt;'+ d.position +'&lt;/small&gt;'+
               '&lt;/div&gt;' +
              '&lt;div class="media-right text-right d-none d-md-block"&gt;' +
                  '&lt;p class="fs-14 text-fade mb-12"&gt;&lt;i class="fa fa-map-marker pr-1"&gt;&lt;/i&gt;' + d.office + '&lt;/p&gt;' +
                  '&lt;span class="text-fade"&gt;&lt;i class="fa fa-money pr-1"&gt;&lt;/i&gt;' + d.salary + '&lt;/span&gt;' +
              '&lt;/div&gt;' +
          '&lt;/div&gt;' +
          '&lt;footer class="card-footer flexbox align-items-center"&gt;' +
              '&lt;div&gt;' +
                  '&lt;strong&gt;Applied on:&lt;/strong&gt;'+
                  '&lt;span&gt;' + d.start_date +'&lt;/span&gt;' +
              '&lt;/div&gt;' +
              '&lt;div class="card-hover-show"&gt;' +
                  '&lt;a class="btn btn-xs fs-10 btn-bold btn-info" href="#"&gt;Download CV&lt;/a&gt;' +
                  '&lt;a class="btn btn-xs fs-10 btn-bold btn-primary" href="#" data-toggle="modal" data-target="#modal-contact"&gt;Contact&lt;/a&gt;' +
                  '&lt;a class="btn btn-xs fs-10 btn-bold btn-warning" href="#"&gt;Delete&lt;/a&gt;' +
              '&lt;/div&gt;' +
          '&lt;/footer&gt;' +
      '&lt;/div&gt;'; */
  
    // `d` is the original data object for the row
    /* return '&lt;table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;"&gt;' +
         '&lt;tr&gt;' +
             '&lt;td&gt;Nom et prénom:&lt;/td&gt;' +
             '&lt;td&gt;' + d.name + '&lt;/td&gt;' +
         '&lt;/tr&gt;' +
         '&lt;tr&gt;' +
             '&lt;td&gt;Extension number:&lt;/td&gt;' +
             '&lt;td&gt;' + d.extn + '&lt;/td&gt;' +
         '&lt;/tr&gt;' +
         '&lt;tr&gt;' +
             '&lt;td&gt;Extra info:&lt;/td&gt;' +
             '&lt;td&gt;And any further details here (images etc)...&lt;/td&gt;' +
         '&lt;/tr&gt;' +
     '&lt;/table&gt;';   */
  
  
  }
  
  var testdata = {
    "data": [{
        "name": "Tiger Nixon",
        "position": "System Architect",
        "salary": "$320,800",
        "start_date": "2011/04/25",
        "office": "Edinburgh",
        "extn": "5421"
      },
      {
        "name": "Garrett Winters",
        "position": "Accountant",
        "salary": "$170,750",
        "start_date": "2011/07/25",
        "office": "Tokyo",
        "extn": "8422"
      },
      {
        "name": "Ashton Cox",
        "position": "Junior Technical Author",
        "salary": "$86,000",
        "start_date": "2009/01/12",
        "office": "San Francisco",
        "extn": "1562"
      },
      {
        "name": "Cedric Kelly",
        "position": "Senior Javascript Developer",
        "salary": "$433,060",
        "start_date": "2012/03/29",
        "office": "Edinburgh",
        "extn": "6224"
      },
      {
        "name": "Airi Satou",
        "position": "Accountant",
        "salary": "$162,700",
        "start_date": "2008/11/28",
        "office": "Tokyo",
        "extn": "5407"
      },
      {
        "name": "Brielle Williamson",
        "position": "Integration Specialist",
        "salary": "$372,000",
        "start_date": "2012/12/02",
        "office": "New York",
        "extn": "4804"
      },
      {
        "name": "Herrod Chandler",
        "position": "Sales Assistant",
        "salary": "$137,500",
        "start_date": "2012/08/06",
        "office": "San Francisco",
        "extn": "9608"
      },
      {
        "name": "Rhona Davidson",
        "position": "Integration Specialist",
        "salary": "$327,900",
        "start_date": "2010/10/14",
        "office": "Tokyo",
        "extn": "6200"
      },
      {
        "name": "Colleen Hurst",
        "position": "Javascript Developer",
        "salary": "$205,500",
        "start_date": "2009/09/15",
        "office": "San Francisco",
        "extn": "2360"
      },
      {
        "name": "Caesar Vance",
        "position": "Pre-Sales Support",
        "salary": "$106,450",
        "start_date": "2011/12/12",
        "office": "New York",
        "extn": "8330"
      },
      {
        "name": "Doris Wilder",
        "position": "Sales Assistant",
        "salary": "$85,600",
        "start_date": "2010/09/20",
        "office": "Sidney",
        "extn": "3023"
      },
      {
        "name": "Angelica Ramos",
        "position": "Chief Executive Officer (CEO)",
        "salary": "$1,200,000",
        "start_date": "2009/10/09",
        "office": "London",
        "extn": "5797"
      },
      {
        "name": "Gavin Joyce",
        "position": "Developer",
        "salary": "$92,575",
        "start_date": "2010/12/22",
        "office": "Edinburgh",
        "extn": "8822"
      },
      {
        "name": "Jennifer Chang",
        "position": "Regional Director",
        "salary": "$357,650",
        "start_date": "2010/11/14",
        "office": "Singapore",
        "extn": "9239"
      },
      {
        "name": "Brenden Wagner",
        "position": "Software Engineer",
        "salary": "$206,850",
        "start_date": "2011/06/07",
        "office": "San Francisco",
        "extn": "1314"
      },
      {
        "name": "Fiona Green",
        "position": "Chief Operating Officer (COO)",
        "salary": "$850,000",
        "start_date": "2010/03/11",
        "office": "San Francisco",
        "extn": "2947"
      },
      {
        "name": "Shou Itou",
        "position": "Regional Marketing",
        "salary": "$163,000",
        "start_date": "2011/08/14",
        "office": "Tokyo",
        "extn": "8899"
      },
      {
        "name": "Michelle House",
        "position": "Integration Specialist",
        "salary": "$95,400",
        "start_date": "2011/06/02",
        "office": "Sidney",
        "extn": "2769"
      },
      {
        "name": "Suki Burks",
        "position": "Developer",
        "salary": "$114,500",
        "start_date": "2009/10/22",
        "office": "London",
        "extn": "6832"
      },
      {
        "name": "Prescott Bartlett",
        "position": "Technical Author",
        "salary": "$145,000",
        "start_date": "2011/05/07",
        "office": "London",
        "extn": "3606"
      },
      {
        "name": "Gavin Cortez",
        "position": "Team Leader",
        "salary": "$235,500",
        "start_date": "2008/10/26",
        "office": "San Francisco",
        "extn": "2860"
      },
      {
        "name": "Martena Mccray",
        "position": "Post-Sales support",
        "salary": "$324,050",
        "start_date": "2011/03/09",
        "office": "Edinburgh",
        "extn": "8240"
      },
      {
        "name": "Unity Butler",
        "position": "Marketing Designer",
        "salary": "$85,675",
        "start_date": "2009/12/09",
        "office": "San Francisco",
        "extn": "5384"
      },
      {
        "name": "Howard Hatfield",
        "position": "Office Manager",
        "salary": "$164,500",
        "start_date": "2008/12/16",
        "office": "San Francisco",
        "extn": "7031"
      },
      {
        "name": "Hope Fuentes",
        "position": "Secretary",
        "salary": "$109,850",
        "start_date": "2010/02/12",
        "office": "San Francisco",
        "extn": "6318"
      },
      {
        "name": "Vivian Harrell",
        "position": "Financial Controller",
        "salary": "$452,500",
        "start_date": "2009/02/14",
        "office": "San Francisco",
        "extn": "9422"
      },
      {
        "name": "Timothy Mooney",
        "position": "Office Manager",
        "salary": "$136,200",
        "start_date": "2008/12/11",
        "office": "London",
        "extn": "7580"
      },
      {
        "name": "Jackson Bradshaw",
        "position": "Director",
        "salary": "$645,750",
        "start_date": "2008/09/26",
        "office": "New York",
        "extn": "1042"
      },
      {
        "name": "Olivia Liang",
        "position": "Support Engineer",
        "salary": "$234,500",
        "start_date": "2011/02/03",
        "office": "Singapore",
        "extn": "2120"
      }
    ]
  };
  //  les informations de chaque candidat
  var panels = $('.user-infos');
  var panelsButton = $('.dropdown-user');
  panels.hide();
  
  //Click dropdown
  panelsButton.click(function() {
    //get data-for attribute
    var dataFor = $(this).attr('data-for');
    var idFor = $(dataFor);
  
    //current button
    var currentButton = $(this);
    idFor.slideToggle(400, function() {
      //Completed slidetoggle
      if (idFor.is(':visible')) {
        currentButton.html('&lt;i class="glyphicon glyphicon-chevron-up text-muted"&gt;&lt;/i&gt;');
      } else {
        currentButton.html('&lt;i class="glyphicon glyphicon-chevron-down text-muted"&gt;&lt;/i&gt;');
      }
    })
  });
  
  
  $('[data-toggle="tooltip"]').tooltip();
  
  $('button').click(function(e) {
    e.preventDefault();
    alert("This is a demo.\n :-)");
  });
  
  /*
   * Le plug-in PDF  script for viewing PDF File
   */
  (function(a) {
    a.twModalPDF = function(b) {
      defaults = {
        title: "PDF dans un « modal »",
        message: "Impossible d’ouvrir le document PDF",
        closeButton: true,
        scrollable: false
      };
      var b = a.extend({}, defaults, b);
      var c = (b.scrollable === true) ? 'style="max-height: 1020px;overflow-y: auto;"' : "";
      html = '&lt;div class="modal fade" id="oModalPDF"&gt;';
      html += '&lt;div class="modal-dialog modal-lg"&gt;';
      html += '&lt;div class="modal-content"&gt;';
      html += '&lt;div class="modal-header"&gt;';
      html += '&lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;';
      if (b.title.length &gt; 0) {
        html += '&lt;h4 class="modal-title"&gt;' + b.title + "&lt;/h4&gt;"
      }
      html += "&lt;/div&gt;";
      html += '&lt;div class="modal-body" ' + c + "&gt;";
      html += b.message;
      html += "&lt;/div&gt;";
      html += '&lt;div class="modal-footer"&gt;';
      if (b.closeButton === true) {
        html += '&lt;button type="button" class="btn btn-primary" data-dismiss="modal"&gt;Fermer&lt;/button&gt;'
      }
      html += "&lt;/div&gt;";
      html += "&lt;/div&gt;";
      html += "&lt;/div&gt;";
      html += "&lt;/div&gt;";
      a("body").prepend(html);
      a("#oModalPDF").modal().on("hidden.bs.modal", function() {
        a(this).remove()
      })
    }
  })(jQuery);
  
  
  $(function() {
    $('.voir-pdf').on('click', function() {
      var sUrl = $(this).attr('href');
      var sTitre = $(this).attr('title');
      var sIframe = '&lt;object type="application/pdf" data="' + sUrl + '" width="100%" height="500"&gt;Aucun support&lt;/object&gt;';
      $.twModalPDF({
        title: sTitre,
        message: sIframe,
        closeButton: true,
        scrollable: false
      });
      return false;
    });
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>td.details-control {
    text-align: center;
    color: forestgreen;
    cursor: pointer;
  }
  
  tr.shown td.details-control {
    text-align: center;
    color: red;
  }
  
  .user-row {
    margin-bottom: 14px;
  }
  
  .user-row:last-child {
    margin-bottom: 0;
  }
  
  .dropdown-user {
    margin: 13px 0;
    padding: 5px;
    height: 100%;
  }
  
  .dropdown-user:hover {
    cursor: pointer;
  }
  
  .table-user-information&gt;tbody&gt;tr {
    border-top: 1px solid rgb(221, 221, 221);
  }
  
  .table-user-information&gt;tbody&gt;tr:first-child {
    border-top: 0;
  }
  
  .table-user-information&gt;tbody&gt;tr&gt;td {
    border-top: 0;
  }
  
  body {
    background: #FCFCFC;
  }
  
  .pr-12 {
    padding-right: 12px !important;
  }
  
  .mb-20 {
    margin-bottom: 20px !important;
  }
  
  .b-1 {
    border: 1px solid #ebebeb !important;
  }
  
  .card {
    border: 0;
    border-radius: 0;
    margin-bottom: 30px;
    -webkit-transition: .5s;
    transition: .5s;
  }
  
  .card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: .25rem;
  }
  
  .media {
    padding: 16px 12px;
    -webkit-transition: background-color .2s linear;
    transition: background-color .2s linear;
  }
  
  .media {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  
  .card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem;
  }
  
  .media .avatar {
    flex-shrink: 0;
  }
  
  .no-radius {
    border-radius: 0 !important;
  }
  
  .avatar-xl {
    width: 64px;
    height: 64px;
    line-height: 64px;
    font-size: 1.25rem;
  }
  
  .avatar {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 100%;
    background-color: #f5f6f7;
    color: #8b95a5;
    text-transform: uppercase;
  }
  
  img {
    max-width: 100%;
  }
  
  img {
    vertical-align: middle;
    border-style: none;
  }
  
  .mb-2 {
    margin-bottom: .5rem!important;
  }
  
  .fs-20 {
    font-size: 20px !important;
  }
  
  .pr-16 {
    padding-right: 16px !important;
  }
  
  .ls-1 {
    letter-spacing: 1px !important;
  }
  
  .fw-300 {
    font-weight: 300 !important;
  }
  
  .fs-16 {
    font-size: 16px !important;
  }
  
  .media-body&gt;* {
    margin-bottom: 0;
  }
  
  small,
  time,
  .small {
    font-family: Roboto, sans-serif;
    font-weight: 400;
    font-size: 11px;
    color: #8b95a5;
  }
  
  .fs-14 {
    font-size: 14px !important;
  }
  
  .mb-12 {
    margin-bottom: 12px !important;
  }
  
  .text-fade {
    color: rgba(77, 82, 89, 0.7) !important;
  }
  
  .card-footer:last-child {
    border-radius: 0 0 calc(.25rem - 1px) calc(.25rem - 1px);
  }
  
  .card-footer {
    background-color: #fcfdfe;
    border-top: 1px solid rgba(77, 82, 89, 0.07);
    color: #8b95a5;
    padding: 10px 20px;
  }
  
  .flexbox {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
  }
  
  .align-items-center {
    -ms-flex-align: center!important;
    align-items: center!important;
  }
  
  .card-footer {
    padding: .75rem 1.25rem;
    background-color: rgba(0, 0, 0, .03);
    border-top: 1px solid rgba(0, 0, 0, .125);
  }
  
  .card-footer {
    background-color: #fcfdfe;
    border-top: 1px solid rgba(77, 82, 89, 0.07);
    color: #8b95a5;
    padding: 10px 20px
  }
  
  .card-footer&gt;*:last-child {
    margin-bottom: 0
  }
  
  .hover-shadow {
    -webkit-box-shadow: 0 0 35px rgba(0, 0, 0, 0.11);
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.11)
  }
  
  .fs-10 {
    font-size: 10px !important;
  }
  
  
  /* Style Modal Bootstrap 4 */
  
  .modal-content {
    background-color: #393633;
  }
  
  .modal-header {
    border: none;
    background-color: #393633;
    color: #fff;
    border-radius: 0;
  }
  
  .modal-footer {
    padding: 0;
    border: none;
  }
  
  .modal-footer .btn-primary {
    width: 100%;
    border-radius: 0;
    background-color: #393633;
    border-color: #333;
  }
  
  .modal-footer .btn-primary:hover {
    background-color: #000000;
  }
  
  .modal-body {
    padding: 0;
    background-color: #393633;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" type="text/css"&gt;
    &lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /&gt;
    &lt;link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" /&gt;
  
    
  
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;a class="btn btn-primary voir-pdf" title="Exemple de PDF dans un « modal »" href="http://www.pdf995.com/samples/pdf.pdf"&gt;PDF&lt;/a&gt;
  
  
    &lt;table width="100%" class="display" id="example" cellspacing="0"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;&lt;/th&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Position&lt;/th&gt;
          &lt;th&gt;Office&lt;/th&gt;
          &lt;th&gt;Salary&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tfoot&gt;
        &lt;tr&gt;
          &lt;th&gt;&lt;/th&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Position&lt;/th&gt;
          &lt;th&gt;Office&lt;/th&gt;
          &lt;th&gt;Salary&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/tfoot&gt;
    &lt;/table&gt;
   &lt;script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.datatables.net/select/1.2.1/js/dataTables.select.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
  
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"&gt;&lt;/script&gt;
    
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>]<a href="https://i.stack.imgur.com/P7RtD.png" rel="nofollow noreferrer">3</a> :</p>
  
  <blockquote>
    <p>Resource interpreted as Document but transferred with MIME type
    application/pdf</p>
  </blockquote>
  
  <p>and the pdf is displayed on another window</p>
  
  <p>I really don't know what I'm missing :(</p>