javascript - How would I make load more button work in a case like this? -
i've tried using php , jquery try , establish way in make code work... envision whenever user clicks load more button go database , load in next ten data each time click until there no more data added in case message replaces input button saying "no more posts found". page not refresh instead stays in place load rest of data.
header.php
<?php include('connection.php'); ?> <?php session_start(); // checks if user logged in, if not redirect them if($_session['username'] == ""){ header('location: index.php'); } ?> <!doctype html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"> <title>men's volleyball</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="to give male volleyball players hope, ensure aren't left out" /> <meta name="keywords" content="volleyball, men, sports, sport, scholarships, opportunity" /> <link rel="stylesheet" type="text/css" href="css/main.css" /> <script src="jquery-1.11.1.min.js" type="text/javascript"></script> <script src="load-more.js" type="text/javascript"></script> <script type="text/javascript"> /*function yhandler(){ var wrap = document.getelementbyid('left-content'); var contentheight = wrap.offsetheight; // gets page contents var yoffset = window.pageyoffset; // vertical scroll position var y = yoffset + window.innerheight; if(y >= contentheight){ wrap.innerhtml += '<li class="newdata" style="background: #09f; margin: 10px 0px;">new</li>'; } var status = document.getelementbyid('status'); status.innerhtml = contentheight+" | "+y; } window.onscroll = yhandler;*/ </script> </head> <body> <div class="wrapper"> <div class="header" style="<?php echo $display_header;?>"> <ul class="nav-bar"> <a href="profile.php"><li>profile</li></a> <a href="gallery.php"><li>gallery</li></a> <a href="message.php"><li>messages</li></a> <a href="college.php"><li>colleges</li></a> <a href="coach.php"><li>coaches</li></a> <div class="right-nav"> <a href="logout.php"><li>logout</li></a> </div> </ul> </div> as can see i've commented out code tried using.
show_post.php
<?php $eachposts = $con->query("select * `posts` order `id` desc"); while($result = mysqli_fetch_assoc($eachposts)){ // if video empty echo line if(($result["video"] == "") || ($result["video"] != "")){ $account_assoc = $result["account_assoc"]; $result2 = mysqli_fetch_assoc($con->query("select * `accounts` username='$account_assoc' or email='$account_assoc'")); if($result2["username"] == ""){ $identifier = $result2["firstname"]; }else{ $identifier = $result2["username"]; } if($result2['image'] == ""){ $image = "http://jnvbaghmara.nic.in/images/staff/blank.png"; }else{ $image = 'data:image/jpeg;base64,'.base64_encode($result2['image']); } //change name of echoed dislike variable if greater 1 if($result['dislikes'] > 1){ $dislike = "<label style='color: red;'>".format_num($result['dislikes'])."</label> dislikes"; }else{ $dislike = "<label style='color: red;'>".format_num($result['dislikes'])."</label> dislike"; } //change name of echoed variable if greater 1 if($result['likes'] > 1){ $like = "<label style='color: #0096f3;'>".format_num($result['likes'])."</label> likes"; }else{ $like = "<label style='color: #0096f3;'>".format_num($result['likes'])."</label> like"; } echo '<li id="postitems"> <h4><img src="'.$image.'"/> <label>'.$identifier.'</label></h4> <div class="all-content"> '; //if video present echo here if($result["video"] != ""){ echo '<iframe width="90%" height="90%" src="https://www.youtube.com/embed/'.$result["video"].'" frameborder="0" allowfullscreen></iframe><br />'; } //else echo specific line of clone else{ echo '<p style="color: #555; font-size: 12px;">no video available!</p>'; } echo ' <label style="color: #777;"> '.$like.' </label><label style="color: #777;"> | '.$dislike.'</label><label style="color: #777;"> | 2 comment</label> <p>'.$result["text"].'</p> </div></li>'; } } echo '<li> <div class="all-content"> <form method="post"> <input type="submit" name="load" value="load more" class="load_more_button"/> </form> </div> </li>'; ?> this call data , echo out html code
if there anyway code write code aids me what use, table called posts yea please reply possible.
in order load more data without reloading page, need page able make asynchronous http request in javascript, i.e. need learn how make ajax calls. in addition adding js making ajax calls, you'd need create additional php file receive ajax request, make db queries, , echo desired data. want script return json-formatted data.
i see "load more" button inside form. if in fact going submit form in order make post request current page, solution in fact reloading page. when html forms make http requests, requests not "asynchronous". make method work purpose fragile solution.
so,
- learn how make ajax calls.
- learn how php file output json-formatted data has been fetched database
- apply learnings project!
some things have solve for:
- how js keep track of results has fetched, i.e. results needs fetch next?
- how pass variables (i.e. denoting results fetch) new php script?
- how new php script communicate js there no more results fetched?
if need more community, consider trying out suggestions (i.e. try learning how make ajax calls , making php script returns json-formatted data) , ask more questions specific problem whenever hit road bump.
Comments
Post a Comment