jQuery：在 .getScript 调用中加载所有 AJAX 调用后调整 DIV 的大小答案

【问题标题】：jQuery: resize DIV after all AJAX calls are loaded within a .getScript calljQuery：在 .getScript 调用中加载所有 AJAX 调用后调整 DIV 的大小
【发布时间】：2014-07-21 17:59:35
【问题描述】：

在使用 jQuery 加载所有内容后，我无法调整 DIV 的大小。我的 HTML 页面如下：

html

    <div id="limit" style="position: relative; overflow: hidden;">
        <div class="contentpanel>
                //Data from global.js is inserted here
                <div id="display_visitor_graph"></div>
        </div>
    </div>

$(document).ready(function() {
                $.getScript("controller/ucp/global.js>", function() {
                     var height = $("#limit").height();
                     $(".contentpanel").css('height',height);
                }); 
           });

global.js 中的一个 AJAX 调用示例

function loadGraphData(startDate, endDate)
{
    $.getJSON("controller.php",
    {   
        type: "monitor",
        command: "graph",
        start: startDate.format("{yyyy}-{MM}-{dd}"),
        end: endDate.format("{yyyy}-{MM}-{dd}")     
    }, 
    function(data)
    {       
        Morris.Area(
        {
            element: "display_visitor_graph",
            data: data.labels,
            xkey: "date",
            ykeys: ["total", "unique"],
            labels: ["Views", "Visitors"],
            gridTextColor: "#151515",
            gridTextSize: "12",
            gridTextFamily: "'Open Sans', HelveticaNeue, Helvetica, Arial",
            hideHover: true,
            pointSize: 3,
            parseTime: true,
            behaveLikeLine: true,
            resize: true,
            smooth: false,              
            lineColors: ["#2A6184", "#472A53"],
            fillOpacity: 0.65
        });
    });     
};
loadGraphData(startDate, endDate);

现在 global.js 文件包含大约 10 个 .getJSON AJAX 调用，用于生成不同类型的数据来填充 .contentpanel 中的图形、表格、字段等。

在当前代码中，var height 是尚未处理 10 个 AJAX 调用时的高度，一旦从 global.js 中的 AJAX 调用加载内容，就会导致容器溢出。一旦执行了 global.js 中的所有 AJAX 调用，如何设置 .contentpanel 的高度？

【问题讨论】：

您是否尝试将高度设置为auto？
如何（或在何处）将接收到的数据插入.contentpanel？
我尝试将高度设置为自动，但没有成功。当我 console.log var 高度时，它会在数据尚未插入 .contentpanel 时给出高度。我需要在加载和插入数据后获取高度。 @kmsdev 我在 .contentpanel 中有 HTML 标记，但是数据被提取并插入到 global.js 文件中。想象一个获取数据的 getJSON 调用，然后在 .contentpanel 中填充一个用 HTML 标记的数据表或图表。
问题是你的ajax调用太多，不知道什么时候可以设置高度。检查我的答案并告诉我它是否有效:)

标签： jquery ajax height

【解决方案1】：

我认为这个解决方案应该可行：将计数器设置为全局变量。在每个 ajax 调用中，递增计数器。在每个响应中，减少它。一个简单的方法：

var ajaxcounter = 0;

$(document)
    .ajaxStart(function(){
        if( ajaxcounter !== null ) ajaxcounter++;
    })
    .ajaxStop(function(){
        if( ajaxcounter !== null ){
            ajaxcounter--;
            if( ajaxcounter == 0 ){
                // do stuff
                ajaxcounter = null;
            }
        }
    });

【讨论】：

我看到了这种方法的逻辑，但是，有没有更实际的解决方案来解决这个问题或者这是唯一的方法？
据我了解，您正在通过 ajax 加载数据。那么，您如何知道何时加载所需的数据（.contentpanel）？我的意思是，当您发送 ajax 调用时，它们是有顺序的，但接收到的数据是无序的。你不应该有跨浏览器的问题。这里没有意义
另一种方法是在加载 .contentpanel 数据的 ajax 函数中做你的事情

【解决方案2】：

我在加载 JS 文件后通过包含以下 sn-p 解决了我的问题。

$(document).ajaxStop(function()
{
    var height = $("#limit").height();
    $(".contentpanel").css("height", height);
    $(".contentpanel").css("background-color", "#e4e7ea");
});

通过测量 .ajaxStop 之后的高度，我能够得到必要的高度。但是，出于某种原因，我还必须重新分配 DIV 的背景颜色以使其完全正常工作。

全新代码

<script>
$(document).ready(function()
{
    $.getScript("controller/ucp/js/global.js");
});

$(document).ajaxStop(function()
{
    var height = $("#limit").height();
    $(".contentpanel").css("height", height);
    $(".contentpanel").css("background-color", "#e4e7ea");
});
</script>

编辑/注释 看来这适用于 Firefox 29.0 Ubuntu，但不适用于 Chromium 34.0.1847.116 Ubuntu。没有其他浏览器经过测试。找到跨浏览器解决方案后，我会更新这篇文章。

【讨论】：