0

tengo un div que contiene otros div y adentro una imagen que se arma con arreglo, en la imagen actualmente tengo una clase para agregar a un panel cuando se le da click, eso funciona bien, pero quiero que esa función no esté en la imagen si no en el div principal, para que cuando le hagan click en cualquier parte del div ejecute la clase de agregar al panel.

Cuando hago el cambio de la clase al div superior sale un error en el navegador

Uncaught SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)
    at HTMLDivElement.<anonymous> (pdvi:2885)
    at HTMLDivElement.dispatch (jquery.min.js:3)
    at HTMLDivElement.r.handle (jquery.min.js:3)

Esta es la imagen, actualmente la clase de addprod se ejecuta cuando le dan click en el área marcada de azul, quiero que se ejecute cuando le dan click en cualquier parte del cuadro, incluido el texto y los números de abajo.

introducir la descripción de la imagen aquí

Este es el código que me está funcionando bien, a la mitad está la clase addprod que quiero cambiar a la parte superior

<div id="divprod{{ $product->id }}"
                                            class="gallery_product filter {{ $product->idcategory }} category{{$category->id}}"
                                            style="border: 2px solid #D2CFCF; border-radius: 5px; <?= !empty($product->specialprice)
                                                ? "background-color:#e7e26a;" : "background-color:#ffffff;" ?>  display: inline-block;
                                       max-width:2.8vw; min-width:115px; min-height:160px; padding-top: 15px; padding-left: 7px; padding-right: 5px;
                                       margin: 1.03vh; margin-left: 0.6vh; margin-right: 1vh;">
                                            <img data-full="{{$product}}" data-category="{{$category->name}}"
                                                 id="prod{{ $product->id }}"
                                                 @if(strpos($product->image,'https://')!== false)
                                                 src="{{$product->image }}"
                                                 @else
                                                 src="{{'/support/pictures/products/'.$product->image }}"
                                                 @endif


                                                 class="img-responsive addprod"


                                                 data-id="{{ $product->id }}" data-price="{{ $product->saleprice }}"
                                                 data-tax="{{$product->ValorImpuesto->value}}"
                                                 data-name="{{ strtoupper($product->name) }}"
                                                 data-code="{{ $product->barcode }}">

                                            <div style="height: 30px; position: relative;">
                                                <div style="font-weight:bold; font-size: smaller; color:#6A6A6A; text-align: justify; height: 80%; line-height:103%"
                                                     class="perfectScrollbarContainer">
                                                    {{ ucfirst(strtolower($product->name)) }}</div>
                                            </div>

                                            <div style="font-weight:bold; font-size: large; text-align: right;<?= !empty($product->specialprice) ? "color:#e76a6a" : "color:#585858" ?> ">
                                                $<?= empty($product->specialprice) ? $product->saleprice : $product->specialprice ?>
                                            </div>


                                    </div>

Este es el código que cambié donde puse la clase addprod en el div superior

<div class="addprod" id="divprod{{ $product->id }}"
                                            class="gallery_product filter {{ $product->idcategory }} category{{$category->id}}"
                                            style="border: 2px solid #D2CFCF; border-radius: 5px; <?= !empty($product->specialprice)
                                                ? "background-color:#e7e26a;" : "background-color:#ffffff;" ?>  display: inline-block;
                                       max-width:2.8vw; min-width:115px; min-height:160px; padding-top: 15px; padding-left: 7px; padding-right: 5px;
                                       margin: 1.03vh; margin-left: 0.6vh; margin-right: 1vh;">
                                            <img data-full="{{$product}}" data-category="{{$category->name}}"
                                                 id="prod{{ $product->id }}"
                                                 @if(strpos($product->image,'https://')!== false)
                                                 src="{{$product->image }}"
                                                 @else
                                                 src="{{'/support/pictures/products/'.$product->image }}"
                                                 @endif
                                                 class="img-responsive"
                                                 data-id="{{ $product->id }}" data-price="{{ $product->saleprice }}"
                                                 data-tax="{{$product->ValorImpuesto->value}}"
                                                 data-name="{{ strtoupper($product->name) }}"
                                                 data-code="{{ $product->barcode }}">

                                            <div style="height: 30px; position: relative;">
                                                <div style="font-weight:bold; font-size: smaller; color:#6A6A6A; text-align: justify; height: 80%; line-height:103%"
                                                     class="perfectScrollbarContainer">
                                                    {{ ucfirst(strtolower($product->name)) }}</div>
                                            </div>

                                            <div style="font-weight:bold; font-size: large; text-align: right;<?= !empty($product->specialprice) ? "color:#e76a6a" : "color:#585858" ?> ">
                                                $<?= empty($product->specialprice) ? $product->saleprice : $product->specialprice ?>
                                            </div>


                                    </div>

Este es el código de javascript de la clase addprod.

 $(".addprod").click(function () {
            id_venta = $(this).attr("data-id");
            data = JSON.parse($(this).attr("data-full"));


            if (data.categoria.typemodal == modalPhoneNumber) {
                if (canttotal == 0 || flag) {
                    contador = contador + 1;
                    $('#exampleModal').modal('show');

                    //cuando se cierra el modal
                    $("#close_modal").click(function () {
                        $("#service_number").val("");
                        $("#exampleModal").find("#confirm_number").removeClass('is-invalid')
                        $("#exampleModal").find("#alert-div").attr('hidden', true)
                        $('.modal-service').find('.span-se').text('');
                    });
                    //cuando se envia
                    $("#send_modal").click(id_venta, function (e) {
                        // $('.modal-service').find('.span-se').text('');
                        service = false;
                        sendService(id_venta);
                    });

                } else {
                    $("#modalServices").modal('show')
                    $('.btn-services').on('click', function () {
                        // flag = true;
                        cancelarfactura();
                        $("#modalServices").modal('hide')
                        setTimeout(function () {
                            $('#exampleModal').modal('show');
                            $("#send_modal").click(function () {
                                service = false;
                                sendService(id_venta)
                            });
                        }, 500);
                        flag = false;
                    })
                }
            } else {
                if (service) {
                    agregaritem($(this).attr("data-id"));

                } else {
                    $("#CancelarVenta").modal('show');
                }
            }
        });
2
  • Y tu código de javascript? Por lo que veo te falta llevar los atributos data al tag del div el 18 mar. 2020 a las 15:58
  • Hola, gracias, por responder, actualicé la pregunta con el código javascript.
    – CKOXKAR
    el 18 mar. 2020 a las 16:44

1 respuesta 1

0

Tu problema es que olvidaste poner los data en el div

Remuevelos de img y colocalos en su contenedor

<div class="addprod" id="divprod{{ $product->id }}"
data-full="{{$product}}"
data-id="{{ $product->id }}"
>

Puedes usar la funciónde jQuery para sustituir

$(this).attr("data-id")
//por
$(this).data("id")
2
  • Perfecto, solucionado, gracias
    – CKOXKAR
    el 20 mar. 2020 a las 14:55
  • Te agradezco marques la respuesta como la correcta para marcar tu pregunta como resuelta el 20 mar. 2020 a las 18:26

Tu Respuesta

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

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