Databases
StackOverflow2013
Postsdbo
POPreload form with json data
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPreload form with json data
    text
    copied!<p>I am still learning javascript, jquery and all that comes with it. As a personal test for learning I am developing a program that eventually will pull from a php server. Right now I am pulling from a hard coded json file and preloading a page with that. The user will then be able to click the edit button that is populated and it will provide a popup with a preloaded form with that sections data (this is currently the part i need assistance with). Using jquery 1.9.1 with migrate and mustache.js and jqmodal to handle the form popup Here is my code:</p> <p>HTML:</p> <pre><code> &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;link href='css.css' rel='stylesheet' type='text/css'&gt; &lt;script id="playerTpl" type="text/template"&gt; {{#playerList}} &lt;li id="player{{player}}"&gt; &lt;h3&gt;player: {{player}}&lt;/h3&gt; &lt;p&gt;&lt;strong&gt;Name:&lt;/strong&gt; {{name}}&lt;/p&gt; &lt;p&gt;&lt;strong&gt;Score:&lt;/strong&gt; {{score}}&lt;/p&gt; &lt;p&gt;&lt;strong&gt;Rank: &lt;/strong&gt;{{rank}}&lt;/p&gt; &lt;a href="" class="editBtn" name="modal"&gt;Edit&lt;/a&gt; &lt;a href="" class="deleteBtn"&gt;Delete&lt;/a&gt; &lt;/li&gt; {{/playerList}} &lt;/script&gt; &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt; &lt;script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"&gt;&lt;/script&gt; &lt;script src="//cdnjs.cloudflare.com/ajax/libs/jqModal/r14/jqModal.js"&gt;&lt;/script&gt; &lt;script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"&gt;&lt;/script&gt; &lt;body&gt; &lt;div id="mainContent"&gt; &lt;h1&gt;Prototype Example:&lt;/h1&gt; &lt;ul id="playersUL"&gt; &lt;/ul&gt; &lt;a href="#" id="addBTN"&gt;Add Player&lt;/a&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;div class="addplayerStyle" id="addPlayer"&gt; &lt;form id="myForm"&gt; &lt;label&gt;Player Number&lt;/label&gt; &lt;select id="optionList" name="player" required&gt; &lt;option value="1"&gt;1&lt;/option&gt; &lt;option value="1"&gt;2&lt;/option&gt; &lt;option value="1"&gt;3&lt;/option&gt; &lt;option value="1"&gt;4&lt;/option&gt; &lt;/select&gt;&lt;br&gt;&lt;br&gt; &lt;label&gt;Player Name&lt;/label&gt; &lt;input type="text" name="name" placeholder="Player Name" required /&gt;&lt;br&gt;&lt;br&gt; &lt;label&gt;Player Score&lt;/label&gt; &lt;input type="number" name="score" placeholder="Player Score" required /&gt;&lt;br&gt;&lt;br&gt; &lt;label&gt;Player Rank&lt;/label&gt; &lt;input type="number" name="rank" placeholder="Player Rank" required /&gt;&lt;br&gt;&lt;br&gt; &lt;input type="reset" value="Cancel" class="jqmClose" /&gt;&lt;input type="submit" value="Submit" /&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;/form&gt; &lt;/div&gt; &lt;script src="script.js"&gt;&lt;/script&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p></p> <p>Json file:</p> <pre><code> { "playerList" : [ { "player":1, "name":"Barot Bellingham", "score":10000, "rank":5 }, { "player":2, "name":"Jonathan G. Ferrar II", "score":50, "rank":1 }, { "player":3, "name":"Hillary Hewitt Goldwynn-Post", "score":100000, "rank":100 } ]} </code></pre> <p>And lastly the javascript so far:</p> <pre><code> $(document).ready(function() { $.getJSON('data.json', function(data){ var template = $('#playerTpl').html(); var html = Mustache.to_html(template, data); $('#playersUL').html(html); /*for (var i = 0, i &lt;= data.playerList.length, i++) { for (key in data.playerList[i].player){ alert(data.playerList[i].player; } };*/ $('#playersUL').on("click", 'a[name=modal]', function(e) { e.preventDefault(); console.log('1'); /*$.each(data.playerList, function(key, val) { console.log(val.player); playerArray.push(val);*/ });//populatePlayerNum(); $('#addPlayer').jqmShow({ }); }); }); //getJSON $('#addPlayer').jqm({ trigger: '#addBTN' }); }); </code></pre> <p>and lastly so you can get the popup working correctly and formatting the way i have it the css:</p> <pre><code> .clear { clear: both; } h1 { margin: 0; padding: 0; } #mainContent { width: 50%; margin: 0 auto; padding: 30px; background: #0CF; box-shadow: #666 0 5px 10px; } #mainContent h1 { margin-bottom: 20px; } ul { float: left; margin: 0; padding: 0; list-style: none; } ul li { float: left; width: auto; margin-right: 25px; padding: 15px; border: 1px solid #666; background: #ccc; box-shadow: #666 2px 5px 5px; } a { float: left; margin: 5px; padding: 5px 10px 5px 10px; text-align: center; color: #fff; text-decoration: none; background: #666; border: 1px solid #000; } #addBTN { } a:hover { background: #009; } form { margin-top: 15px; } #addPlayer { } label { width: 100px; } input[type='reset'], input[type='submit'] { display: block; float: left; margin-right: 5px; padding: 5px 10px 5px 10px; text-align: center; color: #fff; text-decoration: none; background: #666; border: 1px solid #000; cursor: pointer; } input[type='reset']:hover, input[type='submit']:hover { background: #009; } .addplayerStyle { display: none; position: absolute; top: 50px; left: 600px; z-index: 2; width: 300px; padding: 20px; background: #ccc; border: 1px solid #000; } .jqmOverlay { background-color: #000; } </code></pre> <p>I hope it is clear on what I am looking for right now. I am not looking to post to a database yet or anything just to add the data to the form. I appreciate your help and thanks ahead of time.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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