I am adding a "like" feature to my screenshot gallery. I have successfully worked it out to change color to red when someone likes... and go back to gray when unlike... and then a php script handles all the DB magic.
But I can't wrap my head around how to change the actual text value shown; i.e. if someone likes, change the text from 10 to 11. If they unlike, change from 2 to 1, etc.
Can anyone suggest an approach to look into?
These are my javascript & html snippets if they help. The text in the HTML I want to change here is represented by "$row['Likes']"
$(".ajax-unlike").submit(function(){
var refid = $(this).find('input[name="refid"]').val();
var data = {
"action": "unlike"
};
data = $(this).serialize() + "&" + $.param(data);
$.ajax({
type: "POST",
dataType: "json",
url: "galleryajax.php", //Relative or absolute path to response.php file
context: document.getElementById(refid), //!! ADD THIS
data: data,
success: function(data) { //!! REMOVE refid FROM HERE
$(this).removeClass("thumb-ment-red", 1000);
}
});
return false;
});
<span class="thumb-ment" id="like'.$row['GalleryID'].'">
<form class="ajax-like" method="post" accept-charset="utf-8">
<input type="hidden" name="mcname" value="'.$user->profile_fields['pf_minecraftname'].'" />
<input type="hidden" name="galleryid" value="'.$row['GalleryID'].'" />
<input type="hidden" name="refid" value="like'.$row['GalleryID'].'" />
<input type="hidden" name="likerswithoutthisuser" value="'.str_replace($user->profile_fields['pf_minecraftname'],"",$row['Likers']).'" />
<button type="submit" style="border: 0; background: none;">
<i class="fa fa-heart"></i>
'.$row['Likes'].'
</button>
</form>
</span>
new code for ment down below
//Look for forms with "like" class
$(".ajax-like").submit(function(){
var refid = $(this).find('input[name="refid"]').val();
var btnrefid = "button#" + refid;
var formrefid = "form#" + refid;
var data = {
"action": "like"
};
data = $(this).serialize() + "&" + $.param(data);
$.ajax({
type: "POST",
dataType: "json",
url: "galleryajax.php", //Relative or absolute path to response.php file
context: document.getElementById(refid),
data: data,
success: function(data) {
$(this).addClass("thumb-ment-red", 1000);
$(btnrefid).html("<i class='fa fa-heart'></i> " + data["newlikes"]);
//Now stop further changes from recording based on submissions from this specific form
$(formrefid).submit(function(){
alert("You have already liked or unliked this screenshot. Please reload the page if you want to change your mind.");
});
}
});
return false;
});
I am adding a "like" feature to my screenshot gallery. I have successfully worked it out to change color to red when someone likes... and go back to gray when unlike... and then a php script handles all the DB magic.
But I can't wrap my head around how to change the actual text value shown; i.e. if someone likes, change the text from 10 to 11. If they unlike, change from 2 to 1, etc.
Can anyone suggest an approach to look into?
These are my javascript & html snippets if they help. The text in the HTML I want to change here is represented by "$row['Likes']"
$(".ajax-unlike").submit(function(){
var refid = $(this).find('input[name="refid"]').val();
var data = {
"action": "unlike"
};
data = $(this).serialize() + "&" + $.param(data);
$.ajax({
type: "POST",
dataType: "json",
url: "galleryajax.php", //Relative or absolute path to response.php file
context: document.getElementById(refid), //!! ADD THIS
data: data,
success: function(data) { //!! REMOVE refid FROM HERE
$(this).removeClass("thumb-ment-red", 1000);
}
});
return false;
});
<span class="thumb-ment" id="like'.$row['GalleryID'].'">
<form class="ajax-like" method="post" accept-charset="utf-8">
<input type="hidden" name="mcname" value="'.$user->profile_fields['pf_minecraftname'].'" />
<input type="hidden" name="galleryid" value="'.$row['GalleryID'].'" />
<input type="hidden" name="refid" value="like'.$row['GalleryID'].'" />
<input type="hidden" name="likerswithoutthisuser" value="'.str_replace($user->profile_fields['pf_minecraftname'],"",$row['Likers']).'" />
<button type="submit" style="border: 0; background: none;">
<i class="fa fa-heart"></i>
'.$row['Likes'].'
</button>
</form>
</span>
new code for ment down below
//Look for forms with "like" class
$(".ajax-like").submit(function(){
var refid = $(this).find('input[name="refid"]').val();
var btnrefid = "button#" + refid;
var formrefid = "form#" + refid;
var data = {
"action": "like"
};
data = $(this).serialize() + "&" + $.param(data);
$.ajax({
type: "POST",
dataType: "json",
url: "galleryajax.php", //Relative or absolute path to response.php file
context: document.getElementById(refid),
data: data,
success: function(data) {
$(this).addClass("thumb-ment-red", 1000);
$(btnrefid).html("<i class='fa fa-heart'></i> " + data["newlikes"]);
//Now stop further changes from recording based on submissions from this specific form
$(formrefid).submit(function(){
alert("You have already liked or unliked this screenshot. Please reload the page if you want to change your mind.");
});
}
});
return false;
});
2 Answers
Reset to default 4Have a look at innerHTML like:
document.getElementById("demo").innerHTML = "value";
Or JQ way
$(selector).html("value");
success: function(data) { //!! REMOVE refid FROM HERE
$(this).removeClass("thumb-ment-red", 1000).innerHTML="UR New TEXT HERE";
//can even use $(element).text("text") or $(element).html("<span>TEXT</span>") like any html elements can be added according to requirement if you plan to use jquery//
}