Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>When you pass a markup string into <code>$</code>, it's parsed as HTML using the browser's <code>innerHTML</code> property on a <code>&lt;div&gt;</code> (or other suitable container for special cases like <code>&lt;tr&gt;</code>). <code>innerHTML</code> can't parse SVG or other non-HTML content, and even if it could it wouldn't be able to tell that <code>&lt;circle&gt;</code> was supposed to be in the SVG namespace.</p> <p><code>innerHTML</code> is not available on SVGElement—it is a property of HTMLElement only. Neither is there currently an <code>innerSVG</code> property or other way(*) to parse content into an SVGElement. For this reason you should use DOM-style methods. jQuery doesn't give you easy access to the namespaced methods needed to create SVG elements. Really jQuery isn't designed for use with SVG at all and many operations may fail.</p> <p>HTML5 promises to let you use <code>&lt;svg&gt;</code> without an <code>xmlns</code> inside a plain HTML (<code>text/html</code>) document in the future. But this is just a parser hack(**), the SVG content will still be SVGElements in the SVG namespace, and not HTMLElements, so you'll not be able to use <code>innerHTML</code> even though they <em>look</em> like part of an HTML document.</p> <p>However, for today's browsers you must use <em>X</em>HTML (properly served as <code>application/xhtml+xml</code>; save with the .xhtml file extension for local testing) to get SVG to work at all. (It kind of makes sense to anyway; SVG is a properly XML-based standard.) This means you'd have to escape the <code>&lt;</code> symbols inside your script block (or enclose in a CDATA section), and include the XHTML <code>xmlns</code> declaration. example:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt; &lt;/head&gt;&lt;body&gt; &lt;svg id="s" xmlns="http://www.w3.org/2000/svg"/&gt; &lt;script type="text/javascript"&gt; function makeSVG(tag, attrs) { var el= document.createElementNS('http://www.w3.org/2000/svg', tag); for (var k in attrs) el.setAttribute(k, attrs[k]); return el; } var circle= makeSVG('circle', {cx: 100, cy: 50, r:40, stroke: 'black', 'stroke-width': 2, fill: 'red'}); document.getElementById('s').appendChild(circle); circle.onmousedown= function() { alert('hello'); }; &lt;/script&gt; &lt;/body&gt;&lt;/html&gt; </code></pre> <p>*: well, there's DOM Level 3 LS's <a href="http://www.w3.org/TR/DOM-Level-3-LS/load-save.html#LS-LSParser-parseWithContext" rel="noreferrer">parseWithContext</a>, but browser support is very poor. Edit to add: however, whilst you can't inject markup into an SVGElement, you could inject a new SVGElement into an HTMLElement using <code>innerHTML</code>, then transfer it to the desired target. It'll likely be a bit slower though:</p> <pre><code>&lt;script type="text/javascript"&gt;&lt;![CDATA[ function parseSVG(s) { var div= document.createElementNS('http://www.w3.org/1999/xhtml', 'div'); div.innerHTML= '&lt;svg xmlns="http://www.w3.org/2000/svg"&gt;'+s+'&lt;/svg&gt;'; var frag= document.createDocumentFragment(); while (div.firstChild.firstChild) frag.appendChild(div.firstChild.firstChild); return frag; } document.getElementById('s').appendChild(parseSVG( '&lt;circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" onmousedown="alert(\'hello\');"/&gt;' )); ]]&gt;&lt;/script&gt; </code></pre> <p>**: I hate the way the authors of HTML5 seem to be scared of XML and determined to shoehorn XML-based features into the crufty mess that is HTML. XHTML solved these problems years ago.</p>
    singulars
    1. This table or related slice is empty.
    1. POjquery's append not working with svg element?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USbobince
    1. USbobince
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POjquery's append not working with svg element?
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThis could be solved by modifying jQuery if only they would expose `wrapMap`...
      singulars
      1. PO
      1. USJames
    2. COThis answer is still relevant! I just had a bizarre bug where added elements show in the Chrome element inspector, but would not render. If I `RMB`>`edit as html` on the html tag and hit enter everything displays (but all event listeners vanish). After reading this answer I changed my createElement calls to createElementNS and now everything works!
      singulars
      1. PO
      1. USkitsu.eb
    3. COYou can manipulate the SVG elements with jquery once they are created using the DOM method createElementNS. You can change the makeSVG function to 'return $(el)' and now you have a svg element that can use jquery methods.
      singulars
      1. PO
      1. USHoffmann
 

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