个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
26
4
在我整理的示例中，我需要:
将 HTML 模板添加到正文并呈现:
function addTicketAndRender(incomingTicket){
//For now, just touch the spinner, don't worry about the ticket.
var template = $('#tableauTemplate').html(),
filledTemplate = template.replace('{placeholder}','yes');
$('body').append( filledTemplate );}
我在 jsfiddle 中工作:
但是，当我将 HTML 和 JavaScript 组合到一个 htm 文件中时，我想要的可视化效果并没有在 Chrome、IE 或 Firefox 中呈现。
这是无法正常工作的 HTM 的完整源代码。任何人都可以看到明显错误的东西吗？我的标记和脚本在下方和/或此处:http://tableau.russellchristopher.org:81/rfc1.htm
<html>
<head>
<script type="text/javascript" src="http://public.tableausoftware.com/javascripts/api/viz_v1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<!-- template code follows -->
<script type="text/template" id="tableauTemplate">
<div class="tableauPlaceholder" id="tableauPlaceholder" style="width:654px; height:1469px;background-image: url('http://tableau.russellchristopher.org:81/Background.gif'); top: 0px; left: 0px; width: 100%; margin-left: 76px;">
<object class="tableauViz" width="654" height="1469">
<param name="host_url" value="http%3A%2F%2Fpublic.tableausoftware.com%2F"/>
<param name="site_root" value="" />
<param name="name" value="AnalyticsIncJavaScript/AnalyticsInc" />
<param name="tabs" value="no" />
<param name="toolbar" value="yes" />
<param name="static_image" value="tableau.russellchristopher.org:81/Background.gif"/>
<param name="animate_transition" value="yes" />
<param name="display_static_image" value="yes" />
<param name="display_spinner" value="{placeholder}" id="display_spinner" />
<param name="display_overlay" value="yes" />
<param name="display_count" value="yes" />
</object>
</div>
</script>
<!-- end of template -->
<body>
<script>
function addTicketAndRender(incomingTicket){
// grab tableau template code and replace ticket placeholder with incomingTicket from $.post
console.log("Add and Render");
//For now, just touch the spinner, don't worry about the ticket.
var template = $('#tableauTemplate').html(),
filledTemplate = template.replace('{placeholder}','no');
$('body').append( filledTemplate );
console.log(incomingTicket);
console.log("Appended.");
}
$(document).ready(function() {
console.log("ready");
var trustedURL = "http://tableau.russellchristopher.org/trusted",
userName = "foo",
serverURL = "http://tableau.russellchristopher.org/";
$.post(trustedURL, {
username: userName,
server: serverURL,
client_ip: "",
target_site: ""
}, function(response) {
addTicketAndRender(response);
});
});
</script>
</body>
</html>
在成功函数中对 console.log 的调用正在记录正确的信息 - 所以我知道我到达了我需要的地方 - 但对象似乎没有做它需要做的事情。
最佳答案
仅供引用，您的 tableau.russellchristopher.org 链接无效。我也不知道您将如何在 jsfiddle 中使用它——我在尝试时遇到跨源错误。
一个明显的问题是包含模板的脚本元素位于 </head> 之间的下方区域和 <body> .放在里面body .
以下是我认为可能发生的情况:看起来 Tableau JavaScript API 已设置为处理 object.tableauViz DOMContentLoaded 时的元素或 load火灾。您正在插入 <object>在异步请求的回调中标记到文档中。所以我认为加载事件正在触发，Tableau API 在您的 <object> 之前进行初始化。标记被插入到文档中。
也许为这些事件注册你自己的监听器并调用console.log()查看它们是否在您的 $.post 之前执行回调。
不幸的是，createVizesAndStartLoading()执行初始化的方法(例如从文档中检索 object.tableauViz 元素)似乎不可访问。看起来您可以通过调用 window.tableau.createViz() 添加您的元素, 但不幸的是 createVizesAndStartLoading()进行一些您需要复制或放弃的预处理(例如设置 width/height 值)。
试试这个而不是你的 $.post() :
$.ajax( {
url : trustedURL,
data : {
username : userName,
server : serverURL,
client_ip : "",
target_site : ""
},
async : false
} ).done( addTicketAndRender );
关于javascript - <object> 由从 $(document).ready 调用的函数创建，未呈现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10758376/
26
4
0
根据 jQueryDoc在术语中，.ready() 被称为位于 jQuery.prototype 中的查询选择方法。对于前 $(document).ready() 作为jQueryDoc说:$ 命名空
我见过一些代码，他们只是这样做: $().ready(function() { ... }); 这比执行文档选择器要短，但它是同一件事吗？ 最佳答案 略有变化: $(document).rea
各个处理程序的回调函数何时执行？ 最佳答案 在主要过程中 当您的应用完成初始化并准备打开浏览器窗口时，将触发app上的“就绪”事件。由于在此之前您无法打开窗口，因此可以使用回调函数来创建Browser
最近发现了head.js图书馆和男孩，我对此感到满意，尽管我仍然对一件事感到有点困惑。 来自 headjs.com: The “DOM ready” event such as $(document)
我在我的代码库中发现代码在另一个 $(document).ready(function() { ... 例如 $(document).ready(function() { // 20
我已经养成了从ready函数开始jquery编码的习惯 $(function(){...}); 并将所有从ready调用的函数放入ready中。 然后我意识到，放入就绪函数中的一些函数可能不需要在那里
在浏览旧代码库时，我发现了以前的软件开发人员正在使用的地方 $(function(a) {}(A || (A = {}))); 即使页面尚未准备好，它仍在执行。在我删除传递的全局变量后它开始工作。代码
我已经看到了两种方式，但哪种更好或者并不重要。 我觉得包装每个语句可能会更干净，但只是想知道如果您有 50 个语句，每个语句都有自己的 document.ready 事件处理程序，是否会有更多回调？
这个问题已经有答案了: Four variations of jQuery ready() -- what's the difference? (4 个回答) 已关闭 4 年前。 我正在编写一些我没有
我们最近遇到了一个错误，jquery document.ready 似乎在 DOM 加载之前触发。事实证明，在调用的第一个项目之后有一些错误的代码 $.ready(function(){}); 这条语
什么应该在 jQuery.ready() 中，什么应该在 jQuery.ready() 之外？ 从性能角度来看，我在某处读到，将所有代码包装在 jQuery.ready() 中并不是一种有效的方法。
我实现了一个带有选项列表(工作类别)的页面，单击该页面时应显示数据(工作描述)。我正在使用 BBQ 来处理后台堆栈。 一切正常，除了在用户首次导航到页面时设置初始选择。我的代码被调用到 addClas
解决方案 我有两个 users.js和 users.coffee在我的 Assets 管道中。显然 users.coffee正在阻止 users.js从被加载。确保删除它! 我正在尝试实现 this
我正在研究一个指令，但我不想玩 $document或 $window , 只有 element本身。 之前我有: angular.element($document).ready(function()
我想在移动设备方向改变时使用 $(window).resize 来调用一些函数，我在 $(document).ready 中编写了所有代码，这在我使用 Android 设备时有效，但在使用 iPhon
我有一个使用数据库的 Ionic 应用程序。我想用一个文件的内容填充这个数据库。 这部分我开始工作了。我想创建一个 DB.ready() 事件，很像 $ionicPlatform.ready() 或
我有一个名为“loadTimeTrackersGrid()”的函数，它加载一个弹性网格。设置如下所示: $(document).ready(function () { var edi
我有一个定义数量为 replicas 的部署.如果我的 Pod 准备好/未准备好处理新连接，我使用就绪探针进行通信 - 我的 Pod 在 ready 之间切换/not ready他们一生中的状态。 我
有什么区别: $(document).ready(initialize); 和 $(document).on('ready', initialize); 对我来说，它们似乎以相同的方式工作。 最佳答案
我看到很多项目都在使用 $(document).on('ready', function(e){ //jquery stuff }) 而不是: $( document ).ready(functio
我是一名优秀的程序员,十分优秀！