Placing a div inside a dialog
I am creating a jQuery plugin that shows the user a bar chart when the user selects a table on a web page. I can display a table on the same page. Is there a way to place this table in a dialog box? I've never worked with a dialog box, so instead I tried to put the div in a new window using:
var popup = window.open('about:blank','instructions','width=300,height=200');
popup.onload = function() {
jQuery(popup.document.body).append(".chart");
}
where my div <div class="chart"></div>
But it just opens an empty window.
This is my working jsfiddle that displays a diagram on the same page:
function getSelected() {
if (window.getSelection) {
return window.getSelection();
} else if (document.getSelection) {
return document.getSelection();
} else {
var selection = document.selection && document.selection.createRange();
if (selection.text) {
return selection.text;
}
return false;
}
return false;
}
$( "table" ).on('click', function() {
var selection = getSelected();
if (selection) {
var data = [];
var vals = $('#test').find('td').filter(function () {
//get only <td> that contain numeric value inside it
return $.isNumeric(this.innerHTML);
}).each(function (i, val) {
data.push(val.innerHTML);
});
var x = d3.scale.linear()
.domain([0, d3.max(data)])
.range([0, 420]);
d3.select(".chart")
.selectAll("div")
.data(data)
.enter().append("div")
.style("width", function(d) { return x(d) + "px"; })
.text(function(d) { return d; });
//alert(data);
}
});
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
<div class="chart"></div>
<table id="test" style="width:100%">
<tbody><tr>
<td>Jill</td>
<td>21</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>13</td>
<td>94</td>
</tr>
</tbody></table>
Any help is appreciated. Thank you.
source to share
In the javascript dialog, your options are somewhat limited in what you can do. For example, a line break <br/>
cannot be used with a dialog box. You will need to use a newline character \n
. If you need to display some HTML code in the box, I would recommend using something else, like a fancy window. Here is a link to view some examples. It supports a wide range of features such as images, videos, and static HTML.
source to share