Placing pdf in modal bootstrap with pdfobject - incrementing files

Question

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>

Answer 1

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.