Question

在使用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>

JS

$(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的高度？

Answer 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;
            }
        }
    });

Answer 2

我通过在加载JS文件后包含以下代码段解决了我的问题。

$(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。没有其他浏览器经过测试。一旦找到跨浏览器解决方案，我将更新此帖子。

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

2 个答案: