javascript - Blog comments that update upon submitting -
i'm going try , clear possible. have code not sure how clone comments , insert new comments inputted text user piece of code.
<!doctype html> <!-- comment, above indicates formal document type (like file extension does, part of document) --> <html> <head> <!-- head section things aren't visible on page, title --> <title>da blog</title> <!-- we'll put lots more in here later --> <link rel="stylesheet" type="text/css" href="jquery.css" /> <script src="jquery.js"></script> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> </head> <body> <!-- body visible stuff goes --> <br/><br/><br/> <hr> <h1>my uber fake blog</h1> <hr> <p> wall of text uber fake blog!!!! wall of text uber fake blog!!!! wall of text uber fake blog!!!! wall of text uber fake blog!!!! wall of text uber fake blog!!!! wall of text uber fake blog!!!! wall of text uber fake blog!!!! wall of text uber fake blog!!!! wall of text uber fake blog!!!! wall of text uber fake blog!!!! wall of text uber fake blog!!!! wall of text uber fake blog!!!! wall of text uber fake blog!!!! wall of text uber fake blog!!!! wall of text uber fake blog!!!! wall of text uber fake blog!!!! wall of text uber fake blog!!!! wall of text uber fake blog!!!! wall of text uber fake blog!!!! wall of text uber fake blog!!!! wall of text uber fake blog!!!! wall of text uber fake blog!!!! wall of text uber fake blog!!!! wall of text uber fake blog!!!! wall of text uber fake blog!!!! wall of text uber fake blog!!!! wall of text uber fake blog!!!! wall of text uber fake blog!!!! wall of text uber fake blog!!!! </p> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">add comment</h3> </div> <div class="panel-body"> <form id="comment_form"> <div class="form-group"> <input type="textbox" id="comment_name" placeholder="name" class="input-large form-control"/> </div> <div class="form-group"> <textarea rows="4" cols="60" id="comment" placeholder="comment" class="form-control"></textarea> </div> <div class="form-group"> <button id="post" class="btn" onclick="myfunction()">post</button> </div> </form> </div> </div> <div id="comment_list"> <div class="panel panel-default comment"> <div class="panel-heading">etomai</div> <div class="panel-body"> comment. think post long. </div> </div> <div class="panel panel-default comment"> <div id="commentinblog" class="panel-heading">etomai</div> <div class="panel-body"> comment. think post long. </div> </div> </div> </div> </div> </body> </html>
i have tried see if can @ least start getting somewhere on getting started.
function myfunction() { // create new, plain <span> element var sp1 = document.createelement("div"); // reference element, before want insert element var sp2 = document.getelementbyid("commentinblog"); // reference parent element var parentdiv = sp2.parentnode; // insert new element dom before sp2 parentdiv.insertbefore(sp1, sp2); }
but can't seem quite wrap head around how works. w3schools site helped me understand basic it's still difficult concept trying wrap head around. can me figure out how clone user inputted comments , text , update it. also, if can me understand better.
you mixing default javascript , jquery in code not work. try this:
function myfunction() { var $newdiv = $('<div class="panel panel-default comment"><div class="panel-heading">' + $('#comment_name').val() + '</div><div class="panel-body">' + $('#comment').val() + '</div></div>'); // if want new comment on top of old ones, use line $newdiv.prependto('#comment_list'); // if want new comment below old ones, use line $newdiv.appendto('#comment_list'); }
Comments
Post a Comment