Solved thread

This post is marked as solved. If you think the information contained on this thread must be part of the official documentation, please contribute submitting a pull request to its repository.

Load Chat Panel via Ajax

Hello @all,

i am coding a chat and with pure PHP it is working perfect for me. But now i want to implement it into my Vokuro system and i have some problems.

The params are send via ajax(-> userid and username), but they don't reach the function in my Controller, as response i get the whole site. It should look/open like the facebook chat right bottom.

jQuery:

      var $panel;
        $.ajax({
            type: "GET",
            url: 'chat/chatPanel?chatUserId='+chatUserId+'&chatUserText='+chatUserText,
            async: false,
            success : function(text)
            {
                $panel = text;
            }
        });
        $($panel).appendTo("#chatPosition");

ChatPanel.volt (still pure PHP i know :-) )

  <div class="panel panel-default chatBox" id="chatBox'.$chatUserId.'">

  <div class="panel-heading">
      <ul class="list-inline">
          <li class="list-inline-item pull-left"><h1 class="chatUserHeader"><a href="#" class="btn btn-link btn-xs">'.$chatUserText.'</a></h1></li>
          <li class="list-inline-item pull-right"><button class="btn-link btn-xs chatBoxSlideDown'.$chatUserId.'"><i class="fa fa-window-minimize fa-lg" aria-hidden="true"></i></button></li>
          <li class="list-inline-item pull-right"><button class="btn-link btn-xs chatBoxClose'.$chatUserId.'"><i class="fa fa-times fa-lg" aria-hidden="true"></i></button></li>
      </ul>
  </div>
  <div class="panel-body">
      <table class="table" id="panelId'.$chatUserId.'"></table>
  </div>


  <div class="panel-footer chatFooter">
      <div class="form-group">
          <textarea placeholder="Message" id="chatTextArea'.$chatUserId.'"></textarea>
      </div>

      <div class="form-group">
          <button class="btn btn-success"  id="chatBtnSend'.$chatUserId.'">Absenden</button>
      </div>

  </div>
  </div>

Controller. The chatPanelAction function should load the chatPanel.volt template

<?php
namespace Vokuro\Controllers;

use Phalcon\Tag;
use Phalcon\Mvc\Model\Criteria;
use Phalcon\Paginator\Adapter\Model as Paginator;
use Vokuro\Forms\ChatForm;
use Vokuro\Models\Chat;
use Phalcon\Http\Request;

class ChatController extends ControllerBase{

    public function initialize(){
        $this->view->setTemplateBefore('private');
    }
    public function indexAction(){

    }

    public function chatPanelAction(){
        $request = new Request();
        $user = $request->get("chatUserId");
        echo "MAIL: ".$user;
    }

    public function getMessageAction(){

    }
    public function addMessageAction(){

    }

}

Thx for your help

Rgds Stefan

edited Dec '16

$request = new Request();

Why you do this ? Just do $this->request->get("chatUserId");

How your route looks like ? Maybe it's loaded on some other page and since you added link as relative it's accessing for example /otherPage/chat/chatPanel

Check which url browser is accessing if it's correct one, test it like die or exit in this action. If it's not accessing show your router.



29.9k

hi,

in controller action chatPanelAction(), set render level to level view so that just chatPanel.volt is rendered and not all the full view hierarchy.

        $this->view->setRenderLevel(
            View::LEVEL_ACTION_VIEW
        );


29.9k

also, as said, while using a full mvc app, you can have direct acces to request objects.

and, in your chatPanelAction(), you do not pass any variable to the view ...



17.3k

Hello,

thx for your replies:

i added a router now:

$router->add('chat/chatPanel/{code}/{code}', [
    'controller' => 'chat_control',
    'action' => 'chatPanel'
]);

Here is the new function, now the panel is loading but with this message:

 Fatal error: Class 'Vokuro\Controllers\View' not found in

public function chatPanelAction(){
    $this->request->get("chatUserId");

    $this->view->setRenderLevel(
        View::LEVEL_ACTION_VIEW
    );
}

I know that there is no variable now.

Rgds Stefan

Fatal error: Class &#039;Vokuro\Controllers\View&#039; not found in just such class is not loaded, existing. you miss use Phalcon\Mvc\View



17.3k
Accepted
answer
edited Dec '16

Got it!

Controller

public function chatPanelAction(){
    $id = $this->request->get("chatUserId");
    $user = $this->view->chat = Users::findFirst($id);
    $this->view->setVar('user',$user);
    $this->view->setRenderLevel(
        View::LEVEL_ACTION_VIEW
    );
}

Panel

    <div class="panel panel-default chatBox" id="chatBox{{user.id}}">

        <div class="panel-heading">
            <ul class="list-inline">
                <li class="list-inline-item pull-left"><h1 class="chatUserHeader"><a href="#" class="btn btn-link btn-xs">{{user.name}}</a></h1></li>
                <li class="list-inline-item pull-right"><button class="btn-link btn-xs chatBoxSlideDown{{user.id}}"><i class="fa fa-window-minimize fa-lg" aria-hidden="true"></i></button></li>
                <li class="list-inline-item pull-right"><button class="btn-link btn-xs chatBoxClose{{user.id}}"><i class="fa fa-times fa-lg" aria-hidden="true"></i></button></li>
            </ul>
        </div>
        <div class="panel-body">
            <table class="table" id="panelId{{user.id}}"></table>
        </div>

        <div class="panel-footer chatFooter">
            <div class="form-group">
                <textarea placeholder="Message" id="chatTextArea{{user.id}}"></textarea>
            </div>

            <div class="form-group">
                <button class="btn btn-success"  id="chatBtnSend{{user.id}}">Absenden</button>
            </div>

        </div>
    </div>

Thank you very much :-)



29.9k