Динамическое добавление строки к определенному модальному - PullRequest
Новая
       20

Динамическое добавление строки к определенному модальному

0 голосов
/ 25 апреля 2019

У меня есть несколько категорий, которые размещены в их собственных элементах div.При нажатии на элемент div открывается модальное окно, и Я хочу сделать так, чтобы имя категории также отображалось в верхней части модального окна. Например, нажатие на элемент «Животные» открывает модальное окно и слово «Животные».появляется в модальном.

В настоящее время я добавляю заголовок категории к div модального заголовка, но я вижу каждый заголовок категории в строке вместо правого - добавление находится внутрицикл, который, как я подозреваю, как-то связан с этим, но добавление добавления вне цикла приводит к тому, что div категории не загружается.

Фрагмент JS: 

let _library,
    _categories;

export default class {
    constructor() {
        this.callRESTAPI();
    }

    callRESTAPI(){
        axios.all([
            axios.get([url] + "/anl_la/_api/web/lists/getByTitle('Categories')/items?$select=Title,Description,Courses/Title,SortOrder&$expand=Courses&$orderby=Title&$top=1000",
            {
                method: "GET",
                credentials: "include",
                mode: "no-cors",
                headers: {
                    "Accept": "application/json; odata=verbose"
                }
            })
       // irrelevant code
        ]).then(axios.spread((cat, lib, admn) => {
            _categories = cat.data.d.results;
            _library = lib.data.d.results;

            this.loadCategories();
            this.loadCourses();
        })).catch(error => {
            console.log(error);
        });
    }


getCategories(){ 
        return _categories;
    }

    loadCategories(){
        let categs = _categories

        let htmlElems = "";
            for (var i = 0; i < categs.length; i++) {
                htmlElems += "<div class='cat-box cat-num-" + i + "'data-target='#modal-id' data-toggle='modal'>" + categs[i].Title + "</div>";
                $(".modal-title").append(categs[i].Title); // ---------- //
            }

            let container = document.querySelector("div.top-training");
            container.innerHTML = htmlElems;
            console.log(container);
    }

    loadCourses(){ // Training Library

        let crs = _library
            .map(x => {
                return {
                 "Description": x.Description,
                 "Title": x.Title
                }
            }).sort();
            console.log(JSON.stringify(crs))

        this.populateCategory(crs, "div.top-training");
    }


populateCategory(arrObj, parentTarget){
        arrObj = arrObj.filter((v, p) => arrObj.indexOf(v) == p);

        $.each(arrObj, function(idx, val) {

                let targetDiv = $(parentTarget).hasClass(".cat-box"),
                    desc = _categories
                    .filter(x => {
                        return x.Description 
                    })

            let modalTrigger = $('<div />', {
                'class': '.cat-box',
                'data-category': val.Category,
                'data-target': '#modal-id',
                'data-toggle': 'modal',
                'text': val
            });

            targetDiv.append(modalTrigger);

            $.each(desc, function(idx, val) {
                $(".category-desc").append("<p>" + val.Description + "</p>")
            }) // -------------- not working either

        });
    }

index.js: 

import AllCoursesComponent from './SiteAssets/scripts/allCourses';

let allComp = new AllCoursesComponent();

$(document).on("click", '.cat-box', function(val) {
    console.log('.cat-box clicked')
    let cat  = $(this).data('category'),
        desc = $(this).find("span").last().text();

    $(".training-titles-ul").empty();
    let titles = allComp.getPayload().filter(x => x.Title === cat);
});
...