9
En la muestra he juntado, necesito:
- , utilizar un post jQuery dentro de $ (document) ready para tomar una "billete" yo uso posterior
- en caso de éxito del post, llamar a otra función ("AddTicketAndRender()") y en aquel billete
- en AddTicketAndRender(), reemplazar un valor de marcador de posición en una plantilla HTML con el billete que fue pasado. La plantilla HTML define un objeto que necesito representar.
Añadir la plantilla HTML para cuerpo y 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);}
tengo este trabajo en jsFiddle:
Sin embargo, cuando combino el código HTML y JavaScript juntos en un solo archivo htm, la visualización que quiero no se muestra en Chrome, IE o Firefox.
Aquí hay una fuente completa del HTM que no está funcionando. ¿Alguien puede ver algo que obviamente está mal? Mi script de marcado & está por debajo y/o aquí: 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>
llamadas a CONSOLE.LOG en la función del éxito está registrando información correcta - así que sé que estoy donde necesito - pero el objeto doesn' Parece que hace lo que necesita.
El elemento no quede anexa, debido a que el DOM no está listo. Es por eso que hay un evento "DOM listo". –
Cuidado con jsFiddle. De forma predeterminada, pone su código JavaScript en el evento 'onload', que ocurre ** muy, muy tarde ** en el proceso de carga de la página (mucho después de que" DOM esté listo "). Y, de hecho, su http://jsfiddle.net/vm4bG/2/ fiddle está configurado exactamente de esa manera (e incluye MooTools, ¿deseabas MooTools?). –
Pero si llamo a la función que hace esto desde adentro $ (document) .ready(), ¿no estaría listo, por definición, el DOM? –