在我整理的示例中，我需要:
- 在 $(document) 中使用 jquery POST。准备好获取我稍后使用的“票”
- 发布成功后，调用另一个函数(“AddTicketAndRender()”)并传入该票证
- 在 AddTicketAndRender() 中，将 HTML 模板中的占位符值替换为传入的票证。HTML 模板定义了我需要呈现的对象。
将 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.tableauVizDOMContentLoaded时的元素或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/