Javascript Html在appenTo之后被切断？_Javascript_Jquery_Html_Ajax

Javascript Html在appenTo之后被切断？

javascript jquery html ajax

Javascript Html在appenTo之后被切断？,javascript,jquery,html,ajax,Javascript,Jquery,Html,Ajax,我对编程和Javascript/JQuery比较新，因此请提供任何帮助。我正在为我们公司新的网络应用程序的地址经理工作。我正在使用WebApi进行一些AJAX调用，并在我的应用程序的位置管理器中为位置内部的每个“MailStop”填充数据。邮递站只是帮助某人在地址中找到一个位置 555 Cleveland Ave NW Apt. 3 mailstop => Upstairs, Kevin's Desk Canton,

我对编程和Javascript/JQuery比较新，因此请提供任何帮助。我正在为我们公司新的网络应用程序的地址经理工作。我正在使用WebApi进行一些AJAX调用，并在我的应用程序的位置管理器中为位置内部的每个“MailStop”填充数据。邮递站只是帮助某人在地址中找到一个位置

            555 Cleveland Ave NW
            Apt. 3
mailstop => Upstairs, Kevin's Desk
            Canton, Ohio 44718

因此，在每个位置，您可以根据需要设置尽可能多的邮件站。尽管如此，客户很少使用超过几个

我拥有解决这个问题所需的一切，但当我使用$.appendTo（）时，出现了一些问题

正如您从上面看到的，元素被正确地附加，但它们没有显示。在我的代码中，我试图使用.scrollHeight来增加面板的高度，但无论插入多少mailStop元素，.scrollHeight始终是32px。我需要找到一种方法来增加面板的每一个邮件停止约100像素。下面是我的代码

function getAjax(url) {
    return $.ajax({
        url: url
    });
}

function displayResults(data, addTo) {

    $.each(data, function (k, v) {
        $('<div class="mailStops">' +
            `<input type="text" class="form-control" readonly value="${v.MailStop1}" />` +
            `<input type="text" class="form-control" readonly value="${v.MailStop2}" />` +
            `<button class="btn btn-danger btn-block DeleteMailStop" value="${v.MailStopID}">Delete</button>` +
            '</div >').appendTo(addTo);
    });

}

var acc = document.getElementsByClassName("btnMailStop");
var i;


for (i = 0; i < acc.length; i++) {

    acc[i].onclick = function () {

        var LocId = this.value;
        this.classList.toggle("active");
        //var panel = $("#MailStopPanel" + LocId);
        var panel = document.getElementById("MailStopPanel" + LocId);
        if (panel.style.maxHeight != "0px") {
            //if panel is open remove elements and close it
            var removeStops = document.querySelectorAll(".mailStops");

            $.each(removeStops, function (k, element) {
                panel.removeChild(element);
            })
            panel.style.maxHeight = "0px";

        }
        else {
            //if panel is closed get AJAX data and append it to the panel
            var uri = '/api/MailStop/' + LocId;

            var promise = getAjax(uri);

            promise.then(data => displayResults(data, panel));

            //Need to increase the panel height and window height enough for all elements to be seen
            panel.style.maxHeight = panel.scrollHeight + "px";
        }
    };
}

函数getAjax（url）{ 返回$.ajax({ url:url }); } 函数显示结果（数据，添加到）{ $。每个（数据、函数（k、v）{ $('' + `` + `` + `删除`+ ''）。附录（addTo）； }); } var acc=document.getElementsByClassName（“btnMailStop”）； var i；对于（i=0；idisplayResults（数据，面板））； //需要增加面板高度和窗口高度，使所有元素都能被看到 panel.style.maxHeight=panel.scrollHeight+“px”； } }; }

考虑使用高度属性而不是滚动高度，也考虑让高度由内容控制，使高度为“初始”或“自动”，可能是最大高度或最小高度属性。

在一般实践中，向div添加内容并修改其高度通常是一个坏主意，除非您可以精确计算每个事物的像素数，并且每个事物都有一个非常精确的高度。

考虑使用height属性而不是scrollHeight，考虑让高度由内容控制，使高度为“初始”或“自动”，可能是最大高度或最小高度属性。

