Does not return Number of unread messages

Question

I intend to display the number of unread messages. I am using the following code: Where returns the value of unread messages:

<a href="#" class="notification"> <input type="button" id="btn-mensagem" name="btn-mensagem" class="botao" data-toggle="modal" data-target="#modal-mensagem" style="float: right; margin-right:15%;"> <span class="badge" id='msgNumero'></span>  </a>

I’m using the following script:

function novasMensagens(numero){
  $.ajax({
      type: 'GET',
      url : './fetchbusca',
      success : function(data) {
          var numero = data;    
          var retorno = numero > 0 ? "" : numero;   

document.getElementById("msgNumero").innerHTML = novasMensagens(numero);          
      }   
  });

}

Does not return the value, as shown in the image:

Answer 1

whereas the AJAX request is asynchronous, you must popular your little balloon in the method success of the request. See:

function novasMensagens(){ // não precisa do parâmetro: numero
  $.ajax({
      type: 'GET',
      url : './fetchbusca',
      success : function(data) {
          //var numero = data;    
          //var retorno = numero > 0 ? "" : numero;
          document.getElementById("msgNumero").innerHTML = data;
      }   
  });

}

So, just call the function and upon completion it will popular the element #msgNumero with the return of the request.

That means you won’t call the function that way:

document.getElementById("msgNumero").innerHTML = novasMensagens(5); // chamada errada!

Now, just call the function directly in your script:

novasMensagens();