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

Popular posts from this blog

java - Jmockit String final length method mocking Issue -

-
using jmockit 1.2 jar, trying mock string's length method getting unexpected invocation exception: failed: test java.lang.illegalstateexception: missing invocation mocked type @ point; please make sure such invocations appear after declaration of suitable mock field or parameter @ stringdemo.testa$1.<init>(testa.java:17) @ stringdemo.testa.test(testa.java:13) i using testng: @test public void test() throws exception { new expectations() { @mocked("length") string astring; { astring.length(); result = 2; } }; system.out.println(a.showa("test")); } } actual class a: public class { public static int showa(string str){ int a= str.length(); return a; } } this wrong way of recording expected results. shouldn't mock , record string's length() method, record showa() instead. here solution @suppresswarnings("unused...
Read more

What is the difference between data design and data model(ERD) -

-
i have google question , find answer in day. know, data design many many table have list column,and mark pk , fk. why er-diagram have find this? data design process of designing database. main output of data design detailed logical data model of database. some people data design includes of needed logical , physical design choices , physical storage parameters needed generate design in data definition language. technically, database analysis, database analysts (dbas) trained do. while person can both data design , database analysis, these 2 different tasks. data design models data. database analysis takes model , applies 1 or more database engines (relational, hierarchical, nosql). a logical data model 1 of main outputs of data design. data model represented entity relationship diagram, or er diagram.
Read more

ios - Can NSManagedObject conform to NSCoding -

-
i need transfer single object across device. right converting nsmanagedobject dictionary , archiving , sending nsdata. upon receiving unarchiving it. transfer nsmanagedobject archiving , unarchiving instead of creating intermediate data object. @interface test : nsmanagedobject<nscoding> @property (nonatomic, retain) nsstring * title; @end @implementation test @dynamic title; - (id)initwithcoder:(nscoder *)coder { self = [super init]; if (self) { self.title = [coder decodeobjectforkey:@"title"]; //<crash } return self; } - (void)encodewithcoder:(nscoder *)coder { [coder encodeobject:self.title forkey:@"title"]; } @end nsdata *archivedobjects = [nskeyedarchiver archiveddatawithrootobject:testobj]; nsdata *objectsdata = archivedobjects; if ([objectsdata length] > 0) { nsarray *objects = [nskeyedunarchiver unarchiveobjectwithdata:objectsdata]; } the problem above code is. crashes @ self.title in initwithcoder sa...
Read more