I am facing 3 Issues in Like/Dislike jquery plugin for comments.
Table structure
id - like - dislike - uid - comid Where (uid is session id) and (comid is comment's id from comments table)
Like/Dislike Function is for logged in users, any user can like or dislike a comment. After liked or disliked user can unlike or remove disliked
Now when i Click on Like/dislike button, it increases the number of likes or dislikes but
1 - If i click on like, it increase the number and update the database. but instead, if i click on Dislike, its only decreasing the number of like and increasing the dislike count on the page but not updating the database.
2 - If i have clicked on Like, it worked fine at the spot, but when i refresh the page. it is showing as Liked and count is also fine, but after refreshing the page, when i click on Liked button again, it should decrease the number of likes but it is showing the increment instead of decreasing. But yes, updating database fine without any issue
3 - When i Click Like or Dislike, I want the like button to be changed into liked/disliked and if it was already liked but now Clicked on Dislike, then liked should be reversed and dislike should be disliked, same as, if already disliked, then on clicking the like button, like should be changed into liked and disliked should be changed into dislike
I understand that its only ajax mistake so I think i should post only ajax code, as php code is working fine its body
Body
<div id="rating-votes">
<button class="btn like"><?php echo $likemsg ?></button>
<span class="likes"><?php print_r(count($vquery)); ?></span>
<button class="btn dislike"><?php echo $dislikemsg ?></button>
<span class="dislikes"><?php print_r(count($dquery)); ?></span>
</div>
Body Script
$('#rating-votes').likeDislike({
reverseMode: true,
disabledClass: 'disable',
click: function (value, l, d, event) {
var likes = $(this.element).find('.likes');
var dislikes = $(this.element).find('.dislikes');
$.ajax({
url: '',
type: 'POST',
data: 'likes=' + likes + 'dislikes=' + dislikes,
success: function (data) {
likes.text(parseInt(likes.text()) + l);
dislikes.text(parseInt(dislikes.text()) + d);
}
});
}
});
file-script
(function ($) {
var likeBtn = 'like',
dislikeBtn = 'dislike';
var defaults = {
click: null,
beforeClick: null,
initialValue: 0,
reverseMode: true,
readOnly: false,
likeBtnClass: 'like',
dislikeBtnClass: 'dislike',
activeClass: 'active',
disabledClass: 'disabled'
};
function LikeDislike(element, options) {
this.element = element;
this.opts = $.extend({}, defaults, options);
this.init();
}
LikeDislike.prototype = {
init: function () {
this.btns = $(this.element).find('.' + this.opts.likeBtnClass + ', .' + this.opts.dislikeBtnClass);
this.readOnly(this.opts.readOnly);
if (this.opts.initialValue !== 0) {
var activeBtn = this.opts.initialValue === 1 ? likeBtn : dislikeBtn;
this.btnDown(activeBtn);
}
return this;
},
readOnly: function (state) {
var btns = this.btns;
if (!state) {
if (!this.opts.reverseMode) {
var notActiveBtns = btns.not('.' + this.opts.activeClass);
if (notActiveBtns.length) {
btns = notActiveBtns;
}
}
this.enable(btns);
} else {
this.disable(btns);
}
},
getBtn: function (btnType) {
if (btnType === likeBtn) {
return $(this.element).find('.' + this.opts.likeBtnClass);
} else if (btnType === dislikeBtn) {
return $(this.element).find('.' + this.opts.dislikeBtnClass);
} else {
$.error('Wrong btnType: ' + btnType);
}
},
btnDown: function (btnType) {
var btn = this.getBtn(btnType);
btn.addClass(this.opts.activeClass);
if (!this.opts.reverseMode) {
this.disable(btn);
}
},
btnUp: function (btnType) {
var btn = this.getBtn(btnType);
btn.removeClass(this.opts.activeClass);
if (!this.opts.reverseMode) {
this.enable(btn);
}
},
enable: function (btn) {
var self = this;
var opts = self.opts;
btn.removeClass(opts.disabledClass);
if (opts.beforeClick) {
btn.on('beforeClick', function (event) {
return opts.beforeClick.call(self, event);
});
}
btn.on('click', function (event) {
var btn = $(this);
if (opts.beforeClick && !btn.triggerHandler('beforeClick')) {
return false;
}
var btnType = btn.hasClass(opts.likeBtnClass) ? likeBtn : dislikeBtn;
var hasActive = self.btns.hasClass(opts.activeClass);
var isActive = btn.hasClass(opts.activeClass);
var value = 0, l = 0, d = 0;
if (btnType === likeBtn) {
if (isActive) {
self.btnUp(likeBtn);
l = -1;
} else {
if (hasActive) {
self.btnUp(dislikeBtn);
d = -1;
}
self.btnDown(likeBtn);
l = 1;
value = 1;
}
} else {
if (isActive) {
self.btnUp(dislikeBtn);
d = -1;
} else {
if (hasActive) {
self.btnUp(likeBtn);
l = -1;
}
self.btnDown(dislikeBtn);
d = 1;
value = -1;
}
}
opts.click.call(self, value, l, d, event);
});
},
};
$.fn.likeDislike = function (options) {
return this.each(function () {
if (!$.data(this, "plugin_LikeDislike")) {
$.data(this, "plugin_LikeDislike",
new LikeDislike(this, options));
}
});
};
})(jQuery);
To be honest, i am really really very bad at javascript, ajax, jquery, so i would greatly appreciate if some senior can remove unnecessary code from the file-script.