Feed div after receiving new data

Asked

Viewed 27 times

0

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'));
}
php javascript jquery mysql laravel

  • Search about Ajax

  • possibility, but complex would be a presistent connection websockets

1 answer

0

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.

Browser other questions tagged php javascript jquery mysql laravel

You are not signed in. Login or sign up in order to post.