# Slim 3 framework and Twig with Ajax GET and POST for Home Page Chat problem?

**URL:** <https://discourse.slimframework.com/t/slim-3-framework-and-twig-with-ajax-get-and-post-for-home-page-chat-problem/3926>\
**Category:** Questions\
**Created:** [March 4, 2020, 8:32am UTC](https://discourse.slimframework.com/t/slim-3-framework-and-twig-with-ajax-get-and-post-for-home-page-chat-problem/3926 "2020-03-04T08:32:20Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![madushancs](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.slimframework.com/madushancs/32/1100_2.png) [@madushancs](https://discourse.slimframework.com/u/madushancs)\
**Post date:** [March 4, 2020, 8:32am UTC](https://discourse.slimframework.com/t/slim-3-framework-and-twig-with-ajax-get-and-post-for-home-page-chat-problem/3926/1 "2020-03-04T08:32:21Z")

</div>

this is my first time asking a question on this site. if mistake first of all sorry about it.

I am making an online store using slim 3 framework. I need a make live chat using Ajax for my slim 3 project. But I could not do that. please tell me how to do that?

 ![2](https://canada1.discourse-cdn.com/flex030/uploads/slimframework/original/2X/3/3fc46a20959ec119e3b7597fee24e03995e76899.png)

routes.php

> $app-\>get(‘/’,[‘Cart\Controllers\HomeController’,‘index’])-\>setName(‘home’);

> $app-\>post(‘/’,[‘Cart\Controllers\HomeController’,‘postindex’])-\>setName(‘posthome’);

HomeController.php

```auto
<?php

namespace Cart\Controllers;

use Slim\Views\Twig;
use Slim\Router;
use Cart\Models\Send_msg;
use Psr\Http\Message\ResponseInterface as Response;
use Psr\Http\Message\ServerRequestInterface as Request ;

public function postindex(Request $request, Response $response, Router $router, Send_msg $send_msg) 

{
    $this->router = $router;

    Send_msg::Create([
        'send_msg' => $request->getParam('send_msg'), 
        'user_id' => $_SESSION['user']
        ]);    

    $send_msg = $send_msg->where('user_id', $_SESSION['user'])->get()->toArray();

    return $response->withRedirect($this->router->pathFor('home'));

}

public function index(Request $request, Response $response, Twig $view, Send_msg $send_msg)
    {
        $this->router = $router;
        $send_msg = $send_msg->where('user_id', $_SESSION['user'])->get()->toArray();

        return $view->render($response, 'home.twig', [ 
            'send_msg' => $send_msg, 
        ]);
    }

```

App.twig

```auto
<div class="container">
        <div class="row pt-3">
            <div class="chat-main">
                <div class="col-md-12 chat-header rounded-top text-white">
                    <div class="row hide-chat-box">
                        <div class="col-md-12 username text-left">
                            <i class="fa fa-comments-o" aria-hidden="true"></i>
                            <h6 class="text-center">Send us a message</h6>
                        </div>

                    </div>
                </div>

                <div class="chat-content bg-white">
                    <div class="col-md-12 chats border">

                        <form method="get" action="{{ path_for('home')}}" id="ajaxget">
                        <ul style="padding:8px 0px 8px 0px;" id="add">

                            {% for msg in send_msg %}

                                {% if msg.receive_id != null %} <!-- receive msg -->
                                <li class="pl-2 pr-2 rounded text-left receive-msg mb-1">
                                    {{msg.send_msg}}
                                </li> 
                                {% else %} <!-- send msg -->
                                <li class="pl-2 pr-2 rounded text-left send-msg mb-1">
                                    {{msg.send_msg}}
                                </li>
                                {% endif %}

                            {% endfor %}

                        </ul>
                    </form>

                    </div>
                    <div class="col-md-12 message-box border pl-2 pr-2 border-top-0">

                        <form method="post" action="{{ path_for('posthome')}}" id="ajaxSubmit">
                            <input type="text" name="send_msg" id="send_msg" class="pl-0 pr-0 w-100" placeholder="Enter your message..."/> 
                            <div class="tools">

                                <button class="btn bg-transparent" type="submit" name="submit" id="submit"><i class="fa fa-arrow-circle-o-up" style="color: #18C139;" aria-hidden="true"></i></button>

                            </div>
                        {{ csrf.field | raw }}
                        </form>

                    </div>
                </div>

            </div>
        </div>
    </div>

{% block javascripts %}

             <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script> 

            <script>  

            // POST
                $('#ajaxSubmit').submit(function (e) {

                e.preventDefault(); 

                $.ajax({
                    url: $this.attr('action'),
                    type: $this.attr('method'),
                    data: $(this).serialize(),
                    success: function (data) {
                        alert('ajax call finished successfully');
                    },
                    error: function () {
                        alert('ajax call finished successfully');
                    }
                });
            });

            // GET
            $(document).ready(function(){
                setInterval(function() {
                    $('#ajaxget').ready(function () {
                    $.ajax({
                    url:$this.attr('action'),
                    method:$this.attr('method'),
                    success:function(){

                    }
                    });
                    });

                    }, 5000);
            });

        </script>

        {% endblock %}

```

this code worked when refresh page but I need without refresh page.Thank you very much

---

<div class="post-metadata">

**Author:** ![tj\_gumis](https://avatars.discourse-cdn.com/v4/letter/t/c89c15/32.png) [@tj\_gumis](https://discourse.slimframework.com/u/tj_gumis)\
**Post date:** [March 4, 2020, 8:40pm UTC](https://discourse.slimframework.com/t/slim-3-framework-and-twig-with-ajax-get-and-post-for-home-page-chat-problem/3926/2 "2020-03-04T20:40:12Z")

</div>

To be quite frank [php ratchet websocket](http://socketo.me/) is just one of my dreams solution for this kind of issues. Unfortunately odan, despite his huge devotion for Slim community hasn’t taken care for this so far ☹ .

---

<div class="post-metadata">

**Author:** ![madushancs](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.slimframework.com/madushancs/32/1100_2.png) [@madushancs](https://discourse.slimframework.com/u/madushancs)\
**Post date:** [March 5, 2020, 3:27am UTC](https://discourse.slimframework.com/t/slim-3-framework-and-twig-with-ajax-get-and-post-for-home-page-chat-problem/3926/3 "2020-03-05T03:27:40Z")

</div>

Thank you very much 😊

---

<div class="post-metadata">

**Author:** ![tj\_gumis](https://avatars.discourse-cdn.com/v4/letter/t/c89c15/32.png) [@tj\_gumis](https://discourse.slimframework.com/u/tj_gumis)\
**Post date:** [March 20, 2020, 3:56pm UTC](https://discourse.slimframework.com/t/slim-3-framework-and-twig-with-ajax-get-and-post-for-home-page-chat-problem/3926/4 "2020-03-20T15:56:41Z")

</div>

Take a look at this:  
[Slim 4 Websocket integration](https://discourse.slimframework.com/t/slim-4-websocket-integration/3952)

perhaps you can adapt this solution for your needs.