AJAX - Appearing Ivs

Question

How do I get one div on the return of AJAX, for example:

I type in input a user, and send the data by AJAX thus:

$("#botao").click(function(){
    var xprocesso = $("#segundo").val();

    $.post('aquirecebe.php',{processo:xprocesso},
        function(data)
        {
            $(".aparecerresultado").html(data);
        })

});

On the page that receives the data, make a check if the user you are looking for exists.

$sql = mysql_query("SELECT * FROM utilizadores WHERE n_processo = '".$processo."'");

        if(!$sql)
        {
            echo '<script> swal("ERRO!", "Contacte o programador.", "error") </script>';
        }else
        {   
            $contar = 0;
            $contar = mysql_num_rows($sql);

            if($contar <= 0){
                echo '<script> swal("Oops","Pedimos desculpa, mas o utilizador não foi encontrado.","error") </script>';

            }else{
                echo '<script> swal("Sucesso!", "Utilizador encontrado. Pode prosseguir para o registo.", "success") </script>';

            }
        }

so far everything ok. Now I wanted that when the success message appears (means that a user has been found), that a div. How to return the code javascript for AJAX?

Answer 1

Sending script to run on the client side is not very good. It would be better to pass a JSON and have some logic in the browser to do what you need. I leave an example with Sweet Alert and also with what you ask: add HTML with the answer.

For example in PHP you could have:

$sql = mysql_query("SELECT * FROM utilizadores WHERE n_processo = '".$processo."'");

if (!$sql) {
    echo '{"status": "ERR", "swal": ["ERRO!", "Contacte o programador.", "error"]}';
} else {
    $contar = 0;
    $contar = mysql_num_rows($sql);

    if ($contar <= 0) echo '{"status": "OK", "existe": false, "swal": ["Oops","Pedimos desculpa, mas o utilizador não foi encontrado.","error"]}';
    else echo '{"status": "OK", "existe": true, "swal": ["Sucesso!", "Utilizador encontrado. Pode prosseguir para o registo.", "success"]}';
}

And then in Javascript:

$("#botao").click(function() {
    var xprocesso = $("#segundo").val();
    $.post('aquirecebe.php', {processo: xprocesso}, function(data) {
        var res = JSON.parse(data);

        // mostrar resultado via Sweet Alert
        swal.apply(swal, res.swal);

        // mostrar resultado via DIV
        var $resultado = $(".aparecerresultado");
        $resultado.html(""); // para apagar
        var titulo = $('<h3/>', {text: res.swal[0]}).appendTo($resultado);
        var texto =  $('<hspan/>', {text: res.swal[1]}).appendTo($resultado);
    });
});

Answer 2

There are several ways to do this, the most common would be that way:

<div id="resultado" style="display:none;"></div>
<script>
$("#botao").click(function(){
    var xprocesso = $("#segundo").val();

    $.post('aquirecebe.php',{processo:xprocesso},
        function(data)
        {
            $("#resultado").css("display", "");
            $("#resultado").html(data);
        })

});
</script>

This way you can style your div with css any way you want.

Answer 3

You’re returning a script to appear inside a div, I don’t quite understand. Why not return the success/error message as a simple HTML? For example:

<p>Mensagem de sucesso</p>

And then in the function of success of Ajax you do:

$(".aparecerresultado").html(data);

And so it will appear the HTML returned directly in div. You can use CSS and format better to make the message more attractive to the user.