[英]auto resize div after ajax content call completes
我有一個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);
}
})})
通過“完成后”功能兩次單擊來贊嘆它。 如果有更好/更合法的方法,請張貼它。我更喜歡最佳實踐。
但是這是我所做的
$(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.