1

Estoy constuyendo un sistema de reseñas y quiero traer el avatar desde gravatar y almacenar la url en la base de datos, esto para que cada persona que vaya a comentar tenga su avatar. Tengo varios problemas al tratar de enviar la variable de respuesta JAVASCRIPT y enviarla a la base de datos. este es el código

<script>
var email = $('#user_email').val();
$('#save_review').click(function ()
{
    email = $('#user_email').val();
    console.log("user_email:",email);
    var gravatar_image_url = get_gravatar_image_url (email, 200);
    
    $('#user_avatar').html(gravatar_image_url);
    
    $('#image').attr('src', gravatar_image_url);
});


function get_gravatar_image_url (email, size, default_image, allowed_rating, force_default)
{
    email = typeof email !== 'undefined' ? email : '[email protected]';
    size = (size >= 1 && size <= 2048) ? size : 40;
    default_image = typeof default_image !== 'undefined' ? default_image : 'mm';
    allowed_rating = typeof allowed_rating !== 'undefined' ? allowed_rating : 'g';
    force_default = force_default === true ? 'y' : 'n';
    
    return ("https://secure.gravatar.com/avatar/" + md5(email.toLowerCase().trim()) + "?size=" + size + "&default=" + encodeURIComponent(default_image) + "&rating=" + allowed_rating + (force_default === 'y' ? "&forcedefault=" + force_default : ''));
}

$(document).ready(function(){

    var rating_data = 0;

    $('#add_review').click(function(){

        $('#review_modal').modal('show');

    });

    $(document).on('mouseenter', '.submit_star', function(){

        var rating = $(this).data('rating');

        reset_background();

        for(var count = 1; count <= rating; count++)
        {

            $('#submit_star_'+count).addClass('text-warning');

        }

    });

    function reset_background()
    {
        for(var count = 1; count <= 5; count++)
        {

            $('#submit_star_'+count).addClass('star-light');

            $('#submit_star_'+count).removeClass('text-warning');

        }
    }

    $(document).on('mouseleave', '.submit_star', function(){

        reset_background();

        for(var count = 1; count <= rating_data; count++)
        {

            $('#submit_star_'+count).removeClass('star-light');

            $('#submit_star_'+count).addClass('text-warning');
        }

    });

    $(document).on('click', '.submit_star', function(){

        rating_data = $(this).data('rating');

    });

    $('#save_review').click(function(){

        var user_name = $('#user_name').val();
        var user_review = $('#user_review').val();
        var user_email = $('#user_email').val();
        var user_avatar = $('gravatar_image_url').val();

        if(user_name == '' || user_review == '' || user_email == '')
        {
            alert("Please Fill all Fields");
            return false;
        }
        else
        {
            $.ajax({
                url:"/includes/submit_rating.php",
                method:"POST",
                data:{rating_data:rating_data, user_name:user_name, user_review:user_review, user_email:user_email, user_avatar:user_avatar},
                success:function(data)
                {
                    $('#review_modal').modal('hide');

                    load_rating_data();

                    alert(data);
                }
            })
        }

    });

    load_rating_data();


    function load_rating_data()
    {
        $.ajax({
            url:"/includes/submit_rating.php",
            method:"POST",
            data:{action:'load_data'},
            dataType:"JSON",
            success:function(data)
            {
                $('#average_rating').text(data.average_rating);
                $('#total_review').text(data.total_review);

                var count_star = 0;

                $('.main_star').each(function(){
                    count_star++;
                    if(Math.ceil(data.average_rating) >= count_star)
                    {
                        $(this).addClass('text-warning');
                        $(this).addClass('star-light');
                    }
                });

                $('#total_five_star_review').text(data.five_star_review);

                $('#total_four_star_review').text(data.four_star_review);

                $('#total_three_star_review').text(data.three_star_review);

                $('#total_two_star_review').text(data.two_star_review);

                $('#total_one_star_review').text(data.one_star_review);

                $('#five_star_progress').css('width', (data.five_star_review/data.total_review) * 100 + '%');

                $('#four_star_progress').css('width', (data.four_star_review/data.total_review) * 100 + '%');

                $('#three_star_progress').css('width', (data.three_star_review/data.total_review) * 100 + '%');

                $('#two_star_progress').css('width', (data.two_star_review/data.total_review) * 100 + '%');

                $('#one_star_progress').css('width', (data.one_star_review/data.total_review) * 100 + '%');

                if(data.review_data.length > 0)
                {
                    var html = '';

                    for(var count = 0; count < data.review_data.length; count++)
                    {
                       html += '<div class="row mb-3">';

                        html += '<div class="col-sm-1"><div class="avatar" <h3 class="text-center">'+data.review_data[count].user_name+'</h3></div></div>';

                        html += '<div class="col-sm-11">';

                        html += '<div class="card">';

                        html += '<div class="card-header"><b>'+data.review_data[count].user_name+'</b></div>';

                        html += '<div class="card-body">';

                        for(var star = 1; star <= 5; star++)
                        {
                            var class_name = '';

                            if(data.review_data[count].rating >= star)
                            {
                                class_name = 'text-warning';
                            }
                            else
                            {
                                class_name = 'star-light';
                            }

                            html += '<i class="fas fa-star '+class_name+' mr-1"></i>';
                        }

                        html += '<br />';

                        html += data.review_data[count].user_review;

                        html += '</div>';

                        html += '<div class="card-footer text-right">On '+data.review_data[count].datetime+'</div>';

                        html += '</div>';

                        html += '</div>';

                        html += '</div>';
                    }

                    $('#review_content').html(html);
                }
            }
        })
    }

});

