php - Keeping button state on page refresh? -

-

i have button on index.php page increments , changes "liked" when clicked. great. problem is, when reload page, "liked" button goes original "like" state.

my question is, how keep button "liked" on page refresh?

i'm assuming in likes table have set liked_unliked '1' when button clicked. how jquery changes state of button know there '1' meaning user has clicked 'like' on image, keep "liked" state on page refresh?

here index.php :

<!doctype html> <?php session_start(); ?> <html> <head>  <?php     include('header.php'); ?>  <script> //send info like_button.php db $(document).ready(function(){  $(".button").click(function(){   $.ajax({url:"liked_button.php",success:function(result){   //do nothing   }});  }); }); //change button when clicked $(document).ready(function(){   $(".button").click(function(){     var t=$(this);          t.replacewith("<button type='button' class='button_pressed'>liked</button>");      }); }); //increment counter when button clicked function increase(t) {   t=$(t).parent().next();       t.val(parseint(t.val())+1);  } </script>  </head> <link type="text/css" rel="stylesheet" href="index.css"> <body>  <?php //dispay images users upload $conn = mysqli_connect("localhost","root","") or die ("no sqli");     mysqli_select_db($conn, "sample") or die ("no db");  $sqli = "select * `photos` order `id` desc";  $result = mysqli_query($conn, $sqli) or die ("no query");  while($row = mysqli_fetch_assoc($result))      { $username = $row['username']; $title = $row['title']; $description = $row['description']; $image_name = $row['image_name']; $image_id = $row['image_id']; $random_directory = $row['random_direc']; $date = date('y-m-d');   $image_info = "http://localhost/splindr_2.0/photos/$random_directory/$image_name";  //echo content in content wrapper  echo "<div id=contentwrapper'>           <div class='photo'>               <div class='actual_image'>                  <img src='$image_info'>               </div>                         <div class='like_system'><button onclick='increase(this)' type='button' class='button' id='button' name='button'>like</button></div>                                         <input type='text' name='total_likes' id='total_likes' value='0'>                                        <div class='twitter'><button type='button'  class='twitter_button' name='twitter_button' id='twitter_button'>                                                             <a style='color: #2e4987;text-decoration:none' href='http://www.twitter.com/share?url=$image_info&hashtags=splindr, checkthisout'>share on twitter</a></button>                                        </div>                                        <div class='trash_bin'>                                           <button type='button' class='delete_button' name='delete_button' id='delete_button'>                                              <a style='text-decoration:none;color: #2e4987' href='delete_post.php'>delete</a>                                           </button>                                        </div>                     <div class='info_wrapper'>                        <div class='info_header'>title: $title &nbsp by: $username &nbsp   date: $date</div>                            <div class='description'>$description</div>                     </div>               </div>           </div>       </div>";//end contentwrapper  }  ?>   </body> </html>

my likes table:

create table if not exists `likes` (      `id` int(20) not null auto_increment,      `image_id` varchar(300) not null,      `liked_by` varchar(50) not null,      `liked_unliked` enum('0','1') not null default '0',       primary key (`id`),     ) engine=innodb default charset=latin1 auto_increment=1;

you keeping track of pressed button assume in liked_by field. can add user's likes session. way if refresh page have user_id in likes session , adjust css button accordingly.

    <?php    $_session['likes'] = array(       'img1' => 'user2, user3',       'img2' => 'user2',       'img3' => 'user2','user5',      );      $likes = $_session['likes'] ;      foreach($likes $key => $like){        $likearray = explode(',', $like); //convert string of user ids array        if(in_array($userid, $likearray)){         //user has image id $key       }else{        //user has not       }       }      ?>

Comments

Post a Comment

Popular posts from this blog

c++ - OpenCV Error: Assertion failed <scn == 3 ::scn == 4> in unknown function, -

-
i read alot other solution still confused should mine... #include <opencv2/objdetect/objdetect.hpp> #include <opencv2/highgui/highgui.hpp> #include <opencv2/imgproc/imgproc.hpp> #include <iostream> #include <stdio.h> using namespace std; using namespace cv; int main(int argc, const char** argv) { //create cascade classifier object used face detection cascadeclassifier face_cascade; //use haarcascade_frontalface_alt.xml library face_cascade.load("haarcascade_frontalface_alt.xml"); //setup video capture device , link first capture device videocapture capturedevice; capturedevice.open(0); //setup image files used in capture process mat captureframe; mat grayscaleframe; //create window present results namedwindow("outputcapture", 1); //create loop capture , find faces while (true) { //capture new image frame capturedevice >> captureframe; ...
Read more

php - render data via PDO::FETCH_FUNC vs loop -

-
i've been using 2 methods render data. the first one: function name($id,$name){ return '<div id="'.$id.'">'.$name.'</div>'; } echo implode($pdo->query("select id,name user")->fetchall(pdo::fetch_func,'name')); the second one: $users = $pdo->query("select id,name user")->fetchall(pdo::fetch_obj); foreach($users $user){ echo name($user->id,$user->name); } i don't understand how pdo::fetch_func works. tried figure out. however, not well-documented. could please explain fetch mode? , also, 1 performs better? thank you. both methods wrong , have learn how use templates , how separate business logic presentation logic. $users = $pdo->query("select id,name user")->fetchall(pdo::fetch_obj); tpl::assign('users', $users); is code business logic part. then in template <?php foreach $users $row): ?> <div id="<?=$...
Read more

The canvas has been tainted by cross-origin data in chrome only -

-
uncaught securityerror: failed execute 'getimagedata' on 'canvasrenderingcontext2d': canvas has been tainted cross-origin data i getting above error in chrome. code(following) works fine in mozilla. have not corss domain issue. why above error in chrome? var wheel_canvas, wheel_context, can_w, can_h, wheel_grd; var large_radius = 160; var small_radius = 120; var wheel_canvas = document.getelementbyid('wheel_canvas'); var wheel_context = wheel_canvas.getcontext('2d'); var can_w = $(wheel_canvas).width(); var can_h = $(wheel_canvas).height(); var centerx = can_w / 2, centery = can_h / 2; var wheel_grd = null; test('#ff0000'); function test(hex) { $('#clrpicker').css({'left': 210, 'top': 210 }); inverted = hexbw(hex); $('#color_val_show').val(hex); current_color_hex_val_selected = hex; $('#color_val_show').css({'color':inverted,'background':hex}); fillgradient...
Read more