在我整理的样本中，我需要：
- Use a jquery POST inside $(document).ready to grab a "ticket" I use later
- On success of the post, call another function ("AddTicketAndRender()") and pass in that ticket
- In AddTicketAndRender(), replace a placeholder value in an HTML template with the ticket that was passed in. The HTML template defines an object I need to render.
将HTML模板添加到body并呈现：
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 );}
我在jsfidle中有这样的工作：
然而，当我将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>
在success函数中调用console.log会记录正确的信息，所以我知道我正在到达需要的地方，但对象似乎没有做它需要做的事情。