Success Alert

Question

Success Alert

Navigation

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

0

I have a modal to dial friends, when the user clicks on dial, I call the onclick that makes the request for the controller.

I want to send a success message to the user, I have a div with display none and I want to make it visible when POST occurs.

However, with POST the page is reloaded and the div returns to display none without even the message.

 <div class="alert alert-success" role="alert" style="display:none;">
  Amigo marcado!</div>


function marcar(e){

        $.ajax({
          url: '/MarcarAmigo/MarcarAmigos/',
          type: "POST", 
          cache: false,
          data: {'publicacao': publicacao, 'amigos_marcados': amigos_marcados},
          success: function () {
            $(".alert").css("display", "block");
          }
        });    }

jquery ajax twitter-bootstrap

asked by anonymous 10.10.2018 / 19:45

2 answers

Use in neo4j WHERE clauses conditioning if value exists Android Webview custom error message

score 0 · Answer 1

Oops, try to give a prevent defaults

function funcaoComAjax(e) {
   e.preventDefault();
   alert("SEM RELOAD");
   // FAZ TUA REQUISIÇÃO AJAX
}

<a href="https://pt.stackoverflow.com" onclick="funcaoComAjax(event);">Clica</a>

[edit]

I made a fiddle using jQuery (not mandatory) with the idea of the comment, put the prevent default on the form submit and make the ajax request with the form data link

score 0 · Answer 2

The example below shows your code showing the successful div running ajax successfully.

function marcar(e) {

  $.ajax({
    url: '/MarcarAmigo/MarcarAmigos/',
    type: "POST",
    cache: false,
    data: {
      'publicacao': publicacao,
      'amigos_marcados': amigos_marcados
    },
    success: function() {
      //fadeIn() ou show() faz aparecer uma div oculta
      $(".alert").fadeIn()
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!--Botãoparachamaroeventodafunçãoajax--><buttononclick="marcar()">Executar Ajax</button>

<!--Sua div de sucesso oculta-->
<div class="alert alert-success" role="alert" hidden>
   Amigo marcado!
</div>