Top

Follow me and receive all the latest free scripts:

By Email:

Categories
Most Popular Posts

Contact

Published September 19, 2014

Contact

Have a question, a project for me or just wanna say hi? Please feel free to contact me.

Want to know more about me? Click here.

Technical

For all technical question, issue or comment, please send us an email at .

Sales

For all sales and advertising contact, please send us an email at . Please visit our "Advertising" page for more information about advertising opportunities, types and placements.

Partnership

For all partnership proposals, please send us an email at .

Copyrights

Would you think there is a copyright issue with some scripts published on TipoCode, please let us know. Send us an email at .

Paid support

If you need support on a specific solution, solve any critical issue, if you are in the need to adapt or create a script, I offer a PayPal paid support

Please don't hesitate to send me an email, so we can find a fair solution.

I can install and adapt a script on your existing website, or also work on a new script depending what you need. I may be interested working on bigger projects...

About Simon Laroche
Simon Laroche on Google+
Simon Laroche on Twitter
Simon Laroche on Facebook
Simon Laroche on Pinterest
Simon Laroche on LinkedIn
: I am a Coder, Designer, Webmaster and Expert SEO Consulting, I'm also a wise traveller and an avid amateur photographer. I created the website TipoCode and many others such as Landolia: a World of Photos...

Leave a comment

Comments (8 comments)

Rafa Posted on August 05, 2018
<div class="comment-form-container">
<form id="frm-comment">
<div class="input-row">
<input type="hidden" name="comentario_id" id="commentId"
placeholder="Name" /> <input class="input-field"
type="text" name="name" id="name" placeholder="Nombres" />
</div>
<div class="input-row">
<textarea class="input-field" type="text" name="comment"
id="comment" placeholder="Agregar comentario"> </textarea>
</div>
<div>
<input type="button" class="btn-submit" id="submitButton"
value="Publicar Ahora" /><div id="comment-message">Comentario ha sido agregado exitosamente!</div>
</div>
<div style="clear:both"></div>
</form>
</div>
<div id="output"></div>

<script>
var totalLikes = 0;
var totalUnlikes = 0;

function postReply(commentId) {
$('#commentId').val(commentId);
$("#name").focus();
}

$("#submitButton").click(function () {
$("#comment-message").css('display', 'none');
var str = $("#frm-comment").serialize();

$.ajax({
url: "AgregarComentario.php",
data: str,
type: 'post',
success: function (response)
{
var result = eval('(' + response + ')');
if (response)
{
$("#comment-message").css('display', 'inline-block');
$("#name").val("");
$("#comment").val("");
$("#commentId").val("");
listComment();
} else
{
alert("Failed to add comments !");
return false;
}
}
});
});

$(document).ready(function () {
listComment();
});

function listComment() {
$.post("ListaDeComentarios.php",
function (data) {
var data = JSON.parse(data);

var comments = "";
var replies = "";
var item = "";
var parent = -1;
var results = new Array();

var list = $("<ul class='outer-comment'>");
var item = $("<li>").html(comments);

for (var i = 0; (i < data.length); i++)
{
var commentId = data[i]['comentario_id'];
parent = data[i]['parent_comentario_id'];


if (parent == "0")
{
if(data[i]['like_unlike'] >= 1)
{
like_icon = "<img src='img/MeGusta.png' id='unlike_" + data[i]['comentario_id'] + "' class='like-unlike' onClick='likeOrDislike(" + data[i]['comentario_id'] + ",-1)' />";
like_icon += "<img style='display:none;' src='img/NoMeGusta.png' id='like_" + data[i]['comentario_id'] + "' class='like-unlike' onClick='likeOrDislike(" + data[i]['comentario_id'] + ",1)' />";
}
else
{
like_icon = "<img style='display:none;' src='img/MeGusta.png' id='unlike_" + data[i]['comentario_id'] + "' class='like-unlike' onClick='likeOrDislike(" + data[i]['comentario_id'] + ",-1)' />";
like_icon += "<img src='img/NoMeGusta.png' id='like_" + data[i]['comentario_id'] + "' class='like-unlike' onClick='likeOrDislike(" + data[i]['comentario_id'] + ",1)' />";

}

comments = "\
<div class='comment-row'>\
<div class='comment-info'>\
<span class='commet-row-label'>De</span>\
<span class='posted-by'>" + data[i]['comment_sender_name'] + "</span>\
<span class='commet-row-label'>a las </span> \
<span class='posted-at'>" + data[i]['date'] + "</span>\
</div>\
<div class='comment-text'>" + data[i]['comment'] + "</div>\
<div>\
<a class='btn-reply' onClick='postReply(" + commentId + ")'>Responder</a>\
</div>\
<div class='post-action'>\ " + like_icon + " \
<span id='likes_" + commentId + "'> " + totalLikes + " Me Gusta </span>\
</div>\
</div>";

var item = $("<li>").html(comments);
list.append(item);
var reply_list = $('<ul>');
item.append(reply_list);
listReplies(commentId, data, reply_list);
}
}
$("#output").html(list);
});
}

