I have a tableau workbook with
2 sheets
a bar chart (sheet called BAR)
a pie chart (sheet called PIE)
2 Dashboards
the bar graph full screen (sheet called FULLBAR)
the pie chart full screen (sheet called FULLPIE)
Now im trying to load them into an HTML page with buttons to switch between the dashboards. I followed the tutorial and it pulls in the initial dashboard (FULLBAR) just fine, however the switching of dashboards is where I run into a problem.
When clicking a link to switch i get this error in the console
Error: Sheet is not found in Workbook
Here is my code (server obviously XXXX'ed out)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Proof of Concept</title>
<meta name="description" content="Proof of Concept">
<meta name="author" content="thisDude">
<script type="text/javascript" src="http://xxx.xxx.xxx.xxx:xxxx/javascripts/api/tableau-2.0.0.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class='container'>
<div class='row'>
<div class='span3 col-xs-6'><img style="height:39px; width:100px;" src="logo.jpg" ></div>
<h2 class='col-xs-6 span7 pagination-centered'>Proof of Concept</h2>
</div>
<div class='row'>
<h3 class='offset3 span7 pagination-centered' id='sheetName'></h3>
</div>
<div class='row'>
<!-- All of our work will happen here -->
<!-- Viz located at http://xxx.xxx.xxx.xxx:xxxx/views/TEST_VIS2/FULLBAR -->
<ul id = 'menu' class='nav nav-list offset1 span2'>
<!-- This is the menu where we will add all of our buttons. -->
<li class='nav-header'>Switching Views</li>
<li><a onClick="switchView('FULLBAR')">Bar Chart</a></li>
<li><a onClick="switchView('FULLPIE')">Pie Chart</a></li>
</ul>
<div id='tableauViz'></div>
<script>
</script>
<!-- This is the end of the section where we will do our work. -->
</div>
</div>
</body>
</html>
and my app.js code:
window.onload=function() {
var vizDiv = document.getElementById('viz');
var vizURL = "http://xxx.xxx.xxx.xxx:xxxx/views/TEST_VIS2/FULLBAR_1";
var options = {
width: '100%',
height: '500px',
hideToolbar: true,
hideTabs: true
};
viz = new tableauSoftware.Viz (vizDiv, vizURL, options);
};
function switchView(sheetName) {
workbook = viz.getWorkbook();
workbook.activateSheetAsync(sheetName);
console.log(sheetName);
console.log(workbook + " workbook var");
console.log(viz.getWorkbook() + " viz.getWorkbook var");
}
Found out the answer --
I initially had published to the server with the option "Show Sheets as Tabs" DESELECTED. My javascript was also using hideTabs: true.
Doing this causes the JS api to not know the names of the sheets.
By selecting the option during publishing "Show Sheets as Tabs", the API was able to correctly switch visualizations. The js option "hideTabs: true" still keeps the visual tabs hidden.
I have three sheets in my tableau public account. I have created two buttons and describe as java script file as below.
function switchView(sheetName) {
var workbook = viz.getWorkbook();
workbook.activateSheetAsync(sheetName);
}
`
No action is performed after clicking on button.
Related
Is it possible to create several text editor cells within a single page? My desired outcome is to have a button that when clicked allows the user to add new cells of code, where the user can write and later run. Similar to Jupyter notebook. The editor itself is imported from the ace.js library.
For that, I think I need some function add_editor(parent_div) that adds a new text editor to a div that is given as a parameter. ( Which I have failed to implement )
My initial thoughts are perhaps to create a shared class for all of the editors and append it to the father div with jQuery, but when I tried using a class instead of an id for the design,the editor won't load.
I'm not so good with handling with the DOM (especially without React), so even if the solution seems obvious to you, it might not to me.
This is last working version of the code that I have so far
<html lang="en">
<head>
<title>ACE in Action</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Define the editor's CSS !-->
<style type="text/css" media="screen">
#editor {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="row">
<!-- a row of two columns: the first will contain the text editors, the second is irrelevant !-->
<div class="col-9" style="height:200px;">
<div class="container" style="">
<div id="editor">
<!-- the div containing the code, has the id "editor" !-->
def print_something():
print(a)
</div>
</div>
</div>
<div class="col-3">
empty column
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.5/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
function configure_editor(){
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/python");
editor.getSession().setUseWrapMode(true);
editor.setShowPrintMargin(false);
}
configure_editor()
</script>
</body>
</html>
Help will be much appreciated!
Edit: I need to solve this in Javascript or Jquery, without React.
A cleaner method is to assign an editor to each instance using your own structure. With jquery:
<div id="instance0"></div><div id="instance1"></div>
<script>
var instances[];
var $rootElement = $('#instance0');
newInstance($rootElement);
var $rootElement = $('#instance1');
newInstance($rootElememt);
function newInstance($rootElement){
var instance = {};
instance.id = $rootElement.attr('id');
instance.$root = $rootElement;
instance.editor = ace.edit($rootElement[0]);
instance.editor.instance = instance;
instances.push(instance);
}
</script>
This gives you a 1 to 1 instance to editor relationship with backpointers. It will save you much angst in the future. You can just flip in sessions and keep the editors static.
I think I have found somewhat of a solution on my own with jQuery, even though it seems messy.
Each time a new editor will be added with increasing ids, i.e : "editor0", "editor1", "editor2", and so on.
Here is the full code
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>ACE in Action</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Define the editor's CSS !-->
</head>
<body>
<div class="row">
<!-- a row of two columns: the first will contain the text editors, the second is irrelevant !-->
<div class="col-9" style="height:200px;">
<div id="editors_container">
</div>
</div>
<div class="col-3">
<button id="add_editor">Add a new editor</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.5/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
existing_editors = [];
$(document).ready(function(){
$("#add_editor").click(function(){
console.log("reached here!")
let editor_id = "editor"+existing_editors.length;
$newDiv = $("<div id="+editor_id+" style=width:100%;height:100%>"+"</div>");
$("#editors_container").append($newDiv);
let editor = ace.edit(editor_id);
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/python");
editor.getSession().setUseWrapMode(true);
editor.setShowPrintMargin(false);
existing_editors.push(editor);
});
});
</script>
</body>
</html>
Hay I have a problem with sorting divs from createElement function.
Problem:
I create divs from database-items which are align in row (latest item on the end)
What I want:
Display the Items in reversed direction. The latest item added to the database should appear as first item in the stream (like a newsstream on facebook).
Question:
How can I change just the direction the divs are loaded/created?
Further I thought about a technique to set an individual ID to each div created, for sorting them later by ID (Id could be ongoing numbers).
I found this one but it don´t works while i does not increment the ID-number: Javascript create divs with different ids
I know there are many Questions like this on stackoverflow, and I tried several before, with no success for my issue.
Check out my Code:
//create firebase reference
var dbRef = new Firebase("….com/");
var contactsRef = dbRef.child('contacts')
//load all contacts
contactsRef.on("child_added", function(snap) {
//console.log(snap.val())
snap.forEach(function(childSnapshot) {
var key = childSnapshot.key();
var childData = childSnapshot.val();
var divCount = 0;
//create divs from database-elements
var card = document.createElement('div');
card.id = 'div'+divCount;
card.setAttribute('class', 'linkprev');
document.body.appendChild(card);
var cardtitle = document.createElement('div');
cardtitle.setAttribute('class', 'cardtitle');
cardtitle.innerHTML = childData;
card.appendChild(cardtitle);
document.guteUrls.execute();
divCount++;
console.log(event);
//linkify plugin to convert div-elements (strings) to hyperlinks
$('div').linkify();
$('#sidebar').linkify({
target: "_blank"
});
});
});
//save contact
document.querySelector(".addValue").addEventListener("click", function( event ) {
event.preventDefault();
if( document.querySelector('#url').value != '' && document.querySelector('#url').value.charAt(0) == "h" && document.querySelector('#url').value.charAt(3) == "p"){
contactsRef.push({
name: document.querySelector('#url').value,})
contactForm.reset();}
else {
alert('Oops, seems like an error…');
}
}, false);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>frontendpublishing-test</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.embed.ly/jquery.preview-0.3.2.css" />
<link href="css/flexboxgrid.min.css" rel="stylesheet">
<style type="text/css">
#contacts p,
#contacts p.lead{
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<h1>Titel h1</h1>
<hr/>
<div class="row">
<div class="col-md-6">
<form method="post" name="contactForm">
<div class="form-group">
<input id="url" type="url" required name="url" placeholder="share a good article/blog/topic" class="input">
<button type="submit" class="btn btn-primary addValue">Submit</button>
</form>
<!-- <script>
$document.ready(function){
document.getElementsByClassName('linkified');
{console.log("linkified")};
};
</script>
-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Latest compiled and minified Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Include Firebase Library -->
<script src="https://cdn.firebase.com/js/client/2.2.3/firebase.js"></script>
<!-- Contacts Store JavaScript -->
<script src="script.js"></script>
<script src="linkify.min.js"></script>
<script src="linkify-jquery.min.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script async src="https://guteurls.de/guteurls.js"
selector='.linkprev'
gif="http://loading.io/assets/img/default-loader.gif"
callback-a="(function(jqueryElement,url,$){console.log('url:'+url)})"
callback="(function($){console.log('finished')})"
init="(function($){console.log('JS will start to search URLs now')})"
></script>
</body>
</html>
Thanks for helping :)
since you are using jquery instead of
document.body.appendChild(card);
use
$('body').prepend($(card))
you can mark up the area with an id you want to add them into so that it does not insert into the top of your document like
$('#elementid').prepend($(card))
1.Why not query them descendent from db? :))
2.
card.childNodes.length
? card.insertBefore(cardtitle, card.childNodes[0])
: card.appenChild(cardtitle);
I've inherited a project and am very green regarding UI. This project uses Bootstrap, nvd3, and flot on Chrome. There is a layout view in which jQuery is referenced, and then partial views for each page are rendered in the layout body. On a dashboard page, the graphs don't show up unless jQuery is again referenced in the scripts, but that reference causes the sidebar to cease working. Referencing easing can be duplicated in the dashboard scripts to get both the graphs to appear and the sidebar to function, but one graph still doesn't work properly. This leads me to believe that jQuery and its libraries are being referenced multiple times on the layout and partial views, wiping out the references that display graphs, activate the sidebar, render graphs correctly, etc.
If that's correct, is there a way to trace each jQuery reference? I've tried deleting multiple references in the source code by sight, moving layout references into the HTML body, testing what's being hit through Chrome Developer Tools, re-calling references as described above as a band-aid, and searching here for similar questions, but nothing seems to achieve both the correct visual and functionality. Also, can a duplicated jQuery reference on a different partial view that shares the same parent layout nullify references in any other partial view? Please opine if there's another possible solution not considered here, because I'm ultimately trying to get the sidebar and graphs working properly. Thanks in advance for looking at this.
Here's the layout with references:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>#ViewBag.Title</title>
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link rel="shortcut icon" href="/favicon.ico" />
#Styles.Render("~/Content/css")
#Styles.Render("~/Content/icons")
#Scripts.Render("~/bundles/modernizr")
#RenderSection("headcontent", required: false)
<!-- page specific stylesheets -->
<!-- nvd3 charts -->
<link rel="stylesheet" href="/Content/lib/novus-nvd3/nv.d3.min.css">
<!-- owl carousel -->
<link rel="stylesheet" href="/Content/lib/owl-carousel/owl.carousel.css">
<!-- google webfonts -->
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400&subset=latin-ext,latin' rel='stylesheet' type='text/css'>
<!-- datepicker -->
<link rel="stylesheet" href="/Content/lib/bootstrap-datepicker/css/datepicker3.css">
<!-- date range picker -->
<link rel="stylesheet" href="/Content/lib/bootstrap-daterangepicker/daterangepicker-bs3.css">
<!-- timepicker -->
<link rel="stylesheet" href="/Content/lib/bootstrap-timepicker/css/bootstrap-timepicker.min.css">
<!-- ion.rangeSlider -->
<link rel="stylesheet" href="/Content/lib/ion.rangeSlider/css/ion.rangeSlider.css">
<!-- bootstrap switches -->
<link href="/Content/lib/bootstrap-switch/build/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
<!-- 2col multiselect -->
<link href="/Content/lib/multi-select/css/multi-select.css" rel="stylesheet">
<!-- multiselect, tagging -->
<link rel="stylesheet" href="/Content/lib/select2/select2.css">
<!-- main stylesheet -->
<link href="/Content/css/style.css" rel="stylesheet" media="screen">
<!-- moment.js (date library) -->
<script src="/Content/lib/moment-js/moment.min.js"></script>
[styles omitted...]
</head>
<body>
[header omitted...]
<!-- main content -->
<div id="main_wrapper">
[messages omitted...]
#RenderBody()
</div>
<!-- side navigation -->
<nav id="side_nav">
#Html.Partial("~/Views/Shared/_SidebarLeft.cshtml")
</nav>
<!-- jQuery -->
<script src="/Content/js/jquery.min.js"></script>
<!-- easing -->
<script src="/Content/js/jquery.easing.1.3.min.js"></script>
<!-- bootstrap js plugins -->
<script src="/Content/bootstrap/js/bootstrap.min.js"></script>
<!-- top dropdown navigation -->
<script src="/Content/js/tinynav.js"></script>
<!-- perfect scrollbar -->
<script src="/Content/lib/perfect-scrollbar/min/perfect-scrollbar-0.4.8.with-mousewheel.min.js"></script>
<!-- common functions -->
<script src="/Content/js/tisa_common.js"></script>
#RenderSection("Scripts", required: false)
</body>
</html>
And here's the dashboard HTML:
#using Project.Models
#model DashboardViewModel
#{
ViewBag.Title = "Home Page";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="heading_b">Prices Chart</div>
<div class="panel-body">
<div id="nvd3_cumulativeLine" style="width: 100%; height: 300px">
<svg></svg>
</div>
</div>
</div>
</div>
</div>
</div>
Finally, here are the dashboard scripts, with removal of jQuery causing the chart to disappear, removal of easing causing the sidebar to cease pop-outs, and removal of both causing the chart to disappear but leaving sidebar functionality intact.
#section Scripts{
<!-- page specific plugins -->
<!-- jQuery DUPLICATE -->
<script src="/Content/js/jquery.min.js"></script>
<!-- easing DUPLICATE -->
<script src="/Content/js/jquery.easing.1.3.min.js"></script>
<!-- nvd3 charts -->
<script src="/Content/lib/d3/d3.min.js"></script>
<script src="/Content/lib/novus-nvd3/nv.d3.min.js"></script>
<!-- flot charts-->
<script src="/Content/lib/flot/jquery.flot.min.js"></script>
<script src="/Content/lib/flot/jquery.flot.pie.min.js"></script>
<script src="/Content/lib/flot/jquery.flot.resize.min.js"></script>
<script src="/Content/lib/flot/jquery.flot.tooltip.min.js"></script>
<!-- clndr -->
<script src="/Content/lib/underscore-js/underscore-min.js"></script>
<script src="/Content/lib/CLNDR/src/clndr.js"></script>
<!-- easy pie chart -->
<script src="/Content/lib/easy-pie-chart/dist/jquery.easypiechart.min.js"></script>
<!-- owl carousel -->
<script src="/Content/lib/owl-carousel/owl.carousel.min.js"></script>
<!-- dashboard graph functions -->
<script src="/Content/js/apps/tisa_dashboard.js"></script>
<script type="text/javascript">
function cumulativeTestData() {
var closes = JSON.parse('#Html.Raw(Json.Encode(Model.Coordinates))')
return [
{
key: "Prices",
values: closes
},
];
}
</script>
}
You are correct in thinking that there is a conflict when loading the same script multiple times. Only load each script one time.
I can see why trying to remove those scripts from the partial view caused your partial views to fail. You are not loading the scripts until after the partial view. They do not exist until after everything in your partial view has been loaded and executed.
In your layout, move the scripts to the header (preferred) or at least to a point before you pull in the partial view. Then in your partial view, make sure there are no references to scripts which have already been loaded.
In partial views I often use a script wrangler to load in scripts which may or may not have been dynamically loaded. Here is something you can use to attempt to load scripts. It checks to see if a script by the same name has already been loaded on the page (specifically in the header tag) and if it has, it does not attempt to load it again. It's not the prettiest, but it gets the job done.
mycode = function()
{
//Put all your custom javascript here.
//This will run when the scripts below have successfully been processed.
}
var headTag = document.getElementsByTagName("head")[0];
var initialScripts = ["/scripts/jquery-2.1.4.min.js",
"/scripts/jquery-ui.min.js",
"/scripts/jquery.timepicker.min.js"];
var neededScripts = [];
for (var z = 0; z < initialScripts.length; z++) {
if (!isScriptLoaded(initialScripts[z]))
neededScripts.push(initialScripts[z]);
}
if(neededScripts.length)
addScripts(neededScripts, headTag, function () { mycode(); delete mycode; }, 0);
else {
mycode(); delete mycode;
}
function addScripts(scriptsToLoad, loadTag, callback, i) {
if (i >= scriptsToLoad.length)
return;
var script = scriptsToLoad[i];
var scriptTag = document.createElement('script');
scriptTag.setAttribute('type', 'text/javascript');
scriptTag.setAttribute('src', script);
if (i >= (scriptsToLoad.length - 1)) {
scriptTag.onload = callback;
}
else {
scriptTag.onload = function () {
console.log("Added script file " + script);
addScripts(scriptsToLoad, loadTag, callback, i + 1);
}
}
loadTag.appendChild(scriptTag);
}
function isScriptLoaded(url) {
var tags = document.getElementsByTagName('script');
for (var i = tags.length; i--;) {
var existingName = tags[i].src.split('/');
existingName = existingName[existingName.length-1];
var newName = url.split('/');
newName = newName[newName.length-1];
if (existingName == newName) return true;
}
return false;
}
I am developing an application with jQuery mobile and json bring data.
I have a problem loading content when I click on a button but if I enter directly to link the content is there.
Please, look:
if you click on any image it shows a page without content: http://www.example.com.ar/catalogoar/
But if you enter http://www.example.com.ar/catalogoar/arma_ampliada.html?id_arma=1 the content is there.
I can't find the problem. I already try with
$("#tabla_arma").table('refresh');
Please, learn how jQuery Mobile works before you post any more related questions. I am not trying to attack you but people here don't like this kind of questions.
To be able to solve this problem you need to understand how jQuery Mobile page handling works, and you can't solve this problem.
When jQuery Mobile handles pages only first HTML files is fully loaded into the DOM, all intermediate files are loaded only partially. When I say partially I mean HEAD will be stripped away and only FIRST data-role="page" will be loaded.
So if you have 2 pages, for example lets say first one is called index.html and second one is called arma_ampliada.html. When second page is initialized only content inside data-role="page" <div> will load into the DOM, everything else is going to get discarded, including HEAD javascript you need to load your data.
Read more about it here, you will also found solutions.
Your arma_ampliada.html page should look like this:
<html>
<head>
<title>Catálogo de Armas</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!-- CSS -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.css" />
<link rel="stylesheet" href="css/listview-grid.css">
<link rel="stylesheet" href="css/estilos.css">
<!-- JS -->
<script src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).on("mobileinit", function()
{
$.mobile.defaultPageTransition = 'slide';
});
</script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>
<!-- <script src="js/cordova.js"></script> -->
</head>
<body>
<div data-role="page" data-theme="a" id="demo-page" class="my-page">
<script>
var armas;
function obtenerArmaAmpliada(id_arma){
$.ajax({
type: 'GET',
data: {'id_arma' : id_arma},
dataType : 'jsonp',
url: 'service/datos.php?jsoncallback=?',
success:function(data){
armas = data.armas;
mostrarArmas();
},
error: function() {
alert("error");
}
});
}
function mostrarArmas ()
{
$("#arma_ampliada").html('');
$.each(armas, function(indice, receta)
{
$("#arma_ampliada").append('<tr><td><img src="'+receta.foto+'" class="ui-li-thumb" ><h2>'+receta.marca+'</h2><p>'+receta.modelo+'</p></td></tr>');
});
$("#tabla_arma").table('refresh');
}
$(function(){
var Url = location.href;
Url = Url.replace(/.*\?(.*?)/,"$1");
Variables = Url.split ("&");
for (i = 0; i < Variables.length; i++)
{
Separ = Variables[i].split("=");
eval ('var '+Separ[0]+'="'+Separ[1]+'"');
}
obtenerArmaAmpliada(id_arma);
});
</script>
<div data-role="header" style="overflow:hidden;">
<h1>Catálogo de Armas</h1>
Opciones
<div data-role="navbar">
<ul>
<li>Marcas</li>
<li>Calibre</li>
<li>Tipo</li>
</ul>
</div>
</div>
<div role="main" class="ui-content">
<div id="tabla_arma">
<table id="arma_ampliada">
</table>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
Okay, so I have the following HTML code:
<!DOCTYPE html>
<html>
<head>
<title>FastCast</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/footer.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="favicon1.ico"/>
</head>
<body>
<center>
<h1><b>Welcome to FastCast!</b></h1>
<div>
<p><font size="3">FastCast is a web application designed to gather weather information from various sources and display it in an easy-to-read format.</font></p>
<hr></hr>
<div id="picDiv">
<img id="imgDisp" src="logo.jpg">
</div>
<p><font size="6">Enter you location to get started.</font></p>
</div>
<form class="form-inline" role="form">
<div class="form-group">
<input type="text" class="form-control" id="Location" placeholder="ex. Boston, MA">
</div>
</form>
<p><i>Press enter to continue.</i></p>
<a id="test">Click me</a>
<script>
window.onkeydown = function(event) {
if (event.keyCode === 13) {
var x = document.getElementById("Location").value;
var last2 = x.slice(-2);
alert(last2);
}
}
var i = 0;
$('a#test').click(function() {
i += 1;
$('a#test').popover({
trigger: 'manual',
placement: 'right',
content: function() {
var message = last2;
return message;
}
});
$('a#test').popover("show");
});
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</center>
</body>
<div class="footer" id="footer">Developed in Twitter Bootstrap | Information from openweathermap.org | Tyler Jablonski, 2014+</div>
</html>
Towards the end I have a link that says "Click me". As you can see, in the script tags that follow, I have a bit of code that looks like this:
var i = 0;
$('a#test').click(function() {
i += 1;
$('a#test').popover({
trigger: 'manual',
placement: 'right',
content: function() {
var message = last2;
return message;
}
});
$('a#test').popover("show");
});
I was hoping that this code would active a popover when the link is clicked, but for some reason, it doesn't work. Nothing happens at all. Why is this, and how can I properly make a popover in Bootstrap and then have it display a JavaScript variable?
Thanks!
You are missing some things in your popover element <a> tag, have the format be something like this:
<a id="test" data-toggle="tooltip" rel="popover">Click Me</a>
Then it should work, for example: http://jsfiddle.net/52VtD/1983/