Feed div after receiving new data

Question

I started to implement a chat and needed to update the div where the messages are inserted, but when I get new messages I need to update the page to have access, and if I set a timeout to 10 in 10 seconds, and I’m still typing something there refreshes the page and I miss what I was writing, could help me, I’m new in php and do not know where to start to solve this problem, follows code from

{{--collumns--}}
    <div class="col-md-6 col-md-offset-3">

        <!-- Construct the box with style you want. Here we are using box-danger -->
        <!-- Then add the class direct-chat and choose the direct-chat-* contexual class -->
        <!-- The contextual class should match the box, so we are using direct-chat-danger -->
        <div class="box box-success direct-chat direct-chat-success" style="height: 560px;">
            <div class="box-header with-border">
                <h3 class="box-title">Chat com <b>{{$amigo->name}}</b></h3>
                <div class="box-tools pull-right">
                    {{--<span data-toggle="tooltip" title="3 New Messages" class="badge bg-success">3</span>--}}
                    {{--<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>--}}
                    <!-- In box-tools add this button if you intend to use the contacts pane -->
                    <button class="btn btn-box-tool" data-toggle="tooltip" title="Contatos" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
                    {{--<button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Fechar"><i class="fa fa-times"></i></button>--}}
                    <button onclick="location.reload();" class="btn btn-box-tool" data-widget="tooltip" data-toggle="tooltip" title="Atualizar"><i class="fa fa-refresh"></i></button>
                </div>
            </div>
            <!-- /.box-header -->
            <div class="box-body" style="height: 500px">
                <!-- Conversations are loaded here -->
                <div class="direct-chat-messages" style="height: 480px">

                @if(count($conversa) == 0)

                    <!-- Message. Default to the left -->
                        <div class="direct-chat-msg">
                            <div class="direct-chat-info clearfix">
                                <span class="direct-chat-name pull-left">{{ trans('adminlte_lang::message.name_system_mini') }}</span>
                            </div>
                            <img class="direct-chat-img" src="{{url('img-projeto/logo.png')}}" alt="message user image">

                        <!-- /.direct-chat-img -->
                            <div class="direct-chat-text">
                                Você ainda não iniciou uma conversa? envie uma mensagem!
                            </div>
                            <!-- /.direct-chat-text -->
                        </div>
                        <!-- /.direct-chat-msg -->

                @endif

                @foreach($conversa as $c)
                        {{--messages-friend--}}
                        @if($c->user_send != \Illuminate\Support\Facades\Auth::user()->id)
                            <!-- Message. Default to the left -->
                            <div id="message_{{$c->id}}"class="direct-chat-msg">
                                <div class="direct-chat-info clearfix">
                                    <span class="direct-chat-name pull-left">{{$c->user_send_name}}</span>
                                    <span class="direct-chat-timestamp pull-right">{{date('H:i:s', strtotime($c->created_at))}}</span>
                                </div>
                                <!-- /.direct-chat-info -->
                                @if($c->user_send_file_path == null)
                                    <img class="direct-chat-img" src="{{url('img-projeto/profile.jpg')}}" alt="message user image">
                                @else
                                    @if(!file_exists('storage/users/'.$c->user_send_file_path))
                                        <img class="contacts-list-img" src="{{url('img-projeto/profile.jpg')}}" alt="Contact Avatar">
                                    @else
                                        <img class="direct-chat-img" src="{{url('storage/users/'.$c->user_send_file_path)}}" alt="message user image">
                                    @endif
                                @endif

                                <!-- /.direct-chat-img -->
                                <div class="direct-chat-text">
                                    {{$c->message}}&nbsp;&nbsp;<button type="button" style="color:green; background: transparent;"><i class="fa fa-trash"></i></button>
                                </div>
                                <!-- /.direct-chat-text -->
                            </div>
                            <!-- /.direct-chat-msg -->
                        {{--my-messages--}}
                        @else
                            <!-- Message to the right -->
                            <div class="direct-chat-msg right">
                                <div class="direct-chat-info clearfix">
                                    <span class="direct-chat-name pull-right">{{$c->user_send_name}}</span>
                                    <span class="direct-chat-timestamp pull-left">{{date('H:i:s', strtotime($c->created_at))}}</span>
                                </div>
                                <!-- /.direct-chat-info -->
                                @if($c->user_send_file_path == null)
                                    <img class="direct-chat-img" src="{{url('img-projeto/profile.jpg')}}" alt="message user image">
                                @else
                                    @if(!file_exists('storage/users/'.$c->user_send_file_path))
                                        <img class="contacts-list-img" src="{{url('img-projeto/profile.jpg')}}" alt="Contact Avatar">
                                    @else
                                        <img class="direct-chat-img" src="{{url('storage/users/'.$c->user_send_file_path)}}" alt="message user image">
                                @endif
                            @endif
                                <!-- /.direct-chat-img -->
                                <div class="direct-chat-text">
                                    {{$c->message}}&nbsp;&nbsp;
                                    <button type="button" class="pull-right" title="Remover sua cópia da mensagem"
                                            style="color:white; background: transparent; padding-right: 5px;">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                    <button type="button" onclick="abreModalEditMessage('{{$c->message}}','{{$c->id}}')" class="pull-right" title="Editar mensagem"
                                            style="color:white; background: transparent; padding-right: 5px;">
                                        <i class="fa fa-pencil-square-o"></i>
                                    </button>
                                </div>
                                <!-- /.direct-chat-text -->
                            </div>
                            <!-- /.direct-chat-msg -->



                        @endif
                    @endforeach

                </div>
                <!--/.direct-chat-messages-->

                <!-- Contacts are loaded here -->
                <div class="direct-chat-contacts" style="height: 500px">
                    <ul class="contacts-list">
                        @foreach($users as $u)
                            <li>
                                <a href="{{action("ChatController@oneToOne", $u->id)}}">
                                    @if($u->file_path == null)
                                        <img class="contacts-list-img" src="{{url('img-projeto/profile.jpg')}}" alt="Contact Avatar">
                                    @else
                                        @if(!file_exists('storage/users/'.$u->file_path))
                                            <img class="contacts-list-img" src="{{url('img-projeto/profile.jpg')}}" alt="Contact Avatar">
                                        @else
                                        <img class="contacts-list-img" src="{{url('storage/users/'.$u->file_path)}}" alt="Contact Avatar">
                                        @endif
                                    @endif
                                    <div class="contacts-list-info">
                                      <span class="contacts-list-name">
                                            {{$u->name}}
                                            <small class="contacts-list-date pull-right">Ativo desde {{date('d/m/Y', strtotime($u->created_at))}}</small>
                                        </span>
                                        @switch($u->st_chat)
                                        @case(0)
                                            <span class="contacts-list-msg">{{$u->apelido}}</span>
                                            &nbsp;<i class="fa fa-circle" style="color: silver" title="O Usuário parece estar off-line"></i>
                                        @break
                                        @case(1)
                                            <span class="contacts-list-msg">{{$u->apelido}}</span>
                                            &nbsp;<i class="fa fa-circle text-success" title="O Usuário está on-line"></i>
                                        @break
                                        @endswitch
                                    </div>
                                    <!-- /.contacts-list-info -->
                                </a>
                            </li>
                            <!-- End Contact Item -->
                        @endforeach
                    </ul>
                    <!-- /.contatcts-list -->
                </div>
                <!-- /.direct-chat-pane -->
            </div>
            <!-- /.box-body -->

            {{--form--}}
            <form name="form_msg" id="form_msg" class="form-group" action="{{action('ChatController@store')}}" method="post" enctype="multipart/form-data">

                <!-- /.box-footer -->
                <div class="box-footer">

                    {{--input-group--}}
                    <div class="input-group">

                            <input type="hidden" name="_token" value="{{ csrf_token() }}"/>

                            <input type="hidden" name="user_receive" value="{{$amigo->id}}"/>

                            <input type="text" name="message" placeholder="Escreva uma mensagem" class="form-control">

                            <span class="input-group-btn">

                                <button type="submit" class="btn btn-primary btn-flat">Enviar</button>

                            </span>


                    </div>
                    {{--input-group--}}

                </div>
                <!-- /.box-footer -->

            </form>
            {{--form--}}

        </div>
        <!--/.direct-chat -->

    </div>
    {{--/container--}}

</div>
{{--/container--}}

This is the method that feeds the div:

public function oneToOne($id)
{
    /*configurações do usuário logado*/
    $config = $this->configUserLogin();

    $amigo = User::where('id','=', $id)->get()->first();

    $conversa = Chat::whereIn("chats.user_send", [Auth::user()->id, $id])
        ->whereIn("chats.user_receive", [Auth::user()->id, $id])
        ->join('users as user_send', 'user_send.id', '=', 'chats.user_send')
        ->join('users as user_receive', 'user_receive.id', '=', 'chats.user_receive')
        ->select("chats.*", "user_send.id as user_send_id",
            "user_send.name as user_send_name",
            "user_send.file_path as user_send_file_path","user_receive.id as user_receive_id",
            "user_receive.name as user_receive_name",
            "user_receive.file_path as user_receive_file_path")
        ->orderBy("chats.id", "desc")->get();

    $users = User::where("id", "like", "%%")->where("nivel_acesso", "<>", "MS")->get();

    return View::make('chat.one-to-one')->with(compact('conversa', 'amigo', 'config', 'users'));
}

Answer 1

The way you’re willing would have to use AJAX to update the div without updating the page. Ajax is a technique that uses javascript to request and update data on the page without the need to update the page itself. ex:

Your Controller:

public function ajax(){
$message = "sua menssagem";
return response()->json(['response' => message]);
}

Its Routes:

get('/test', 'SeuController@ajax');

Calling Java on the page:

<script>
function atualizaDiv(){
  $.ajax({
    type:'GET',
    url: '/test',
    dataType : 'json',
    success: function(response){
        $('#idDaSuaDiv').html(response);
    }
  });
}
</script>

Then just call this function when you have to update the data. I do not know if it was well explained, more or less this... rsrsrsrsr.