0

Tengo una tabla de boostrap en la cual en una celda del cada row podria cargar el valor de un array convertido a base 64, digo podria porque aveces la propiedad que mapea ese valor podria venir en null:

    <table id="tableOcMateriales" class="table table-condensed  table-striped table-bordered table-hover dataTables_length" style="width: 100%; align-content: center">
    <thead class="ColorHeaderTable">
        <tr>
            <th style="width: 20%">
                @Html.DisplayNameFor(model => model.MaterialDescripcion)
            </th>
            <th style="display: none"></th>
        </tr>
    </thead>
    <tbody class="celda">
        @foreach (var item in Model)
        {
            <tr data-toggle="popover">
                <td style="width: 20%">
                    @Html.DisplayFor(modelItem => item.MaterialDescripcion)
                </td>
                <td style="display: none">
                    @Html.DisplayFor(modelItem => item.ImagenB64)
                </td>
            </tr>
        }
    </tbody>
</table>

Estoy tratando de mostrar la imagen en un popover cuando el usuario haga click en el row del Table, para eso estoy usando este script:

<script type="text/javascript" language="javascript">
$(document).ready(function () {
   $('#tableOcMateriales').on('click', 'tbody tr', function (event) {
        var img;
        if (!$(this).closest('tr').find('td').hasClass('dataTables_empty')) {

            $(this).addClass('highlightchecked').siblings().removeClass('highlightchecked');

            var imagenBase64 = $(this).closest('tr').find('td:eq(7)').text();
            if (imagenBase64 !== "") {
                img = '<div id ="image"><img src ="data:image/jpeg;base64,' + imagenBase64 + '\" style="width:370px;"/></div>"';
            }
            else {
                img = '';
            }
        }

        if (img !== "") {
            var closebtn = $('<button/>', {
                type: "button",
                text: 'X',
                id: 'close-preview',
                style: 'font-size: initial;'
            });

            closebtn.attr("class", "close pull-right");

            $('[data-toggle="popover"]').popover({
                trigger: 'focus',
                container: '.modal-body',
                placement: 'auto',
                title: "<strong>Preview</strong>" + $(closebtn)[0].outerHTML,
                content: img,
                html: true
            }).popover('show').not(this).popover('hide');

        }

        $('body').on('click', '#close-preview', function (e) {

            $('[data-toggle=popover]').popover('hide');
        });

    });
});

Con el script anterior logro mostrar el popover pero me muestra la misma imagen en todos los rows, quiero que si el row no contiene el valor de imagen no me muestre el popover.

2 respuestas 2

1

Bueno formas para solucionar al tema supongo que hay muchas pero si le pones la propiedad a un clase no es más facil, por ejemplo puedes poner la clase solo a los tr que cumple tu condición entonces el código cambiaria por el siguiente;

 $('#tableOcMateriales').on('click', 'tr.alguna-clase', function (event) {
    ...
    ...
 });

ahora si este paso no se puede hacer la condicion para validar el contenido del td seria la siguiente;

if( $(this).find("li:eq(1)").html() != ''){
...
...
} 

espero te pueda ayudar

0

Creo que si en lugar de poner el evento a ese row, porque no anclas el evento .on('click'...) a una clase que solo le pongas a la celda con imagen, algo como:

var myClass;

if (hasImagen(current_row)) {
  myClass = 'hasImageClass';
} else {
  myClass = '';
}

y cuando pintes el row haces un

<tr class="<% myClass; %>"... 

y eso solo escribirá cuando tengas imagen.

Con eso ya solo tienes los rows con la clase de 'hasImageClass' ahora puedes anclar el evento click a esta clase.

Saludos!

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.