10

In the sample I've put together, I need to:

  1. Use a jquery POST inside $(document).ready to grab a "ticket" I use later
  2. On success of the post, call another function ("AddTicketAndRender()") and pass in that ticket
  3. 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.

  4. Add the HTML template to body and render:

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

I have this working in jsfiddle:

http://jsfiddle.net/vm4bG/4/

However, when I combine the HTML and JavaScript together into a single htm file, the visualization I want isn't getting rendered in Chrome, IE, or Firefox.

Here is complete source from the HTM that isn't working. Can anyone see something that is obviously wrong? My markup & script is below and/or here: 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&#47;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>

Calls to console.log in the success function are logging correct information - so I know I'm getting where I need to - but the object doesn't seem to be doing what it needs to.

I have been researching this topic as well and first of all I don't agree with the votes down moderators for a perfectly valid question with research done by the asker. Second the answer is no you cannot put IIS commands in a executable the whole point of IIS is that you set it up once and you are done so just set it up correctly the first time and you should be good also that tutorial you are looking at is rubbish. Just my 2 cents!

4

2 回答 2

5

仅供参考，您的 tableau.russellchristopher.org 链接不起作用。我也不知道你会如何在 jsfiddle 中使用它——当我尝试它时会出现跨源错误。

  1. 一个明显的问题是包含模板的脚本元素位于</head>和之间的下方区域<body>。把它放在里面body。

  2. 以下是我认为可能发生的情况：看起来 Tableau JavaScript API 已设置为在触发或触发object.tableauViz时处理元素。您正在将标记插入到异步请求回调中的文档中。因此，我认为加载事件正在触发，并且 Tableau API 正在将您的标记插入文档之前进行初始化。DOMContentLoadedload<object><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 );
于 2012-05-31T13:13:42.970 回答
4

很难从大量代码中准确判断您遇到了什么，因此一般原则：

为了查找和操作 DOM 元素，该元素必须存在。因此，例如，此代码将失败：

<script>$("#target").html("Updated");</script>
<p id="target">Not updated</p>

实例| 资源

目标不会更新。此代码将起作用：

<p id="target">Not updated</p>
<script>$("#target").html("Updated");</script>

实例| 资源

唯一的区别是script标签在目标之后，因此当您尝试对其进行操作时，您就知道目标存在于 DOM 中。（这是可靠的；请参阅Google 的开发团队对此有何评论，以及YUI 指南。）

库传统上包括“DOM 就绪”事件，因为内置load事件，即对象事件，直到过程的非常非常晚window才会触发（一旦所有外部引用都已加载，包括所有图像）。但人们想早点做事，即使图像仍在加载。“就绪”样式事件允许脚本代码可以放置在标记中的任何位置（人们喜欢将其放入，出于某种原因），但如果它使用“就绪”事件，它知道它实际上不会被调用，直到所有标记已被处理。head

所以结果是：要么使用ready事件，要么（更好地）将依赖元素的代码移动到标记中的那些元素之后（通常最好在结束</body>标记之前）。

于 2012-05-25T16:57:52.183 回答