Like Dislike Function AJAX - javascript

I have this jQuery AJAX Like Dislike Script
<script>
$(function(){
var PostID = <?php echo $PostID; ?>;
$('.like-btn').click(function(){
$('.dislike-btn').removeClass('dislike-h');
$(this).addClass('like-h');
$.ajax({
type:"POST",
url:"rate.php",
data:'Action=LIKE&PostID='+PostID,
success: function(){
}
});
});
$('.dislike-btn').click(function(){
$('.like-btn').removeClass('like-h');
$(this).addClass('dislike-h');
$.ajax({
type:"POST",
url:"rate.php",
data:'Action=DISLIKE&PostID='+PostID,
success: function(){
}
});
});
});
</script>
Now I want to transform this script to multi post Like Dislike System.
How i can do this? HTML will look like this:
Like
Dislike
LIKE/DISLIKE will be action, 1 will be ID of post to like/dislike. Thanks

you can make something like this. Each post it is each div with postId and two controls inside (like and dislike buttons). When you click like - function will get post id and send with post to server. You must to check ajax part of function.
$(function () {
$('.like').click(function () { likeFunction(this); });
$('.dislike').click(function () { dislikeFunction(this);});
});
function likeFunction(caller) {
var postId = caller.parentElement.getAttribute('postid');
$.ajax({
type: "POST",
url: "rate.php",
data: 'Action=LIKE&PostID=' + postId,
success: function () {}
});
}
function dislikeFunction(caller) {
var postId = caller.parentElement.getAttribute('postid');
$.ajax({
type: "POST",
url: "rate.php",
data: 'Action=DISLIKE&PostID=' + postId,
success: function () {}
});
}
<div class="post" postid="10">
<input type="button" class='like' value="LikeButton" /> </input>
<input type="button" class='dislike' value="DislikeButton"> </input>
</div>
If you have some questions or need more help you can ask me :)

If you want more than one post per page you can do this:
function send(action, id)
{
var opposite;
opposite = action === 'like' ? 'dislike' : 'like';
$('#' + opposite + '-' + id).removeClass(opposite + '-h');
$('#' + action + '-' + id).addClass(action + '-h');
$.ajax({
type:"POST",
url:"rate.php",
data:'Action=' + action + '&PostID=' + id,
success: function(){
}
});
}
Now you only need to attach the handlers properly ($PostID must be different for every post in a loop):
<a href="#"
id="like-<?php echo $PostID; ?>"
onclick="send('like', <?php echo $PostID; ?>)">Like</a>
<a href="#"
id="disloke-"<?php echo $PostID; ?>"
onclick="send('dislike', <?php echo $PostID; ?>)">Dislike</a>
That's just a layout of the code, there may be defects. It's pretty different from where we started, so only you can actually test it and see where it need refinement.

Related

How refresh particular div without reload whole page?

<div id="success_hold">
<?php
if($row['mandate_end']!=date('Y-m-d') && $row['job_position']=='unhold')
{
echo '<span class="badge badge-success">Open</span>';
}
else
{
echo '<span class="badge badge-warning">Hold</span>';
}
?>
</div>
<script>
$(document).ready(function(){
var flag = 1;
$(".hold").click(function(){
job_id = this.id;
if(flag == 1)
{
$.ajax({
type:"POST",
data:{"job_id":job_id},
url:"<?php echo base_url(); ?>pausehold",
success:function(data){
$("#success_hold").load("#success_hold");
}
});
flag = 0;
}
else
{
$.ajax({
type:"POST",
data:{"job_id":job_id},
url:"<?php echo base_url(); ?>resumehold",
success:function(data){
$("#success_hold").load("#success_hold");
}
});
flag = 1;
}
});
});
</script>
I have div where id="success_hold". Now, what happens when I click on class="hold" I am updating my data. Now, I want to refresh my <div id="success_hold"> without reload whole page where I am using .load() function But the problem is that when I use .load() the function shows the whole page in success_hold. So, How can I fix this issue? I want to refresh only success_hold.
Thank You
The problem is because load() is used to make another AJAX request and place the a portion of the HTML retrieved from that request in the target element.
As you're already making an AJAX request to get the data, which is presumably HTML, you simply need to append() data to the container.
Also note that the only difference between the two sides of your condition is the URL the request is sent to, so you can easily DRY this code up:
$(document).ready(function() {
var flag = true;
$(".hold").click(function() {
var url = '<?php echo base_url(); ?>' + (flag ? 'pausehold' : 'resumehold');
flag = !flag;
$.ajax({
type: "POST",
data: { job_id: this.id },
url: url,
success: function(data) {
$("#success_hold").append(data);
}
});
});
});
If data contains the entire page, then you should change that PHP file to return only the relevant HTML as it will help to speed up the request. If, for whatever reason, you can't do that then you can extract the required element from the response like this:
$("#success_hold").append($(data).find('#success_hold'));
success:function(data){
$("#success_hold").load("#success_hold");
}
This is your success method in ajax. You want to pur the content of data into your div #success_hold ?
If you want that, just do this :
success:function(data){
$("#success_hold").html(data);
}