</script>
.progress-label-left
{
    float: left;
    margin-right: 0.5em;
    line-height: 1em;
}
.progress-label-right
{
    float: right;
    margin-left: 0.3em;
    line-height: 1em;
}
.star-light
{
    color:#e9ecef;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.10.0/js/md5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!DOCTYPE html>
<body>
  <div class="container">
 <div class="card">
            <div class="card-header">Reseñas de Usuarios de </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-sm-4 text-center">
                        <h1 class="text-warning mt-4 mb-4">
                            <b><span id="average_rating">0.0</span> / 5</b>
                        </h1>
                        <div class="mb-3">
                            <i class="fas fa-star star-light mr-1 main_star"></i>
                            <i class="fas fa-star star-light mr-1 main_star"></i>
                            <i class="fas fa-star star-light mr-1 main_star"></i>
                            <i class="fas fa-star star-light mr-1 main_star"></i>
                            <i class="fas fa-star star-light mr-1 main_star"></i>
                        </div>
                        <h3><span id="total_review">0</span> Review</h3>
                    </div>
                    <div class="col-sm-4">
                        <p>
                            <div class="progress-label-left"><b>5</b> <i class="fas fa-star text-warning"></i></div>

                            <div class="progress-label-right">(<span id="total_five_star_review">0</span>)</div>
                            <div class="progress">
                                <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="five_star_progress"></div>
                            </div>
                        </p>
                        <p>
                            <div class="progress-label-left"><b>4</b> <i class="fas fa-star text-warning"></i></div>
                            
                            <div class="progress-label-right">(<span id="total_four_star_review">0</span>)</div>
                            <div class="progress">
                                <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="four_star_progress"></div>
                            </div>               
                        </p>
                        <p>
                            <div class="progress-label-left"><b>3</b> <i class="fas fa-star text-warning"></i></div>
                            
                            <div class="progress-label-right">(<span id="total_three_star_review">0</span>)</div>
                            <div class="progress">
                                <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="three_star_progress"></div>
                            </div>               
                        </p>
                        <p>
                            <div class="progress-label-left"><b>2</b> <i class="fas fa-star text-warning"></i></div>
                            
                            <div class="progress-label-right">(<span id="total_two_star_review">0</span>)</div>
                            <div class="progress">
                                <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="two_star_progress"></div>
                            </div>               
                        </p>
                        <p>
                            <div class="progress-label-left"><b>1</b> <i class="fas fa-star text-warning"></i></div>
                            
                            <div class="progress-label-right">(<span id="total_one_star_review">0</span>)</div>
                            <div class="progress">
                                <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="one_star_progress"></div>
                            </div>               
                        </p>
                    </div>
                    <div class="col-sm-4 text-center">
                        <h3 class="mt-4 mb-3">Write Review Here</h3>
                        <button type="button" name="add_review" id="add_review" class="btn btn-primary">Review</button>
                    </div>
                </div>
            </div>
        </div><div id="user_avatar">&nbsp;</div>
        <div class="mt-5" id="review_content"></div>
    </div></div>
</body>
</html>

<div id="review_modal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Submit Review</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <h4 class="text-center mt-2 mb-4">
                    <i class="fas fa-star star-light submit_star mr-1" id="submit_star_1" data-rating="1"></i>
                    <i class="fas fa-star star-light submit_star mr-1" id="submit_star_2" data-rating="2"></i>
                    <i class="fas fa-star star-light submit_star mr-1" id="submit_star_3" data-rating="3"></i>
                    <i class="fas fa-star star-light submit_star mr-1" id="submit_star_4" data-rating="4"></i>
                    <i class="fas fa-star star-light submit_star mr-1" id="submit_star_5" data-rating="5"></i>
                </h4>
                <div class="form-group">
                    <input type="text" name="user_name" id="user_name" class="form-control" placeholder="Enter Your Name" required />
                </div>
                <div class="form-group">
                    <input type="text" name="user_email" id="user_email" class="form-control" placeholder="[email protected]" required />
                </div>
                <div class="form-group">
                    <textarea name="user_review" id="user_review" class="form-control" placeholder="Type Review Here" required ></textarea>
                </div>
                 <div class="form-group text-center mt-4">
                    <button type="button" class="btn btn-primary" id="save_review">Submit</button>
                </div>
            </div>
        </div>
    </div>
</div>

Ahora en la línea get_avatar_image_url Obtengo la url del avatar del correo, lo que no he podido es pasarla por ajax a php usando el metodo post. este es el fragmento. Cabe resaltar que los otros valores ( username, review y el email están pasando y se almacenan en la base de datos.

 $('#save_review').click(function(){

    var user_name = $('#user_name').val();
    var user_review = $('#user_review').val();
    var user_email = $('#user_email').val();
    var user_avatar = $('gravatar_image_url').val();

1 respuesta 1

1

El método .val() aplica solo a campos de formulario (input, select, checkbox, button, etc.) no a variables:

var gravatar_image_url = get_gravatar_image_url (email, 200);

Con esa línea, estás definiendo gravatar_image_url como variable, por lo que var user_avatar = $('gravatar_image_url').val(); no devuelve lo que esperas.

Define la variable globalmente, para que puedas usarla después en cualquier otra función, ya sea actualizando y obteniendo el valor. Toma nota de que estás asignando dos eventos para el botón save_review y puede que el comportamiento no sea el esperado.

Sugiero que asignes el evento change al campo de formulario y sea ahí donde actualices la URL de gravatar:

// Define la variable globalmente
var gravatar_image_url;
$('#user_email').on('change', function () {
    // Obtener correo electrónico
    email = $(this).val();
    console.log("user_email:",email);
    // Actualiza la variable con la URL obtenida
    gravatar_image_url = get_gravatar_image_url (email, 200);
    $('#user_avatar').html(gravatar_image_url);
    $('#image').attr('src', gravatar_image_url);
});

Luego, cuando vas a enviar los datos por AJAX, asigna el evento al botón y es donde vas a obtener el valor de la variable:

$('#save_review').on('click', function() {
    var user_name = $('#user_name').val();
    var user_review = $('#user_review').val();
    var user_email = $('#user_email').val();
    // Toma el valor de la variable
    var user_avatar = gravatar_image_url';

    // ******* Resto de código para petición AJAX ********
}
4
  • Muchas gracias amigo, estaba por sufrir un aneurisma con este tema... Disculpa tengo una pregunta adicional, ya he logrado cargar la url de la imagen de gravatar en la base de datos. Ahora busco la manera de mostrar el avatar en esta parte del html "html += '<div class="col-sm-1"><div class="avatar" img src="PATH TO MYSQL" <h3 class="text-center">'+data.review_data[count].user_name+'</h3></div></div>';" De ante mano mil gracias Commented el 9 mar. 2022 a las 18:38
  • @RobinRamirez, te recomiendo crear una nueva pregunta donde pongas todo el código relevante, es decir, cómo obtienes los datos del usuario (consulta, ciclo, etc.) y qué has intentado para mostrar la imagen.
    – Triby
    Commented el 9 mar. 2022 a las 18:53
  • Voy, te paro el link en un nuevo comentario y gracias ! Commented el 9 mar. 2022 a las 19:01
  • es.stackoverflow.com/questions/519561/… aquí está la pregunta nueva gracias Commented el 9 mar. 2022 a las 19:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.