function listReplies(commentId, data, list) {

for (var i = 0; (i < data.length); i++)
{


if (commentId == data[i].parent_comentario_id)
{
if(data[i]['like_unlike'] >= 1)
{
like_icon = "<img src='img/MeGusta.png' id='unlike_" + data[i]['comentario_id'] + "' class='like-unlike' onClick='likeOrDislike(" + data[i]['comentario_id'] + ",-1)' />";
like_icon += "<img style='display:none;' src='img/NoMeGusta.png' id='like_" + data[i]['comentario_id'] + "' class='like-unlike' onClick='likeOrDislike(" + data[i]['comentario_id'] + ",1)' />";

}
else
{
like_icon = "<img style='display:none;' src='img/NoMeGusta.png' id='unlike_" + data[i]['comentario_id'] + "' class='like-unlike' onClick='likeOrDislike(" + data[i]['comentario_id'] + ",-1)' />";
like_icon += "<img src='img/NoMeGusta.png' id='like_" + data[i]['comentario_id'] + "' class='like-unlike' onClick='likeOrDislike(" + data[i]['comentario_id'] + ",1)' />";

}
var comments = "\
<div class='comment-row'>\
<div class='comment-info'>\
<span class='commet-row-label'>De </span>\
<span class='posted-by'>" + data[i]['comment_sender_name'] + "</span>\
<span class='commet-row-label'>a las </span> \
<span class='posted-at'>" + data[i]['date'] + "</span>\
</div>\
<div class='comment-text'>" + data[i]['comment'] + "</div>\
<div>\
<a class='btn-reply' onClick='postReply(" + data[i]['comentario_id'] + ")'>Responder</a>\
</div>\
<div class='post-action'> " + like_icon + " \
<span id='likes_" + data[i]['comentario_id'] + "'> " + totalLikes + " Me Gusta </span>\
</div>\
</div>";

var item = $("<li>").html(comments);
var reply_list = $('<ul>');
list.append(item);
item.append(reply_list);
listReplies(data[i].comentario_id, data, reply_list);
}
}
}

function getLikesUnlikes(commentId)
{

$.ajax({
type: 'POST',
async: false,
url: 'Envio_MeGusta.php',
data: {comentario_id: commentId},
success: function (data)
{
totalLikes = data;
}

});

}


function likeOrDislike(comentario_id,like_unlike)
{

$.ajax({
url: 'MeGusta_NoMeGusta.php',
async: false,
type: 'post',
data: {comentario_id:comentario_id,like_unlike:like_unlike},
dataType: 'json',
success: function (data) {

$("#likes_"+comentario_id).text(data + " likes");

if (like_unlike == 1) {
$("#like_" + comentario_id).css("display", "none");
$("#unlike_" + comentario_id).show();
}

if (like_unlike == -1) {
$("#unlike_" + comentario_id).css("display", "none");
$("#like_" + comentario_id).show();
}

},
error: function (data) {
alert("error : " + JSON.stringify(data));
}
});
}



