How to show bootstrap popover only when the cell has a value

Question

How to show bootstrap popover only when the cell has a value

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I have a boostrap table in which in a cell of each row I could load the value of an array converted to base 64, I would say because sometimes the property that maps that value could come in 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>

I am trying to show the image in a popover when the user clicks on the row of the Table, for that I am using this 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');
        });

    });
});

With the previous script I manage to show the popover but it shows me the same image in all the rows, I want that if the row does not contain the image value it does not show me the popover .

javascript jquery datatables asp.net-mvc-5 bootstrap-3

asked by jose luis garcia 22.02.2017 в 00:19

source

2 answers

I can not open a form more than once from another form FileFilter problem with the if-else

score 1 · Answer 1

Well ways to solve the issue I guess there are many but if you put the property to a class is not easier, for example you can put the class only to the tr that meets your condition then the currency code for the next one;

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

now if this step can not be done the condition to validate the content of the td would be the following;

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

I hope I can help you

score 0 · Answer 2

I think if instead of putting the event in that row, because you do not anchor the event .on ('click' ...) to a class that you only put in the cell with an image, something like:

var myClass;

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

and when you paint the row you make a

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

and that will only write when you have an image.

With that you only have the rows with the 'hasImageClass' class now you can anchor the click event to this class.

Greetings!