I'm unable to append a certain div to a modal when pulling in data using pnp and JavaScript.

The whole process explained:
Function DomyApiCalls - WORKS (Pulls in all the boxes with the titles)
Function filtering - WORKS (Filters the names in alphabetical order) enter image description here

Function getModal - Doesn't work (I want it when a user clicks on a box, that the modal shows and just appends all the filesHtml to the .Modalbody class.


    var current_title = $(document).attr('title'); //CURRENT_TITLE is supposed to be the "FolderName".

    if(current_title == 'Acuvue') {

function DoMyApiCalls(elementId) {
    url:  "/bdm/business-development/_api/web/lists/GetByTitle('CompletedSubmissionTiles')/Items?$select=EncodedAbsUrl,Title,Line1,Line2,Hyperlink,TargetWindow,DescriptionHTMLOption,Line1,TileOrder&$orderby=Title asc",
    type: "GET",
    headers: {
        "accept": "application/json; odata=verbose"
    success: function (data) {
        if (data.d.results) {
            var object = data.d.results;
            var Line1var;

            for(var i = 0; i < object.length; i++)
                if(object[i].Line1 != null) { // Covers 'undefined' as well
                    Line1var = "<div class='Line1'>" + object[i].Line1 + "</div>";
                } else {
                    Line1var = "";

                $('#' + elementId).append("<div class='col-md-4 box' data-toggle='modal' data-target='#modal"+object[i].TileOrder+"' id='TileBox"+object[i].TileOrder+"'><div id='titleBox' class='titleBox'><h1>" + object[i].Title + "</h1><div style='width:250px; height: 130px;background-color: white; border: 1px solid lightgrey;'><img style='width: auto; height: inherit; margin-left: auto; margin-right: auto; display: block;' src='" +  object[i].EncodedAbsUrl + "' alt='" + object[i].Title +"'/></div></div></div>");


function filtering(title) {
    var filter = "Name eq '" + title + "'";

        baseUrl: "/bdm/business-development/"

    $pnp.sp.web.folders.getByName('Completed Submissions').folders.filter(filter).expand("Files").get().then(function(data){    

function getModal(folderName) {

        baseUrl: "/bdm/business-development/Completed%20Submissions/"

    $pnp.sp.web.getFolderByServerRelativeUrl("/bdm/business-development/Completed%20Submissions/" + folderName).files.orderBy("Name").get().then(function(f) {

        var files = '';

        $.each(f, function(index, value){
            var filesHtml = "<div class='file'>" + 
                                "<a target='_blank' href='" + value.ServerRelativeUrl + "?web=1'><img src='//PublishingImages/wordThumbSmall.png'/></a>" + 
                                "<a target='_blank' href='" + value.ServerRelativeUrl + "?web=1'><p id='fileTitle'>" + value.Title + "</p></a>" + 

            files = files + filesHtml;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="modal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><div id="x">&times;</div></button>
                <h4 class="modal-title">

            <div class="modal-body">
                <div class="FT-main-category" style="margin-top:0px;">
                    <div class="FT-main-header ms-WPBody"><strong><span style="color: white;">Files</span></strong></div>
                    <div class="Modalbody">

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.