在一般实践中，向div添加内容并修改其高度通常是一个坏主意，除非您可以精确计算每个东西的像素数，并且每个东西都有一个非常精确的高度。

只需要在此处移动一些东西。感谢Felipe Valdes让齿轮转动，让我更接近解决方案。下面是更新的Javascript

function getAjax(url) {
    return $.ajax({
        url: url
    });
}

function displayResults(data, addTo, panelID) {

    if (data.length < 1) {
        $('#MailStopPanel' + panelID).css('height', 35 + "px");
    }
    else {
        $('#MailStopPanel' + panelID).css('height', (data.length * 130) + "px");

        $.each(data, function (k, v) {
            $('<div class="mailStops">' +
                `<input type="text" class="form-control" readonly value="${v.MailStop1}" />` +
                `<input type="text" class="form-control" readonly value="${v.MailStop2}" />` +
                `<button class="btn btn-danger btn-block DeleteMailStop" value="${v.MailStopID}">Delete</button>` +
                '</div >').appendTo(addTo);
        });
    }
}

var acc = document.getElementsByClassName("btnMailStop");
var i;


for (i = 0; i < acc.length; i++) {

    acc[i].onclick = function () {

        var LocId = this.value;
        this.classList.toggle("active");
        //var panel = $("#MailStopPanel" + LocId);
        var panel = document.getElementById("MailStopPanel" + LocId);
        if (panel.style.height != "0px") {
            //if panel is open remove elements and close it
            var removeStops = document.querySelectorAll(".mailStops");

            $.each(removeStops, function (k, element) {
                panel.removeChild(element);
            })
            panel.style.height = "0px";

        }
        else {
            //if panel is closed get AJAX data and append it to the panel
            var uri = '/api/MailStop/' + LocId;

            var promise = getAjax(uri);

            promise.then(data => displayResults(data, panel, LocId));
        }
    };
}

函数getAjax（url）{ 返回$.ajax({ url:url }); } 函数显示结果（数据、添加到、面板ID）{ 如果（数据长度<1）{ $（'MailStopPanel'+panelID）.css（'height'，35+“px”）； } 否则{ $（'#MailStopPanel'+panelID）.css（'height'，（data.length*130）+“px”）； $。每个（数据、函数（k、v）{ $('' + `` + `` + `删除`+ ''）。附录（addTo）； }); } } var acc=document.getElementsByClassName（“btnMailStop”）； var i；对于（i=0；idisplayResults（数据、面板、LocId））； } }; }

一些东西需要搬过来。感谢Felipe Valdes让齿轮转动，让我更接近解决方案。下面是更新的Javascript

function getAjax(url) {
    return $.ajax({
        url: url
    });
}

function displayResults(data, addTo, panelID) {

    if (data.length < 1) {
        $('#MailStopPanel' + panelID).css('height', 35 + "px");
    }
    else {
        $('#MailStopPanel' + panelID).css('height', (data.length * 130) + "px");

        $.each(data, function (k, v) {
            $('<div class="mailStops">' +
                `<input type="text" class="form-control" readonly value="${v.MailStop1}" />` +
                `<input type="text" class="form-control" readonly value="${v.MailStop2}" />` +
                `<button class="btn btn-danger btn-block DeleteMailStop" value="${v.MailStopID}">Delete</button>` +
                '</div >').appendTo(addTo);
        });
    }
}

var acc = document.getElementsByClassName("btnMailStop");
var i;


for (i = 0; i < acc.length; i++) {

    acc[i].onclick = function () {

        var LocId = this.value;
        this.classList.toggle("active");
        //var panel = $("#MailStopPanel" + LocId);
        var panel = document.getElementById("MailStopPanel" + LocId);
        if (panel.style.height != "0px") {
            //if panel is open remove elements and close it
            var removeStops = document.querySelectorAll(".mailStops");

            $.each(removeStops, function (k, element) {
                panel.removeChild(element);
            })
            panel.style.height = "0px";

        }
        else {
            //if panel is closed get AJAX data and append it to the panel
            var uri = '/api/MailStop/' + LocId;

            var promise = getAjax(uri);

            promise.then(data => displayResults(data, panel, LocId));
        }
    };
}