pdfobjectでファイルをインクリメントするモーダルブートストラップにpdfを置く

私はモーダルブートストラップでpdfを表示しようとしています。私はアプリケーションでdatatablesを使用しています。私のテーブルの先頭はDocument Title、Category、Date、Document Viewから構成されています。ビュードキュメントの列の本文には、ユーザーがモーダルをクリックして開くとその中にpdfも開かれるボタンがあります。pdfobjectでファイルをインクリメントするモーダルブートストラップにpdfを置く

私のテーブルの各行には異なるpdfドキュメントがあり、ここに私の問題があります。それぞれの行を参照するpdfファイルはそれぞれのモーダルに入れることができません。任意の行に開いたpdfは、常に私のテーブルに追加された最後の文書です。

このアプリケーションでは、firebaseを使用しています.pdfobjectプラグインを使用して、pdfとブートストラップを追加します。

私のコードは以下の通りです：

Javascriptを：

<script type="text/javascript"> 
    var documentosRef = firebase.database().ref('documentos'); 

    function initFirebase(){ 

     function carregaDocumentos(){ 

      documentosRef.on('value', function(data){ 

       headertb = isAdmin ? "<th>Título</th><th>Data de Inclusão</th><th>Categoria</th><th>Editar</th><th>Excluir</th>" : "<th>Título</th><th>Data de Inclusão</th><th>Categoria</th><th>Visualizar</th>"; 

       $('#tableCustom thead tr').html(headertb); 


       $("#tableCustom").dataTable().fnDestroy(); 
       $('#tableCustom tbody').html(''); 

       for(var key in data.val()){ 

        documento = data.val()[key] 

        if(isAdmin){ 
         linha = "<tr>"+ 
            "<td>"+documento.titulo+"</td>"+ 
            "<td>"+documento.data_inicio+"</td>"+ 
            "<td>"+documento.categoria+"</td>"+ 
            "<td class='edit'><a href='documentos/"+key+"/edit'><i class='fa fa-edit'></i></a></td>"+ 
           "</tr>"; 
         $('#tableCustom tbody').append(linha); 
        } 
        else{ 

         linha = "<tr>"+ 
            "<td>"+documento.titulo+"</td>"+ 
            "<td>"+documento.data_inicio+"</td>"+ 
            "<td>"+documento.categoria+"</td>"+ 
            "<td class='view'><a data-toggle='modal' data-target='#myModal'><i class='fa fa-eye'></i></a></td>"+ 
           "</tr>"; 
         $('#tableCustom tbody').append(linha); 
         PDFObject.embed(documento.arquivo, ".modal-content"); 
        } 
       } 

       closeLoader(); 

       var table = $('#tableCustom').DataTable({ 
        "aaSorting": [[ 0, "asc" ]], 
        "oLanguage": { 
         "sUrl": "/datatable_pt.txt" 
        }, 
        "aoColumnDefs": [ 
         { "bSortable": true, "aTargets": [ 0 ] }, 
         { "bSearchable": true, "aTargets": [ 0, 1, 2 ] } 
        ] 
       }); 

       $("#select-categories").each(function (i) { 
        var select = $('<select><option value=""></option></select>') 
         .appendTo($(this).empty()) 
         .on('change', function() { 
          table.column([2]) 
           .search($(this).val()) 
           .draw(); 
         }); 

        table.column([2]).data().unique().sort().each(function (d, j) { 
         select.append('<option value="'+d+'">'+d+'</option>') 
        }); 
       }); 

      }); 

     } 

     carregaDocumentos(); 
    } 
</script>

HTML：

<div id="body"> 
     <header> 
      Documentos 
     </header> 
     <section> 

     <div class="modal fade" id="myModal" role="dialog"> 
      <div class="modal-dialog"> 
       <div class="modal-content"> 
       </div> 
      </div> 
     </div> 

     <table id="tableCustom"> 
      <div id="select-categories"></div> 
      <thead> 
       <tr> 

       </tr> 
      </thead> 
      <tbody> 
      <!--oddloop--> 

      <!--oddloop--> 
      </tbody> 
     </table> 
    </section> 
</div>

出典

2017-12-24 Denis Policarpo