</script>


<!--Fin elementos contenedor-->
</div>
</div>
</div>
</div>
<div class="panel-footer">

</div>

</body>
</html>


Necesito paginación para este sistema de comentarios ¿Me puedes ayudar?

Si ese no se puede tambien tengo este:
<div class="container">
<form method="POST" id="comment_form">
<div class="form-group">
<input type="text" name="comment_name" id="comment_name" class="form-control" placeholder="Enter Name" />
</div>
<div class="form-group">
<textarea name="comment_content" id="comment_content" class="form-control" placeholder="Enter Comment" rows="5"></textarea>
</div>
<div class="form-group">
<input type="hidden" name="comment_id" id="comment_id" value="0" />
<input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
<span id="comment_message"></span>
<br />
<div id="display_comment"></div>
</div>
</body>
</html>

<script>
$(document).ready(function(){

$('#comment_form').on('submit', function(event){
event.preventDefault();
var form_data = $(this).serialize();
$.ajax({
url:"add_comment.php",
method:"POST",
data:form_data,
dataType:"JSON",
success:function(data)
{
if(data.error != '')
{
$('#comment_form')[0].reset();
$('#comment_message').html(data.error);
$('#comment_id').val('0');
load_comment();
}
}
})
});

load_comment();

function load_comment()
{
$.ajax({
url:"fetch_comment.php",
method:"POST",
success:function(data)
{
$('#display_comment').html(data);
}
})
}

$(document).on('click', '.reply', function(){
var comment_id = $(this).attr("id");
$('#comment_id').val(comment_id);
$('#comment_name').focus();
});

});
</script>


Cualquiera de los 2 me sireve.

Espero tu respuesta. Gracias
abhi Posted on July 19, 2018
you said ,

Hope you enjoy this tutorial, in the next one I will also create a tab system, but this time you will be able to name a tab, and for each tab, have a text field and save content in a MySQL database.

Leave comments below if you need help, or if you found better way to do things.

Happy coding!

Waiting for the new code
Cameron Browne Posted on August 03, 2017
Pagination with jQuery, Ajax, PHP and MySQL:
I have been trying to add pagination to a live search page I have and having trouble understanding the logic. I like your design but it shows that you already know what data is going to display. Do you have an example of live search pagination?
afzal Posted on October 31, 2016
Hi i want to to have star rating system in my site . and also in my comments . how can i do this . If you can do this tell me and how much charges are for this ? . contact me soon..........................................
Sean Burn Posted on March 08, 2016
Good Afternoon Simon,

As I am far from a database guru or even handling ajax requests from my scripts to a database via php and back again, I am going to ask you for your assistance regarding a pet project I am working on.

I have incorporated both Jquery Ui Sliders using the Pips extension library with Justgage.js. What I am attempting to do is have a user select the value on the slider based on the question associated with each slider.

As the user answers each question by selecting a value on the slider, it then populates the gauge. I would then need to record that page section into the DB and store the values they chose, and after pressing next, the next set of questions are displayed pertaining to a different section which would then store into that section within the DB and so on. Right at the end, I would then need all the values sent from the DB to a totally different URL to populate a whole new set of graphs.

I am not going to post this on Stackoverflow as I want to keep this under wraps for now, which is why I'm reaching out to a freelancer.

You may take a look at what I have so far and get a better idea of what I'm trying to achieve when you get back to me privately as I don't want to paste the URL in a public area.

And then get back to me with a price perhaps? I honestly can't be asked to try figure this all out for myself as it will take way too long and SQL and Databases are just not my thing.

Kind regards,

Sean
Simon Laroche
Simon Laroche Posted on October 06, 2015
If you get an "error" message it's because you clicked twice on the link. Just click one time and you account is confirmed and you are logged in.
Simon Laroche
Simon Laroche Posted on October 05, 2015
@juanpa: Can you send me your confirmation link please at the email shown above? I will check it out.
juanpa Posted on October 05, 2015
Try to register, but when i click the confirmation link, return "error"