When opening Popover[bootstrap] the screen loses focus and goes to the top

Asked

Viewed 242 times

0

I have a query screen where I feed an html table with the database records. In one of the columns, of each row, there are some options like edit, delete, add photos and another option that opens the Popover.

This Popover is from Bootstrap 3 and it’s happening that every time I click on these Popover buttons the screen loses focus from where it is and goes to the top of the page, I don’t want it to happen, how to proceed?

Follows the code:

<td class="col-small center">
<div class="action-buttons">
    <div id="popover_content_AlugadoVendido" style="display: none">
        <form class="marcarComoVendido">
            <div>
                <p>
                    <input <%=checkNone%> type="radio" name="marcarComoVendido" id="none" onclick="alugadoVendido('src/rotinas/rotinas.asp?acao=Vendido&id=<%=rsAnuncios("id")%>&tipo=none&idInput=none&outroInput=marcarComoAlugado<%=rsAnuncios("id")%>', 'none');" /> NENHUM
                </p>
                <p>
                    <input <%=checkVendido%> type="radio" name="marcarComoVendido" id="marcarComoVendido<%=rsAnuncios("id")%>" onclick="alugadoVendido('src/rotinas/rotinas.asp?acao=Vendido&id=<%=rsAnuncios("id")%>&tipo=vendido&idInput=marcarComoVendido<%=rsAnuncios("id")%>', 'marcarComoVendido<%=rsAnuncios("id")%>');" /> VENDIDO
                </p>
                <p>
                    <input <%=checkAlugado%> type="radio" name="marcarComoVendido" id="marcarComoAlugado<%=rsAnuncios("id")%>" onclick="alugadoVendido('src/rotinas/rotinas.asp?acao=Vendido&id=<%=rsAnuncios("id")%>&tipo=alugado&idInput=marcarComoAlugado<%=rsAnuncios("id")%>', 'marcarComoAlugado<%=rsAnuncios("id")%>');" /> ALUGADO
                </p>                                
            </div>  
        </form>
    </div>
</div>
<a href="#" class="popoverAlugadoVendido" data-toggle="popover" data-rel="tooltip"><i class="fa fa-cog bigger-130"></i></a>
</td>

And here the javascript:

<script>
$(document).ready(function() {
    $('.popoverAlugadoVendido').popover({
        title: '<b>Alugado ou Vendido</b> <button class="close" data-toggle="clickover" data-dismiss="popover" aria-hidden="true" onclick="$(\'.popoverAlugadoVendido\').popover(\'hide\');">&times;</button>',
        placement : 'left',
        trigger: 'click',
        container: 'body',
        content: function() {
            return $('#popover_content_AlugadoVendido').html();
        },
        html: true
    });
});
</script>

1 answer

2

I decided to remove the href tag from the link.

<a class="popoverAlugadoVendido" data-toggle="popover" data-rel="tooltip"><i class="fa fa-cog bigger-130"></i></a>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.