How to Configure Bootstrap Growl Notification in Phalcon

Currently i'm using Bootstrap native HTML alerts whenever i need, but how can i use 'Bootstrap Growl Notification' with Phalcon. I couldn't find any solution so far.

Thanks.



2.1k

You can created an object with Bootstrap Growl properties and a container to store notification.

Add this container to DI service to use everywhere in your app.

Send all notifications in a view's javascript part and it should work.

Could you please show me how to do that..? Because 'Growl Notification' are being called by javacript i have no idea to configure it.



2.1k

To start you can try something like this.

Be careful, this is directly wrote from forum and not tested ;o))

class bootstrapGrowl {
    private $message;
    private $type;
    public function __construct($message, $type)
    {
        $this->message = $message;
        $this->type = $type;

        return $this;
    }

    /** GETTERS & SETTERS */
    ...
}
class indexController extends Phalcon\Mvc\Controller{
    public function indexAction()
    {
        $growContainer = array();
        $growMessage1 = new bootstrapGrowl('my first message', 'info');
        $growContainer[] = $growMessage1;
        $growMessage2 = new bootstrapGrowl('my second message', 'danger');
        $growContainer[] = $growMessage2;

        $this->view->growContainer = $growContainer;
    }
}
{# Views/index/index.volt #}

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
 <script type="text/javascript" src="http://ifightcrime.github.io/bootstrap-growl/jquery.bootstrap-growl.min.js"></script>
 <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
 <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<script type='text/javascript'>
$(window).load(function(){
    $(function() {
    {% for growMessage in growContainer %}
        $.bootstrapGrowl(
            "{{ growMessage.getMessage() }}", 
            {
                type: '{{ growMessage.getType() }}', // (null, 'info', 'danger', 'success')
            }
        );
    {% endfor %}
    });
});

</script>
</head>
<body>
</body>
</html>

@elroliv is on the right track - but I don't think you need a custom object:

Controller

<?php

class indexController extends Phalcon\Mvc\Controller{
    public function indexAction()
    {
        $this->view->growlMessages = [
            ['message'=>'my first_message',
             'type'=>'info'],
            ['message'=>'my second message',
             'type'=>'danger']
        ];
    }
}

Volt

Just put this in the footer of your template, and it will generate Growl messages if any have been set in the Controller:

<script type='text/javascript'>
    $(function() {
        {% if growlMessages is defined %}
            {% for message in growlMessages %}
                $.bootstrapGrowl(
                    "{{ growMessage['message'] }}", 
                    {
                        type: "{{ growMessage['type'] }}", // (null, 'info', 'danger', 'success')
                    }
                );
            {% endfor %}
        {% endif %}
    });
</script>