-2

I was developing a system of Login and Register with PHP, HTML, MySql etc, so, i have a problem with my chat!

I want to get data from textarea, and if the button was clicked, empty the textarea, and send the text to database without refresh a page! I have a system that refresh the data from the database and refresh the div "chat" in index.php !

Help me!

Sampaio Leal
  • 125
  • 1
  • 7

3 Answers3

2

You can use the following code:

The following uses AJAX and PHP, First, make a function to the button, that when the send button is pressed, the AJAX function will be executed:

function msgsend() 
{
 var msg = $("#message").val();
 if (msg!='')
  {
   $('#message').val("");
   $.post("msgsubmit.php", { msg: msg },  
   function(result)
   {  
    msgrecv();
   }); 
  }
}

And then check if new message is received and populate the Messages field:

function msgrecv(){
 $.post("msgchk.php",  {temp0 : 1},
 function(result){  
 var div = document.getElementById('convo');
 div.innerHTML = div.innerHTML + result;
 if (result)
  {
   var elem = document.getElementById('convo');
   elem.scrollTop = elem.scrollHeight;
  }
 }); 
}

So, the logic. Every user has a lastid which tells the message of the id last seen by the user, and then when a new message is added to the database by the user, the AJAX function is called and the message is submitted to the database and msgrecv () function is called to get the details of the message in the conversation box, note that the message box goes empty here, and on the other end, the function msgrecv() is automatically called every 10 seconds tto check for new messages or not, In the PHP code, I have a session variable created with $lastid which stores the id of last message and then check the database for message id > $lastid and if there is something, just echo/print it out which will be taken as the result of the AJAX function...

P.S. - I have used this code from one of my projects and since I don't know your code, so you may need to modify this according to your code...

And the elem.scrollTop = elem.scrollHeight; is just to scroll to bottom of the convo box (Which is the new message, as new messages appear in the bottom of the convo box), so whenever a new message arrives, the user won't have to scroll down to see that...

There is an error Updating the database:

Well, then you can see my PHP code for reference: (This is for Message Submit)

$msgcount = $row['messages'];
$msgcount = $msgcount + 1;
$chk=1;
$sql = "INSERT INTO ".$jobid."_conversation (date, from_id, from_username, to_writer, message, writer_read) 
        VALUES (now(), $userid, '$username', 0, '$message', 0)";
if (mysqli_query($con, $sql)) 
{
 $sql1 = "UPDATE jobs SET messages='$msgcount' WHERE id=$jobid";
 if(mysqli_query($con, $sql1))
  {
   echo 1;
  }
 else
  {
   echo 0;
  }
 }
 else
 {
  echo 0;
 }

Here, echo-ing 1 for succcess and 0 for failure in adding in the databse...

Now for Message Check:

$lastid = $row1['id'];
if ( $lastid > $id)
{
 $to_writer = $row1['to_writer'];
 $message = $row1['message'];
 $rtrn = $rtrn."<div class=\"row\">";
 if ($to_writer == 1)
 {    
  $rtrn = $rtrn."<div class=\"well well-sm col-sm-offset-1 col-sm-8\">".nl2br($message)."</div>";
 }
 else
 {
  $rtrn=$rtrn."<div class=\"well well-sm col-sm-offset-3 col-sm-8\">".nl2br($message)."</div>";
 }
  $rtrn=$rtrn."</div>";
}

Here, $towriter is the username of the person to whom the message is sent, and this checks whether the message should be on the right side in the conversation box or in the left side of the conversation box, (Differentiating between sent and received messages)... And rest some HTML is there because I was using Bootstrap to display each message in a well...

Hope this helps... :)

Aayush Sinha
  • 377
  • 4
  • 18
  • hello , thanks for the great help , but I'm in trouble ! I used this your code , and something is going wrong , I created a form and a textarea and a button without the type "submit" , then your script , grab the text of the textarea , and sends to the php file and sends to the database ? well, it is giving an error, the method is post? if so aki is all right , but is not sending anything! – Sampaio Leal Aug 03 '16 at 00:16
  • Hope this helps @SampaioLeal – Aayush Sinha Aug 03 '16 at 00:26
1

You need to do a ajax event to get the content of your textarea and send it to the database, i recommend a simple framework like JQuery: http://api.jquery.com/jquery.ajax/

Albert Abdonor
  • 921
  • 8
  • 15
0

I have this code:

<?php
session_start();

require_once("conf/mysql.php");
$nome = $_SESSION["nome"];
$mensagem = $_POST["msg"];

mysqli_query($con, "INSERT INTO chat (user, message) VALUES ('$nome','$mensagem')");
?>

And the Index is:

    <!-- Chat -->
<div class="container">

<div class="row">

<div class="col-md-8 col-md-offset-2">
<div class="panel container-fluid">
<center><h4><b> Chat: </b></h4></center>

<div class="well" >
<div class="loader"></div>

<script>
    $(document).ready(function () {
        $('#msg').change(function () {
            if ($.trim($('#msg').val()).length < 1) {

                $('#enviar').addClass('disabled');

            } else {

                $('#enviar').removeClass('disabled');
                //No guarantee it isn't mindless gibberish, sorry.

            }
        });
    });
</script>

<script type="text/javascript" language="javascript">
function msgsend() 
{
 var msg = $("#msg").val();
 if (msg!='')
  {
   $('#msg').val("");
   $.post("enviar.php", { msg: msg },  
  }
}
</script>

<div id="chat">
<div id="status" style="display: none;"></div>
</div>
</div>

<center>
<form id="ajax" role="form" method="post">

<div class="form-group">

<textarea id="msg" type="text" name="chat" class="form-control" placeholder="Digite aqui..."></textarea>


</div>
</form>
<button id="enviar" name="submit" class="btn btn-success disabled"> Enviar </button>

</center>

</div>

</div>
</div>

</div>
Sampaio Leal
  • 125
  • 1
  • 7