I load content on the page (comments) via Ajax infinite scroll, and i use Ajax to login/out as well. Now on success login i want to update reply or like buttons depending on what that user has liked or disliked.
The simple method is not to use Ajax for login/out or to refresh the page anyway because i check what the user has liked/disliked with PHP and if the page dose not get refreshed those scripts do not fire again.
But if i refresh the page all the comments loaded are gone and the user needs to scroll again. One solution that i found is to use the load() method to refresh the divs with the scripts but I'm not sure that is the way to go. So basically how do i dynamically update elements on the page after Ajax login that are generated from PHP?
Let me explain better:
Let's say i have a PHP script that makes this check:
<?PHP $q = $db->query("SELECT who_liked FROM likes WHERE(com_liked = com_id AND who_liked = curent_user_id)"); //actual query uses prepared statments, this is for example $count = $q->rowCount(); if($count > 0){ echo "<style> #like_btn{background-color: green;} </style>"; } ?> So if the user is not logged in all the like/dislike buttons are gray. Now the login is done through Ajax, the user uses email/user_name and password to log in, a login sessions is started the user name, profile image are selected from the data base based on the user id and are displayed on the page/navBar. Now i need to make a check to see what that user has liked and so on, should i make this check in the Ajax response? should i use load() to refresh the like/dislikes of the comments and the script that check that? Should i put all the php scripts in the Ajax response so they fire on success login?(witch i think is the way to go)
Ex:
,success: function(response) {// php scripts with the sql query for all the checks} 1 Answers
Answers 1
Try below code,
Send a JSON encoded array on Login response,
<?PHP $q = $db->query("SELECT who_liked FROM likes WHERE(com_liked = com_id AND who_liked = curent_user_id)"); //actual query uses prepared statments, this is for example $count = $q->rowCount(); if($count > 0){ $response = ['success' => true]; } else { $response = ['success' => true]; } echo json_encode($response); ?> Use below CSS Script,
<style type="text/css"> .like_btn{ background-color: green; } .like_btn.liked { background-color: orange; } .like_btn.not-liked { background-color: grey; } </style> Add
not-liked
use CSS class for not liked buttons as below on PHP page load,
<button class="like_btn not-liked">Like Button</button> then you will be able to identify the liked/ disliked and not liked buttons.
Use
liked
CSS class for liked buttons. So at any time you will be able to toggle the buttons using JavaScript.
<button class="like_btn liked">Like Button</button> Finally the JQuery AJAX script,
<script type="text/javascript"> $.ajax({ url: '/path/to/file', type: 'default GET (Other values: POST)', dataType: 'json', data: {param1: 'value1'}, success:function(res) { // On Login Success if(res.success) { $('.like_btn').toggleClass('not-liked'); } } }); </script> Feel free to leave comments, if you need any further clarifications.
0 comments:
Post a Comment