时间戳

首页 > 解决方案 > ajax 内容调用完成后自动调整 div 大小

javascript - ajax 内容调用完成后自动调整 div 大小

问题描述

我有一个 api 调用可以很好地抓取数据。它的设置是使用一个按钮来打开一个可折叠的 div。如果您已经打开它，一旦获取数据，您将看到第一行或第二行出现，您必须关闭/重新打开 div 才能查看所有数据。被卡住了一段时间，已经尝试了很多东西。继承人的JS

$(document).ready(function() {

function myFunction(val) {}
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var hidden_content = this.nextElementSibling;
        if (hidden_content.style.maxHeight) {
            hidden_content.style.maxHeight = null;
        } else {
            hidden_content.style.maxHeight = hidden_content.scrollHeight + "px";
        }
    });
}
document.getElementById('collapsible').click();
$.ajax({
    type:"GET",
    url:"pages/splunk_bf_data",
    dataType:"json",
    success:function(data){
        var html = '<p>' + data + '</p>'
        $('.data-container').html(html);
    }
})})

标签： javascriptajax

解决方案

通过完成后功能单击它两次来对它进行操作。如果有更好/更合法的方法，请发布。我更喜欢最佳实践。

但这是我所做的

$(文档).ready(函数() {

function myFunction(val) {}
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var hidden_content = this.nextElementSibling;
        if (hidden_content.style.maxHeight) {
            hidden_content.style.maxHeight = null;
        } else {
            hidden_content.style.maxHeight = hidden_content.scrollHeight + "px";
        }
    });
}

function changeSizeByClicking() {
    document.getElementById('collapsible2').click();
    document.getElementById('collapsible2').click();
}

document.getElementById('collapsible').click();
$.ajax({
    type:"GET",
    url:"pages/splunk_bf_data",
    dataType:"json",
    beforeSend:function(){
        var html = '<p>' + 'Fetching data from Splunk..' + '<br>' + 'please wait...'+ '</p>'
        $('.data-container').html(html);
       },
    success:function(data){
        var html = '<p>' + data + '</p>'
        $('.data-container').html(html);
    },
    complete:function(data){
        changeSizeByClicking();
    }
})})

推荐阅读