He estado investigando, cambiando y creando algunos códigos y he llegado a esto:
El botón funciona correctamente pero no logro hacer el INSERT, UPDATE y DELETE de MySQL, quisiera por favor me ayuden.
Estoy aprendiendo así que espero me entiendan y me puedan ayudar.
Por si no logran verlo este es el código completo:
HTML:
Código HTML:
<button class="btn like-boton" rel="6" data-id="00000007" data-articulo="00000001" data-autor="00000002">Me Gusta</button>
CSS:
Código:
AJAX:.btn {
cursor:pointer;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
border:1px solid #a6a6a6;
border-top-color:#bdbdbd;
border-bottom-color:#8b8a8b;
color:#666666;
font-size:11px;
background-position:0px 0px;
text-shadow: 0 1px 0 #fff;
font-weight:bold;
background-color: #ffffff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e8e8e8)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #ffffff, #e8e8e8); /* Chrome 10+, Saf5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, #ffffff, #e8e8e8); /* FF3.6 */
background-image: -ms-linear-gradient(top, #ffffff, #e8e8e8); /* IE10 */
background-image: -o-linear-gradient(top, #ffffff, #e8e8e8); /* Opera 11.10+ */
background-image: linear-gradient(top, #ffffff, #e8e8e8);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
box-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
.btn:hover {
color:#333;
border-color:#999;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f6f6f6)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #ffffff, #f6f6f6); /* Chrome 10+, Saf5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, #ffffff, #f6f6f6); /* FF3.6 */
background-image: -ms-linear-gradient(top, #ffffff, #f6f6f6); /* IE10 */
background-image: -o-linear-gradient(top, #ffffff, #f6f6f6); /* Opera 11.10+ */
background-image: linear-gradient(top, #ffffff, #f6f6f6);
}
.btn:active{
background-image: -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#ffffff)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #e8e8e8, #ffffff); /* Chrome 10+, Saf5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, #e8e8e8, #ffffff); /* FF3.6 */
background-image: -ms-linear-gradient(top, #e8e8e8, #ffffff); /* IE10 */
background-image: -o-linear-gradient(top, #e8e8e8, #ffffff); /* Opera 11.10+ */
background-image: linear-gradient(top, #e8e8e8, #ffffff);
}
.btn:focus {
outline: none;
border-color:#BD4A39;
}
button.like-boton{
background: rgb(204,204,204); IE
background: rgba(204,204,204, 1);
border: 0px;
width: 9.5vmax;
height: 43px;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
}
button.like-boton.likeit{
background-color: #D11A1A;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#D11A1A), to(#D11A1A));
background-image: -moz-linear-gradient(top, #D11A1A, #D11A1A);
background-image: -ms-linear-gradient(top, #D11A1A, #D11A1A);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #D11A1A), color-stop(100%, #D11A1A));
background-image: -webkit-linear-gradient(top, #D11A1A, #D11A1A);
background-image: -o-linear-gradient(top, #D11A1A, #D11A1A);
background-image: linear-gradient(top, #D11A1A, #D11A1A);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D11A1A', endColorstr='#D11A1A', GradientType=0);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #57A957 #57A957 #3D773D;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
color:#fff;
}
button.like-boton.nolike{
background-color: #C43C35;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));
background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
background-image: linear-gradient(top, #ee5f5b, #c43c35);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #C43C35 #C43C35 #882A25;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
Código:
PHP:$('button.like-boton').live('click', function(e){
e.preventDefault();
$button = $(this);
var post_id = $(this).data('id');
var articulo = $(this).data('articulo');
var autor = $(this).data('autor');
var cadena = 'post_id='+post_id+'&articulo='+articulo+'&autor='+autor;
if($button.hasClass('likeit')){
//$.ajax(); Do Unfollow
$button.removeClass('likeit');
$button.removeClass('nolike');
$button.text('Me Gusta');
} else {
// $.ajax(); Do Follow
$button.addClass('likeit');
$button.text('Te Gusta');
$.ajax({
type: "POST",
url: "includes/like.php",
data: cadena,
success: function() {
}
});
}
});
$('button.like-boton').hover(function(){
$button = $(this);
if($button.hasClass('likeit')){
$button.addClass('nolike');
$button.text('No te gusta');
}
}, function(){
if($button.hasClass('likeit')){
$button.removeClass('nolike');
$button.text('Te Gusta');
}
});
Código PHP:
sleep(1);
$conexion= new mysqli('localhost','root','','database');
if($_POST) {
$post_id = (int)$_POST["post_id"];
$articulo = (int)$_POST["articulo"];
$autor = (int)$_POST["autor"];
$consulta = "INSERT INTO megusta (kid_like,kid_usuario,kid_articulo) VALUES ('$post_id','$artiuclo','$autor')";
$result = $conexion->query($consulta);
