Databases
StackOverflow2013
Postsdbo
POWhen includingjQuery mobile CSS my <form><label> actions from D3 do not work
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhen includingjQuery mobile CSS my <form><label> actions from D3 do not work
    primarykey
    data
    text
    <p>here is my HTML:</p> <p></p> <pre><code> &lt;head&gt; &lt;script type="text/javascript" src="//chalk1up.net/climb/3rdparty/d3.v3.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="graph_functions.js"&gt;&lt;/script&gt; &lt;? include 'head1.html'; ?&gt; &lt;? include 'head2.html'; ?&gt; &lt;/head&gt; &lt;body&gt; &lt;script type="text/javascript" src="//d3.v3.min.js"&gt;&lt;/script&gt; &lt;div data-role="page" id="home" data-theme="a"&gt; &lt;? include 'navbar.php'; ?&gt; &lt;div data-role="content"&gt; &lt;div id="graph_avg" data-role="fieldcontain"&gt; &lt;label&gt;&lt;input type="radio" name="dataset" value="bouldering" checked&gt; Bouldering&lt;/label&gt; &lt;label&gt;&lt;input type="radio" name="dataset" value="ropes"&gt; Ropes&lt;/label&gt; &lt;/div&gt; &lt;? include 'footer.html'; ?&gt; &lt;/div&gt; &lt;/body&gt; &lt;!--&lt;script type="text/javascript" src="pie.js"&gt;&lt;/script&gt; --&gt; &lt;script type="text/javascript" src="pie.js"&gt;&lt;/script&gt; </code></pre> <p></p> <p>Here is part of my D3 Code to create a Pie Chart(pie.js) that applies to the problem:</p> <pre><code>var dataset = { bouldering: [53, 28, 19, 24, 300, 22,55,33, 77, 32, 43,55,67,87,99,25,21, 0, 0, 0, 0, 0, 0, 0, 0, 0], ropes: [5, 0, 10, 0, 0, 15, 0, 1, 9, 10, 11, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] }; d3.selectAll("input").on("change", change); var timeout = setTimeout(function() { d3.select("input[value=\"ropes\"]").property("checked", true).each(change); }, 2000); function change() { clearTimeout(timeout); path_pie = path_pie.data(pie(dataset[this.value])); // update the data path_pie.transition().duration(1200).attrTween("d", arcTween); // redraw the arcs } function arcTween(a) { var i = d3.interpolate(this._current, a); this._current = i(0); return function(t) { return arc(i(t)); }; } </code></pre> <p>For Some reason when I remove this line from the HTML:</p> <pre><code> &lt;? include 'head1.html'; ?&gt; </code></pre> <p>The</p> <pre><code> &lt;label&gt;&lt;input type="radio" name="dataset" value="bouldering" checked&gt; Bouldering&lt;/label&gt; &lt;label&gt;&lt;input type="radio" name="dataset" value="ropes"&gt; Ropes&lt;/label&gt; </code></pre> <p>"buttons" actually work, but if I include the jQuery mobile CSS library, nothing happens when I click the buttons that are displayed.</p> <p>From what I gather the head1.html contains a line to include the jQuery Mobile CSS file which makes those labels look all nice and pretty, but it seems to remove the ability to allow me to either <code>d3.select</code> them or I am not allowing my function to change it correctly.</p> <p>Any ideas on how to overwrite the CSS or to change my D3 code to select correctly?</p> <p>head1.html has the line that is the problem child that looks like this:</p> <pre><code> &lt;link rel="stylesheet" href="//jquery.mobile-1.3.1.min.css" /&gt; </code></pre> <p>@nrabinowitz This is what I get from console.log(path_pie):</p> <p>[object SVGPathElement],[object SVGPathElement],[object SVGPathElement],[object SVGPathElement],[object SVGPathElement],[object SVGPathElement],[object SVGPathElement],[object SVGPathElement],[object SVGPathElement],[object SVGPathElement],[object SVGPathElement],[object SVGPathElement],[object SVGPathElement],[object SVGPathElement],[object SVGPathElement],[object SVGPathElement],[object SVGPathElement],[object SVGPathElement],[object SVGPathElement],[object SVGPathElement],[object SVGPathElement],[object SVGPathElement],[object SVGPathElement],[object SVGPathElement],[object SVGPathElement],[object SVGPathElement] </p> <pre><code> var selection = d3.selectAll("input").on("change", change); console.log("Selection:" + selection); </code></pre> <p>Selection:[object HTMLInputElement],[object HTMLInputElement] </p> <p>Solved:</p> <p>replace this line:</p> <pre><code> d3.selectAll("input").on("change",change); </code></pre> <p>With this:</p> <pre><code> $('input').on("change", change); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJason Aller
    1. USuser1698062
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POWhen includingjQuery mobile CSS my <form><label> actions from D3 do not work
      1. USuser1698062
      1. VTFavorite
    1. COYou're going to have a much better chance at getting a good answer if you *only* show the relevant code. The main code in question is the mobile CSS library and the contents of `head1.html`, neither of which is included here.
      singulars
      1. POWhen includingjQuery mobile CSS my <form><label> actions from D3 do not work
      1. USnrabinowitz
    2. COProbably `this` in `change` isn't what you expect, so `dataset[this.value]` won't give you what you want. What does a `console.log()` say here?
      singulars
      1. POWhen includingjQuery mobile CSS my <form><label> actions from D3 do not work
      1. USnrabinowitz
    3. CO@nrabinowitz I only put in relavant code now, and I added the head1.html code line that is the problem. I don't believe this in change is the problem due the fact that it works when "change" actually gets called but the issue lies more in the buttons (<input>) not getting actions to call "change"
      singulars
      1. POWhen includingjQuery mobile CSS my <form><label> actions from D3 do not work
      1. USuser1698062
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload