How to insert jqueryUi (Show Effect -> Drop) in a php page

Question

I'm trying to write from my database into my page, using one effect. The objective is, when it writes my comment on the page, show it with an effect.

<?php
    if(count($_POST) > 0){
        echo '<script language="javascript">';
        echo '$( "#toggle" ).toggle( "drop" );';
        echo '</script>';

        $db = new mysqli("localhost", "root", "usbw", "trab_projeto");

        $qr = $db->query("INSERT INTO comments(comment) VALUES ('{$_POST['mensagem']}')");

        echo "<fieldset id='toogle'>";
        echo "<p>";
        $row = $db->query("SELECT * FROM comments ORDER BY comment_id DESC LIMIT 1")->fetch_assoc();
        echo $row["comment"];
        echo "</p>";
        echo "</fieldset>";
    }
?>

The part of the script doesn't work. These code is executed when I click on a submit form.

<div class="cadastro">
    <form action="" id="form-msg" method="post" enctype="multipart/form-data">
        <fieldset>
            <p>
                <span><b>Escreva aqui o seu comentário:</b></span><br>
                <textarea name="mensagem" style="margin: 0px; width: 511px; height: 119px;"></textarea>
            </p>
            <input type="submit" value="Enviar">
        </fieldset>
    </form>     
</div>

Answer 1

To return a JSON response, you must first place this in your header(). At the top of your script append:

header('Content-type: javascript/json');

Moving on, to prevent your SQL injection I have changed the driver to PDO which you can find documentation on.

header('Content-type: javascript/json');
$driver = new PDO('mysql:host=localhost;dbname=trab_projeto', 'root', 'password');
$state = false;
if(
    !isset($_POST['mensagem']) &&
    !empty($_POST['mensagem'])
) {
    $driver->Prepare('INSERT INTO comments (comment) VALUES (?)');
    $state = $driver->execute(array($_POST['mensagem']));
}
if($state)
{
    echo json_encode(array('status' => true));
    exit;
}
echo json_encode(array('status' => false));
exit;

For future notice, this 'comment' it not attached to any 'thread' scope. If you have multiple posts, you should give each post a unique ID and cross-reference the post ID with the comment so you can load the comments for that specific post.

You can then use jQuery to send requests like so:

$(document).ready(function() {
    var form = $('#form-msg');
    comment = form.closest('textarea').val();
    $.post('the_file_path.php', { mensagem: comment })
        .done(function(response) {
            if(response.status) {
                // todo: success using the effect below
            }
        });
});

Note the following code above needs a click() attached to your submit button. Consider removing this line of code:

<input type="submit" value="Enviar">

And using:

<button type='button'>Enviar</button>

So you can target it through the form like so:

form.closest('button').click(function() {
    // ...
}

You could use an effect when showing the comment to the user-end like so:

var commentToAdd = document.createElement('p');
commentToAdd.innerHTML = comment;
$('#comments').append(commentToAdd);
commentToAdd.show('slow');