Databases
StackOverflow2013
Postsdbo
POhow can I take various VARs and place them into a container created in the HTML?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POhow can I take various VARs and place them into a container created in the HTML?
    primarykey
    data
    text
    <p>I am working on a Jeopardy (quiz game) game for my wife (who is a school teacher). The HTML is set up to have multiple columns and multiple rows.</p> <p>Example of my HTML: </p> <pre><code>&lt;body&gt; &lt;div id="container"&gt; &lt;div id="logo" class="center"&gt; &lt;img src="jeoparody.png" /&gt; &lt;/div&gt; &lt;div id="wood" class="center"&gt; &lt;ul id="categories"&gt; &lt;li&gt;The Global Age&lt;/li&gt; &lt;li&gt;Age of Revolutions&lt;/li&gt; &lt;li&gt;Era of Global Wars&lt;/li&gt; &lt;li&gt;The Post War Period&lt;/li&gt; &lt;li&gt;Geography&lt;/li&gt; &lt;/ul&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;hr /&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;ul id="rowOne"&gt; &lt;li&gt;&lt;a href="#"&gt;$100&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;$100&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;$100&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;$100&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;$100&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;ul id="rowTwo" class="center"&gt; &lt;li&gt;&lt;a href="#"&gt;$200&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;$200&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;$200&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;$200&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;$200&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;ul id="rowThree" class="center"&gt; &lt;li&gt;&lt;a href="#"&gt;$300&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;$300&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;$300&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;$300&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;$300&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;ul id="rowFour" class="center"&gt; &lt;li&gt;&lt;a href="#"&gt;$400&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;$400&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;$400&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;$400&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;$400&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;ul id="rowFive" class="center"&gt; &lt;li&gt;&lt;a href="#"&gt;$500&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;$500&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;$500&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;$500&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;$500&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="footer" class="center"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id="clueContainer" class="center"&gt;&lt;/div&gt; &lt;/body&gt; </code></pre> <p>What I am attempting to do is click on the "li" of each row and column and the "a" take me to a container housing the clue. In my jQuery code I have accomplished this feat for the first column; however, I am unable to write the code that will accomplish this for every column.</p> <p>JQuery code:</p> <pre><code>$(document).ready(function () { var columnOne = { "$100": "On the world political map, where were some of the major states and empires located about 1500 A.D. (C.E.)?", "$200": "What were the artistic, literary, and intellectual ideas of the Renaissance?", "$300": "Where were the five world religions located around 1500 A.D. (C.E.)?", "$400": "What were the regional trading patterns about 1500 A.D. (C.E.)?", "$500": "Why were the regional trading patterns important?", }; var columnTwo = { "100": "What were the artistic, literary, and intellectual ideas of the Renaissance?", "200": "B", "300": "C", "400": "D", "500": "E", }; var columnThree = { "100": "A", "200": "B", "300": "C", "400": "D", "500": "E", }; var columnFour = { "100": "D", "200": "B", "300": "C", "400": "D", "500": "E", }; var columnFive = { "100": "A", "200": "B", "300": "C", "400": "D", "500": "E", }; $('li').on('click', 'a', function () { var foo = $(this).text(); $("#clueContainer").text( columnOne[foo] ); }); $("#rowTwo").on("click", "a", function () { var foo2 = $(this).text( columnTwoTwo[foo2] ); }); $("#container").click(function(){ $("#container").hide(function(){ $("#clueContainer").show(function(){ }); }); $("#clueContainer").click(function(){ $("#clueContainer").hide(function(){ $("#container").show(function(){ }); }); }); }); }); </code></pre> <p>Could someone be willing to help me accomplish my goal or at least help me figure out what I am doing wrong? </p> <p>CSS:</p> <pre><code>@font-face { font-family: 'korinna_btregular'; src: url('fontsJ/korinna_regular_bt-webfont.eot'); src: url('fontsJ/korinna_regular_bt-webfont.eot?#iefix') format('embedded-opentype'), url('fontsJ/korinna_regular_bt-webfont.woff') format('woff'), url('fontsJ/korinna_regular_bt-webfont.ttf') format('truetype'), url('fontsJ/korinna_regular_bt-webfont.svg#korinna_btregular') format('svg'); font-weight: normal; font-style: normal;} body{background-color: #000;} hr{border: 3px solid #200b02;} #wood{width: 960px; height: auto; background-image: url(woodGrain.png); position: relative; border: 3px solid #200b02; -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 1);} #container{width: 100%; margin: 5px; padding: 5px;} .center{width: 960px; margin: 0px auto;} .clear{clear: both;} #logo{width: 960px; height: 250px; padding-top: 30px; display: block; text-align: center; vertical-align: middle; line-height: 250px; background-color: #002290;} #categories li{width: 175px; height: 100px; margin: 0px 5px 5px -8px; display: inline-block; border: 1px solid #fff; color: #fff; font-family: 'korinna_btregular'; text-transform: uppercase; font-size: 14px; vertical-align: middle; border-radius: 10px 10px; text-align: center; vertical-align: middle; line-height: 100px; background-color: #002290; -webkit-box-shadow: inset 0 0 3px 3px rgba(0, 0, 0, 1);} #categories a{color: #fff; text-decoration: none;} #rowOne li{width: 175px; height: 100px; margin: 5px 5px 0px -8px; display: inline-block; border: 1px solid #fff; color: #e6ca8b; font-family: 'korinna_btregular'; text-transform: uppercase; font-size: 48px; font-weight: bold; border-radius: 10px 10px; text-align: center; vertical-align: middle; line-height: 100px; background-color: #002290; -webkit-box-shadow: inset 0 0 4px 4px rgba(0, 0, 0, 1);} #rowOne a{color: #fcd830; text-decoration: none;} #rowOne li:hover{background-color: #a3bbfb;} #rowTwo li{width: 175px; height: 100px; margin: 0px 5px 5px -8px; display: inline-block; border: 1px solid #fff; font-family: 'korinna_btregular'; text-transform: uppercase; font-size: 48px; font-weight: bold; border-radius: 10px 10px; text-align: center; vertical-align: middle; line-height: 100px; background-color: #002290; -webkit-box-shadow: inset 0 0 4px 4px rgba(0, 0, 0, 1);} #rowTwo a{color: #fcd830; text-decoration: none;} #rowTwo li:hover{background-color: #a3bbfb;} #rowThree li{width: 175px; height: 100px; margin: 5px 5px 5px -8px; display: inline-block; border: 1px solid #fff; font-family: 'korinna_btregular'; text-transform: uppercase; font-size: 48px; font-weight: bold; border-radius: 10px 10px; text-align: center; vertical-align: middle; line-height: 100px; background-color: #002290; -webkit-box-shadow: inset 0 0 4px 4px rgba(0, 0, 0, 1);} #rowThree a{color: #fcd830; text-decoration: none;} #rowThree li:hover{background-color: #a3bbfb;} #rowFour li{width: 175px; height: 100px; margin: 5px 5px 5px -8px; display: inline-block; border: 1px solid #fff; font-family: 'korinna_btregular'; text-transform: uppercase; font-size: 48px; font-weight: bold; border-radius: 10px 10px; text-align: center; vertical-align: middle; line-height: 100px; background-color: #002290; -webkit-box-shadow: inset 0 0 5px 5px rgba(0, 0, 0, 1);} #rowFour a{color: #fcd830; text-decoration: none;} #rowFour li:hover{background-color: #a3bbfb;} #rowFive li{width: 175px; height: 100px; margin: 5px 5px 20px -8px; display: inline-block; border: 1px solid #fff; font-family: 'korinna_btregular'; text-transform: uppercase; font-size: 48px; font-weight: bold; border-radius: 10px 10px; text-align: center; vertical-align: middle; line-height: 100px; background-color: #002290; -webkit-box-shadow: inset 0 0 5px 5px rgba(0, 0, 0, 1);} #rowFive a{color: #fcd830; text-decoration: none;} #rowFive li:hover{background-color: #a3bbfb;} #footer{width: 960px; height: 20px; background-color:#002290;} /***Clues***/ #clueContainer{width: 900px; height: 500px; margin-top: 150px; padding: 200px 100px 0 100px; color: #fff; font-family: 'korinna_btregular'; text-transform: uppercase; font-size: 54px; border: 1px solid #fff; border-radius: 25px 25px; background-color: #002290; -webkit-box-shadow: inset 0 0 5px 5px rgba(0, 0, 0, 1); display: none;} </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USjustLearning
    1. USjustLearning
    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. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POhow can I take various VARs and place them into a container created in the HTML?
      1. This table or related slice is empty.
      1. VTUpMod
    1. CO`var foo2 = $(this).text( columnTwoTwo[foo2] );` **columnTwoTwo**? A typo perhaps
      singulars
      1. POhow can I take various VARs and place them into a container created in the HTML?
      1. USc.P.u1
    2. COOne thing that's wrong: Your objects have commas at the end of the last property. Objects should only have commas **in between** properties: `{ prop1: 'val1', prop2: 'val2' }`.
      singulars
      1. POhow can I take various VARs and place them into a container created in the HTML?
      1. USWeb_Designer
    3. COBoth of the previous comments reveal typos / code misuse that a tool like [JSHint](http://www.jshint.com/) would show you.
      singulars
      1. POhow can I take various VARs and place them into a container created in the HTML?
      1. USWeb_Designer
 

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