Estoy haciendo una aplicación de un web chat con php y jquery, a este chat le agregue la opción de usar emojis, estoy usando el plugin EmojiOne Textarea Picker
Esto es lo que tengo de código:
JS:
$(document).ready(function(){
$( "textarea" ).emojionePicker({
pickerTop: 5,
pickerRight: 1,
type: "unicode"
});
setInterval(function(){ ajax(); }, 1000);
});
function ajax()
{
$.ajax({
url: 'chat.php',
success: function(response){
$("#chat").html(response);
}
});
}
HTML:
<?php
include_once("class.Database.php");
?>
<div id="contenedor">
<div id="caja-chat">
<div id="chat">
</div>
</div>
<form action="index.php" method="post">
<input type="text" name="nombre" placeholder="Ingresa tu nombre">
<textarea id="mensaje" name="mensaje" placeholder="Escribe tu mensaje"></textarea>
<input type="submit" name="enviar" value="Enviar">
</form>
<?php
if(isset($_POST["enviar"]))
{
$nombre = $_POST["nombre"];
$mensaje = trim($_POST["mensaje"]);
$consulta = "INSERT INTO chat(nombre, mensaje, fecha) VALUES('$nombre', '$mensaje', NOW())";
$ejecutar = Database::insert($consulta);
if($ejecutar)
{
echo "<embed loop='false' src='audio/pling_facebook.mp3' hidden='true' autoplay='true'>";
}
}
?>
</div>
chat.php
<?php
include_once("class.Database.php");
function formatearFecha($fecha)
{
return Date("g:i a", strtotime($fecha));
}
$consulta = "SELECT * FROM chat ORDER BY id_chat DESC";
$ejecutar = Database::select($consulta);
if(is_array($ejecutar))
{
foreach($ejecutar as $fila)
{
?>
<div id="datos-chat">
<span style="color: #1C62C4;"><?php echo $fila["nombre"]; ?>:</span>
<span style="color: #848484;"><?php echo $fila["mensaje"]; ?></span>
<span style="float: right; margin-right: 10px;"><?php echo formatearFecha($fila["fecha"]); ?></span>
</div>
<?php
}
}
?>
El problema es que el emoji que se selecciona no lo guarda correctamente en la base de datos pues lo guarda así: ????
con esos signos de interrogación.
Como podria hacer para solucionar esto??