Change the data value of a link and fire another function triggered by the new data value

I'm trying to build a simple Like/Unlike button but I can't manage to to make it with the Unlike button because the function just won't fire.
Tried with .data and .attr.
HTML+PHP:
<span id="<?php echo $quote_id; ?>_count"><?php echo $likes_count; ?> likes</span>
<br>
<a class="like_button" data-q="<?php echo $quote_id; ?>" data-action="like" href="#">Like</a>
JS:
$(document).ready(function(){
$('.like_button[data-action="like"]').on('click',function(event){
event.preventDefault();
var q = $(this).attr('data-q');
$.ajax({
url: 'http://localhost/q/functions/l.php',
method: 'get',
data: {qi: q, a: "1"},
dataType: "json",
success: function(data)
{
$('#' + q + '_count').text((data.likes) + ' likes');
$('.like_button[data-action="like"]').data('action', 'unlike');
}
});
});
$('.like_button[data-action="unlike"]').on('click',function(event){
event.preventDefault();
var q = $(this).attr('data-q');
$.ajax({
url: 'http://localhost/q/functions/l.php',
method: 'get',
data: {qi: q, a: "0"},
dataType: "json",
success: function(data)
{
$('#' + q + '_count').text((data.likes) + ' likes');
$('.like_button[data-action="unlike"]').data('action', 'like');
}
});
});
});
Try this:
$(document).on('click', '.like_button', function(event){
if($(this).data('action') === 'like'){
// function for like button
} else if ($(this).data('action') === 'unlike'){
// function for unlike button
}
});
First, you don't need two onclick events. Also, cache $(this) so you don't have to re-query the DOM. Finally, try this code but the one in the snippet I had to remove all php and ajax from it, it's just to demonstrate how you could go about it with just one handler. hope it helps
$('.like_button').on('click',function(event){
var $this = $(this);
var action = $this.data('action');
event.preventDefault();
var q = $(this).attr('data-q');
$.ajax({
url: 'http://localhost/q/functions/l.php',
method: 'get',
data: {qi: q, a: action === 'like' ? "1":"0"},
dataType: "json",
success: function(data)
{
$('#' + q + '_count').text((data.likes) + ' likes');
$this.data('action', action === 'like' ? 'unlike':'like');
}
});
});
$('.like_button').on('click',function(event){
var action = $(this).attr('data-action');
console.log(action);
event.preventDefault();
$(this).attr('data-action', action === 'like' ? 'unlike':'like');
});
a[data-action="like"]{
background: gray;
color: lightgray
}
a[data-action="unlike"]{
background: blue;
color: lightblue
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="<?php echo $quote_id; ?>_count"><?php echo $likes_count; ?> likes</span>
<br>
<a class="like_button" data-q="<?php echo $quote_id; ?>" data-action="like" href="#">Like</a>

Ajax request to php only works once per pageload

I have seen a few of these questions post on here but none of them are working for me. I have a favourite button that i would like my users to press to favourite things. The ajax request is working just fine and the favourite gets stored in the database but i can only use it once then i have to refresh the page to fav/unfav the item. The code for the button is:
<div id="fav-icon">
<?php
// Function checks if user has fav'd the item.
$isFav = favourite($user->id) ? 'un-fav' : 'fav';
?>
<i id="<?php echo $item->id; ?>" class="<?php echo $isFav; ?>"><span class="font-12 fa fa-heart"></span></i>
</div>
Jquery/Ajax
$('.fav').click(function(e){
var con = $(this).attr('id');
$.ajax({
url: 'fav.php',
type: 'POST',
async: true,
data:{
'fav' : con
},
success:function(){
$('#fav-icon').load(document.URL + ' #fav-icon');
}
});
});
$('.un-fav').click(function(e){
var con = $(this).attr('id');
$.ajax({
url: 'fav.php',
type: 'POST',
async: true,
data:{
'fav' : con
},
success:function(){
$('#fav-icon').load(document.URL + ' #fav-icon');
}
});
});
So this works but only once! I have tried a couple of different functions to try make this work including:
$('.fav').live('click', function(e) {
Can anyone tell me where i am going wrong and the correct method to get my button to work multiple times?
Use $(document).on() click event
$(document).on('click','.fav', function(e) {
...
});

Uncaught ReferenceError: function is not defined jQuery

I am trying to call jQuery function when button is clicked. But I am getting the error as follows:
Uncaught ReferenceError: update_question_ajax is not defined
HTML:
<button type="button" class="update-question-<?php echo $i; ?> button" onclick="update_question_ajax(<?php echo $i; ?>)" style="outline: 0 none;"><?php _e('Update') ?></button>
jQuery:
$(function(){
function update_question_ajax(id)
{
var test = $('.edit-question-' + id + ' input[name="translated"]');
var editedQuestionId = $('#question-id-'+id).val();
var editedQuestionObj = $('.edit-question-' + id + ' input[name="translated"]').val();
var modalObj = $('#myQuestionModal');
$.ajax({
type: "POST",
url: "<?php echo base_url('admin/question/admin_edit_question'); ?>",
data:{
edited_question: editedQuestionObj,
question: editedQuestionId
},
success: function(){
modalObj.dialog('close');
modalObj.html('');
},
complete: function(){
//window.location.reload(true);
}
});
return false;
}
});
I appreciate if you guys help me out about this.
Thank you!
Seems to be a scope issue. You've defined the function essentially inside another function. You should also try to avoid placing php inside javascript. Technically it works, but isn't really good form.
Removed the inline click handler.
<button type="button" class="update-question button" data-id="<?php echo $i; ?>" style="outline: 0 none;"><?php _e('Update') ?></button>
Then we create a self executing function, pass jQuery in as $ which gives everything inside the ability to use "$" as jQuery. Then define your click handler for the button and use a data attribute to pass the id rather than using PHP mixed in your JS and placing it in the DOM. Just feels a little cleaner. Also, make sure you are loading jquery / other scripts at the bottom of your document, just before the close body. This way you don't need a .ready because your document will already be loaded.
(function($){
// Define click handler.
$('button.update-question').on('click', function(e){
e.preventDefault();
var id = $(this).data('id');
update_question_ajax(id);
});
function update_question_ajax(id) {
var test = $('.edit-question-' + id + ' input[name="translated"]'),
editedQuestionId = $('#question-id-'+id).val(),
editedQuestionObj = $('.edit-question-' + id + ' input[name="translated"]').val(),
modalObj = $('#myQuestionModal');
$.ajax({
type: "POST",
url: "YOURURL",
data:{
edited_question: editedQuestionObj,
question: editedQuestionId
},
success: function(){
modalObj.dialog('close');
modalObj.html('');
},
complete: function(){
//window.location.reload(true);
}
});
}
}(jQuery));
You should move the function definition outside of the document.ready callback ($(function() { ... }):
function update_question_ajax(id) {
var test = $('.edit-question-' + id + ' input[name="translated"]');
var editedQuestionId = $('#question-id-'+id).val();
var editedQuestionObj = $('.edit-question-' + id + ' input[name="translated"]').val();
var modalObj = $('#myQuestionModal');
$.ajax({
type: "POST",
url: "<?php echo base_url('admin/question/admin_edit_question'); ?>",
data:{
edited_question: editedQuestionObj,
question: editedQuestionId
},
success: function(){
modalObj.dialog('close');
modalObj.html('');
},
complete: function(){
//window.location.reload(true);
}
});
return false;
}
Everything you put inside the $(function() {} is executed when the DOM is ready but is private to its scope.
If on the other hand you want to use unobtrusive javascript, then get rid of this onclick attribute from your markup:
<button type="button" class="button update-question-<?php echo $i; ?>" dtaa-id="<?php echo $i; ?>" style="outline: 0 none;"><?php _e('Update') ?></button>
and then use the document ready callback to unobtrusively subscribe to the .click event of those buttons:
$(function() {
function update_question_ajax(id) {
var test = $('.edit-question-' + id + ' input[name="translated"]');
var editedQuestionId = $('#question-id-'+id).val();
var editedQuestionObj = $('.edit-question-' + id + ' input[name="translated"]').val();
var modalObj = $('#myQuestionModal');
$.ajax({
type: "POST",
url: "<?php echo base_url('admin/question/admin_edit_question'); ?>",
data:{
edited_question: editedQuestionObj,
question: editedQuestionId
},
success: function(){
modalObj.dialog('close');
modalObj.html('');
},
complete: function(){
//window.location.reload(true);
}
});
return false;
}
$('.button').click(function() {
var id = $(this).data('id');
return update_question_ajax(id);
});
});

Calling js function on button click isn't working

Any reason why this isn't running when clicked? I can't seem to figure it out.
<button id="button-container-like" onclick="rate($(this).attr(\'id\'))"><span class="thumbs-up"></span>Like</button>
<script>
function rate(rating){
var data = 'rating='+rating+'&id=<?php echo $eventId; ?>&userid56=<?PHP echo $userid55; ?>';
$.ajax({
type: 'POST',
url: 'includes/rate.php', //POSTS FORM TO THIS FILE
data: data,
success: function(e){
$(".ratings").html(e); //REPLACES THE TEXT OF view.php
}
});
}
</script>
here you go:
<button id="button-container-like" ><span class="thumbs-up"></span>Like</button>
<script>
jQuery(document).ready(function () {
$("#button-container-like").click(function() {
rate($(this).attr("id"));
});
function rate(rating) {
var data = 'rating=' + rating + '&id=<?php echo $eventId; ?>&userid56=<?PHP echo $userid55; ?>';
$.ajax({
type: 'POST',
url: 'includes/rate.php', //POSTS FORM TO THIS FILE
data: data,
success: function(e) {
$(".ratings").html(e); //REPLACES THE TEXT OF view.php
}
});
}
});
</script>
If there's nothing else going on in this code, then remove the slashes from your onclick code. They are unnecessary and cause an error.
onclick="rate($(this).attr('id'))"

Categories