0

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.

$(document).ready(function(){
    DoMyApiCalls("boxWrap");

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

    if(current_title == 'Acuvue') {
            getModal("Acuvue");
    }
});

function DoMyApiCalls(elementId) {
$.ajax({
    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>");

                filtering(object[i].Title);     
              }     
          }
    }                                   
  });
};

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

    $pnp.setup({
        baseUrl: "/bdm/business-development/"
    });

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

function getModal(folderName) {

  $pnp.setup({
        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>" + 
                            "</div>";

            files = files + filesHtml;
        });
        $(".Modalbody").append(files);
    });
}
<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">

                </h4>
            </div>
            <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>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.