Question

I’ve embedded a visualization into an HTML page using the script below. Essentially, I set the properties on an object which represents the visualization, and then viz_v1.js does all the heavy lifting for me:

  <script type="text/javascript" src="http://public.tableausoftware.com/javascripts/api/viz_v1.js"></script>
  <div class="tableauPlaceholder" 
        style="width:654px; height:1469px;background-image: url('http://localhost:81/Background.gif'); top: 0px; left: 0px; width: 100%; margin-left: 76px;">

            <noscript>
                <a href="#"><img alt="Analytics, Inc. " 
                src="http://localhost:81/Background.gif" 
                style="border: none" /></a>
            </noscript>

            <object class="tableauViz" width="654" height="1469" style="display:none;">
            <param name="host_url" value="http%3A%2F%2F192.168.56.1%2F" />
            <param name="site_root" value="/t/Site2" />
            <param name="name" value="AnalyticsIncJavaScript&#47;AnalyticsInc" />
            <param name="tabs" value="no" />
            <param name="toolbar" value="yes" />
            <param name="static_image" value="Background.gif"/>
            <param name="animate_transition" value="yes" />
            <param name="display_static_image" value="yes" />
            <param name="display_spinner" value="yes" />
            <param name="display_overlay" value="yes" />
            <param name="display_count" value="yes" />
            </object>

    </div>

Note that I’m hard-coding all the property values in question.

I now need to add another parameter/property into the mix – and the value of this sucker needs to be dynamic:

        <object class="tableauViz" width="654" height="1469" style="display:none;">
        <param name="host_url" value="http%3A%2F%2F192.168.56.1%2F" />
        ... 
        <param name="ticket" value="<a dynamic value>" />           
        </object>

I must retrieve the value for “ticket” by POSTing an arbitrary username and the IP of the client to a URL, then grab the response.

From the research I’ve done, it looks like jquery will allow me to do this, but since I’m a js newb, I’m unclear how to pass TWO name/value pairs (username, ipaddress) when I POST. I’m also unclear how to grab the resulting “ticket” value by parsing the response and drop it into a variable for use later on.

Question 1: Can someone show me how to do this? (“Keep it simple for stupid” is defintely in order here – an assumption that I am clueless about jquery and javascript would be correct)

Question 2: Assuming I’ve now gotten my ticket value loaded into a variable (let’s call it varTicket), how do I dynamically populate the ticket parameter on my tableauViz object?

Do I use something like PHP (clueless about that, too), and somehow ECHO my ticket value in? Can I address the tableauViz object directly and touch it’s .ticket property? I’d prefer to handle this part of the puzzle without having to reload/submit the containing page.

Thanks for your ideas!

Answer 1

Assuming your server will return a Json which will represent your ticket.

Your jQuery post would look something like this:

var ticketValueFromServer;

jQuery.post(
  dataType : "JSON",
  data : {"username" : username, "ipaddress" : ipaddress},
  url: myserverlocation,
  success: function(response){
    ticketValueFromServer = response.ticket;
  }
);

Use this ticketValue when you are creating your object.

Don’t forget to look at examples