我正在试图使模式引导中的pdf显示。 我在我的应用程序中使用数据表，并且我的表的头部由文档标题，类别，日期和文档视图组成。 在“查看文档”列的主体中，我有一个按钮，当用户单击某个模式时会打开并在其中打开pdf。
我的表格中的每一行都有一个不同的pdf文档，这里是我的问题，我无法将pdf指向各个模式中的每一行。 在任何一行打开的pdf总是我表格中添加的最后一个文档。
在那个应用程序中，我使用firebase，pdfobject插件为模块添加pdf和bootstrap。
我的代码如下：
使用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>I'm trying to make pdf display in a modal bootstrap. I'm using datatables in my application, and the head of my table consists of Document Title, Category, Date, and Document View. In the body of the View Document column I have a button that when the user clicks a modal is opened and inside it the pdf is opened as well.
Each line in my table has a different pdf document and here is my problem, I am not able to put the pdf referring to each line in its respective modal. The pdf opened on any line is always being the last document added in my table.
In that application I'm using firebase, the pdfobject plugin to add the pdf and bootstrap for the modal.
My code is below:
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>最满意答案
您将文档嵌入for-loop中每行的单个模式中。 每次迭代之后，嵌入在模式中的以前的文档将被覆盖，从而导致最后一个文档成为唯一可见的文档。
在点击查看按钮时，应该使用嵌入式文档填充模式，而不是在加载时填充模式。 这可以通过将documento.arquivo作为数据属性添加到相应行的模式切换按钮来完成。
You are embedding the document inside a single modal for each row in the for-loop. After each iteration, the previous document that was embedded inside the modal is overwritten hence resulting in the last document being the only document visible.
Instead of populating the modal at load, you should populate the modal with the embedded document when the view button is clicked. This can be done by adding the documento.arquivo as a data attribute to the corresponding row's modal toggle button.
更多推荐
发布评论