Question

我正在提交带有ajax的表单并打开带有响应数据的Colorbox：

$("#submitB").click(function () {
    $.post("/previewproposal", $("#proposal-form").serialize(), function(data){$.colorbox({html:data});}, "html");
});

渲染的html是这样的：

<script type="text/javascript">
    $(document).ready(function(){

        function plotData()
        {
            var dataArray = ...;
            var options = ...;

            $.plot($("#placeholder"), dataArray, options);
        }

        plotData();
    });
</script>

<div id="placeholder" style="float:left;margin:0;font-size:8pt;width:540px;height:180px;"></div>

动态生成的div之一是Flot plot占位符。我目前收到以下错误：

uncaught exception: Invalid dimensions for plot, width = null, height = null

“绘图”绘图功能需要绘图占位符div的宽度和高度才能工作。所以我认为我的绘图占位符div在绑定/调用绘图函数时没有加载到DOM中？经过大量的谷歌搜索并找到与此类似的问题，我找不到如何使这项工作的例子。我该如何排除故障？提前谢谢。

Answer 1

你需要使你的ajax同步，但是使用包装器$ .post（）是不可能的。所以改成它：

$.ajax({
  type: "POST",
  async:false,
  url: "/previewproposal",
  data: $("#proposal-form").serialize(),
  success: function(data){
         $.colorbox({html:data});
  },
  dataType: 'html'
});

//you can call plotData() here...

在调用js函数之前，如何确保将动态生成的div加载到DOM中？

1 个答案: