[英]auto resize div after ajax content call completes
I have an api call that grabs data just fine. 我有一个api调用,可以很好地获取数据。 Its setup to use a button to open up a collapsible div.
它的设置使用一个按钮来打开一个可折叠的div。 If you have it open already, you'll see the first line or 2 come up once the data is fetched, and you have to close/reopen the div to see all the data.
如果已将其打开,则在提取数据后会看到第一行或第二行,并且必须关闭/重新打开div才能查看所有数据。 been stuck on this for a bit, tried a bunch of stuff already.
被卡住了一点,已经尝试了很多东西。 heres the JS
继承人的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);
}
})})
cheezed it with clicking it twice through an after completion function. 通过“完成后”功能两次单击来赞叹它。 if there is a better/more legit way of doing this, please post it..I prefer best practices.
如果有更好/更合法的方法,请张贴它。我更喜欢最佳实践。
but heres what i did 但是这是我所做的
$(document).ready(function() { $(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";
}
});
}
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();
}
})})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.