Tuesday, January 30, 2018

Dynamically update PHP generated elements after Ajax login

By Hường Hana 10:00 AM , , Leave a Comment

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.

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment