Send a command without updating the page

Asked

Viewed 50 times

0

I am developing a web application using Playframework, and I have a problem when clicking the command I would like to display an Alert and not redirect the page as it is doing, redirecting to a blank screen. Instead, show only Alert stating that the command was sent and keep the current page on the screen.

My html page where I send the commands: where in the datatable I have the commands enable, disable and restart, these are the buttons where to send the command and only show an Alert

<div class="panel-body">
    <ul class="list-group">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <i class="fa fa-cubes"></i> Detalhes Patch panels
                    </h3>
                </div>
                <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover table-striped">
                            <thead>
                                <tr>
                                    <th>Patch panel</th>
                                    <th>MAC</th>
                                    <th>IP</th>
                                    <th>Número de portas</th>
                                    <th>Status</th>
                                    <td></td>
                                </tr>
                            </thead>
                            <tbody>
                                #{list items:t.patchpanels, as:'p'}
                                <tr>
                                    <td>${p.nome}</td>
                                    <td>${p.mac}</td>
                                    <td>${p.ip}</td>
                                    <td>${p.numPortas}</td>
                                    <td>${p.status}</td>
                                    <td><center>
                                            <!-- Adicionado a função para enviar o comando do MQTT-->
                                            <!-- Adicionado a função para enviar o comando do MQTT -->
                                            <a href="@{comandosMqtt.ativar(p.ip, '0')}"><span class="btn btn-success btn-xs acaomqtt" > Ativar </span></a>
                                            <a href="@{comandosMqtt.reiniciar(p.ip, '0')}"><span class="btn btn-warning btn-xs acaomqtt" > Reiniciar </span></a> 
                                            <a href="@{comandosMqtt.desativar(p.ip, '0')}"><span class="btn btn-danger btn-xs acaomqtt"> Desativar </span></a>
                                            <a href="@{patchpanels.detalhesPatchpanel(p.id)}"><span class="btn btn-primary btn-xs"> Detalhes </span></a>
                                        </center></td>
                                </tr>
                                #{/list}
                            </tbody>


    </table>


    </div>
                </div>
            </div>
        </div>
    </ul>
</div>

When I click the command button it the MQTT class:

public class ComandosMqtt extends Controller {
@AuditoriaOctopus
public static void ativar(String ip, String porta, String comando) throws MqttException {
    Mqtt mqtt = Mqtt.getInstance();

    mqtt.comandoMqtt(ip, porta, "active"); //envia os valores como parâmetro para a função
    //renderJSON("Ativado");//mostra apenas o IP na tela, é necessário alterar para poder mostrar novamente a página recarregada

}
@AuditoriaOctopus
public static void reiniciar(String ip, String porta, String comando) throws MqttException {
    Mqtt mqtt = Mqtt.getInstance();

    mqtt.comandoMqtt(ip, porta, "restart");
    //renderJSON("Reiniciado");
}
@AuditoriaOctopus
public static void desativar(String ip, String porta, String comando) throws MqttException {
    Mqtt mqtt = Mqtt.getInstance();

    mqtt.comandoMqtt(ip, porta, "deactive"); 
    //renderJSON("Desativado");
}

public ComandosMqtt(String ip, String porta) {
    try {
        Mqtt.getInstance();
    } catch (MqttException e) {
        e.printStackTrace();
    }
}

}
  • What function captures clicks on links?

  • If you don’t want there to be redirection, a code in jQuery would solve: $(".table-responsive td a").click(function(e){e.preventDefault();});

  • @dvd Voce could tell me how it would look in my code? I could not abstract the code you gave me

  • Just put that code at the bottom of the page: <script>$(".table-responsive td a").click(function(e){e.preventDefault();});</script>, whereas you are using jQuery

1 answer

-1


that solves:

<div class="col-lg-6">
              <div class="articles card">
                <div class="card-close">
                </div>
                <div class="card-header d-flex align-items-center">
                  <h2 class="h3">Palhetas   </h2>
                  <div  class="badge badge-rounded bg-green"> <span id="badge_palhetas" >${palCount}</span> Novas      </div>
                </div>
                <div id="palhetas" class="card-body no-padding">
                   #{list items:palhetas, as:'p'} 
                  <div class="item d-flex align-items-center">
                  <input type="hidden" name="palheta.id" value="${p?.id}" />         
                    <div class="text"><a href="#">
                        <a href="javascript:void(0)" class="torre"> <input type="hidden"name="palheta.id" value="${p.id}" /> 
                        <font size="3">Agente: ${p.agente.nome}</font> </a><font size="2"> Bairro: ${p.endereco.bairro}   </font></div>
                  </div>#{/list}  
                </div>
              </div>
            </div>
            <!-- Check List -->
            <div class="col-lg-6">
              <div class="articles card">
                <div class="card-close">
                </div>
                <div class="card-header d-flex align-items-center">
                  <h2 class="h3">Denúncias   </h2>
                  <div class="badge badge-rounded bg-green"> <span id="badge_denuncias" >${denCount}</span> Novas      </div>
                </div>
                <div id="denuncias" class="card-body no-padding">
                  #{list items:denuncias, as:'d'}    
                  <div class="item d-flex align-items-center">
                  <input type="hidden" name="denuncia.id" value="${d?.id}" />         
                    <div class="text"><a href="#">                         
                        <font size="3">Nome: ${d.nome}</font> </a><font size="2"> Bairro: ${d.bairro}   </font></div>
                  </div>#{/list}    
                </div>
                </div>
              </div>
            </div>
          </div>
        </section>

<script type="text/javascript">
            setInterval(function(){$("#palhetas").html("");$.get("@{Services.listarPalhetas}", function(data){
                //console.log(data);
                for(var i = 0; i < data.length;i++){
                    $("#palhetas").prepend('<a href="palhetas/detalhesPalhetas?id='+i+'"><div class="item d-flex align-items-center"><div class="text"><font size="3"><center>Agente: '+data[i].agente.nome+'</center></font><font size="2">Endereço: '+data[i].endereco.rua+'</font></div></div></a>')
                }

                if(data.length>0){
                    $("#badge_palhetas").html(data.length)
                }
            })}, 10000)

            setInterval(function(){$("#denuncias").html("");$.get("@{Services.listarDenuncias}", function(data){
                console.log(data)
                for(var i = 0; i < data.length;i++){
                    $("#denuncias").prepend('<a href="denuncias/detalhesDenuncias?id='+i+'"><div class="item d-flex align-items-center"><div class="text"><font size="3"><center>Nome: '+data[i].nome+'</center></font><font size="2">Bairro: '+data[i].bairro+'</font></div></div></a>')
                }

                if(data.length>0){
                    $("#badge_denuncias").html(""+data.length)
                }
            })}, 10000)
        </script> 

Browser other questions tagged

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