CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap-3user-experience
LeoFelipe
LeoFelipe

Reputation: 281

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

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

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

Follows the code:

<td class="col-small center">
<div class="action-buttons">                                    
<a class="popover-dw" href="#" data-popover="true">
  <i class="fa fa-cog bigger-130" data-toggle="tooltip"></i>
</a>
<div class="popover-content" style="display:none">
  <form class="marcarComoVendido">
    <div>
      <p>
        Anúncio: <%=rsAnuncios("id")%>
      </p>
      <p>
        <input <%=checkVendido%> type="checkbox" id="marcarComoVendido<%=rsAnuncios("id")%>" onclick="alugadoVendido('src/rotinas/rotinas.asp?acao=Vendido&id=<%=rsAnuncios("id")%>&tipo=vendido&idInput=marcarComoVendido<%=rsAnuncios("id")%>&outroInput=marcarComoAlugado<%=rsAnuncios("id")%>', 'marcarComoVendido<%=rsAnuncios("id")%>', 'marcarComoAlugado<%=rsAnuncios("id")%>');" /> Marcar anúncio como VENDIDO
      </p>
      <p>
        <input data-rel="tooltip" title="Republicar Anúncio" <%=checkAlugado%> type="checkbox" id="marcarComoAlugado<%=rsAnuncios("id")%>" onclick="alugadoVendido('src/rotinas/rotinas.asp?acao=Vendido&id=<%=rsAnuncios("id")%>&tipo=alugado&idInput=marcarComoAlugado<%=rsAnuncios("id")%>&outroInput=marcarComoVendido<%=rsAnuncios("id")%>', 'marcarComoAlugado<%=rsAnuncios("id")%>', 'marcarComoVendido<%=rsAnuncios("id")%>');" /> Marcar anúncio como ALUGADO
      </p>
    </div>
  </form>
</div>  
</div>
</td>

And here javascript:

$('body').popover({
    selector: '[data-popover]',
    title: '<b>Alugado ou Vendido</b> <button type="button" id="close" class="close" onclick="$(&quot;[data-original-title]&quot;).popover(&quot;hide&quot;);">&times;</button>',
    placement : 'left',
    trigger: 'click',
    html: true,
    delay: {show: 50, hide: 400},
    content: function(ele) {
        console.log(ele,this);
        return $(this).next(".popover-content").html();
    }
});

$('body').on('click', function(e) {
    if (typeof $(e.target).data('original-title') == 'undefined' &&
  !$(e.target).parents().is('.popover.in')) {
        $('[data-original-title]').popover('hide');
    }
});

Upvotes: 0

Views: 581

Answers (1)

LeoFelipe
LeoFelipe

Reputation: 281

I had to take off the tag href:

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

Upvotes: 1

Related Questions