javascript - Preload form with json data -
i still learning javascript, jquery , comes it. personal test learning developing program pull php server. right pulling hard coded json file , preloading page that. user able click edit button populated , provide popup preloaded form sections data (this part need assistance with). using jquery 1.9.1 migrate , mustache.js , jqmodal handle form popup here code:
html:
<!doctype html> <html> <head> <title></title> </head> <link href='css.css' rel='stylesheet' type='text/css'> <script id="playertpl" type="text/template"> {{#playerlist}} <li id="player{{player}}"> <h3>player: {{player}}</h3> <p><strong>name:</strong> {{name}}</p> <p><strong>score:</strong> {{score}}</p> <p><strong>rank: </strong>{{rank}}</p> <a href="" class="editbtn" name="modal">edit</a> <a href="" class="deletebtn">delete</a> </li> {{/playerlist}} </script> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jqmodal/r14/jqmodal.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script> <body> <div id="maincontent"> <h1>prototype example:</h1> <ul id="playersul"> </ul> <a href="#" id="addbtn">add player</a> <div class="clear"></div> <div class="addplayerstyle" id="addplayer"> <form id="myform"> <label>player number</label> <select id="optionlist" name="player" required> <option value="1">1</option> <option value="1">2</option> <option value="1">3</option> <option value="1">4</option> </select><br><br> <label>player name</label> <input type="text" name="name" placeholder="player name" required /><br><br> <label>player score</label> <input type="number" name="score" placeholder="player score" required /><br><br> <label>player rank</label> <input type="number" name="rank" placeholder="player rank" required /><br><br> <input type="reset" value="cancel" class="jqmclose" /><input type="submit" value="submit" /> <div class="clear"></div> </form> </div> <script src="script.js"></script> </div> </body> json file:
{ "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 } ]} and lastly javascript far:
$(document).ready(function() { $.getjson('data.json', function(data){ var template = $('#playertpl').html(); var html = mustache.to_html(template, data); $('#playersul').html(html); /*for (var = 0, <= data.playerlist.length, i++) { (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' }); }); and lastly can popup working correctly , formatting way have css:
.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; } { 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; } i hope clear on looking right now. not looking post database yet or add data form. appreciate , ahead of time.
Comments
Post a Comment