Back to Flash message Support

mitch
mitch

I have installed the plugin and add the component to the page. Now what?

Thank you

Alexander Romanov
Alexander Romanov

What component you use?
See documentation tab of the plugin.
For example, you can add Flash message component to the page and on tab code add this:

function onStart(){
Flash::success('Your success message');
Flash::error('Your error message');
}

After reload page, you see flash message. Or, for example, install RainLab.User plugin, add account component and flash message component. After try login with fail data

mitch
mitch

Ok, got it now.

Can u trigger the flash message also in ajax handler? For example a flash message every time u press Calculate button on demo/ajax page.

Alexander Romanov
Alexander Romanov

No. This component can show ajax error messages (when ajaxError event fire) and messages what been set by Components or inside the page or layout PHP section with the Flash class.
Sorry for my english. Hard for me to express their thoughts in English.

Wipsly
Wipsly

How can i display the message and title i set in the settings tab instead of your example message?

And can i deactivate the progress bar?

function onStart(){
Flash::success('Your success message');
Flash::error('Your error message');
}
Alexander Romanov
Alexander Romanov

For Wipsly.
On settings tab you can set title and change style of message (see how change style on Bootstrap Notify documentation page)
Field message on setting tab don't work, so you can display message only set it in your code.

pratyushpundir6424
pratyushpundir6424

Hi Alexander. I'm using your plugin and it works without an issue. Just wanted to know how the FormErrorMessages component can be used inside of another component (if at all). I have a contactform which is wrapped in its own component. is it possible to use your FormErrors component inside my ContactForm component? I have already included your plugin as a dependency for my plugin. Any help would be great. Thanks.

Alexander Romanov
Alexander Romanov

To: pratyushpundir6424
Hello. If I understand you correctly, then you can do the following:
Add this code string

$this->addJs('/plugins/romanov/flashmessage/assets/js/formmode.js');

to onRun() function of your component.

Last updated

lbrowning11071
lbrowning11071

Wipsly said:

And can i deactivate the progress bar?

I would like to know how to do this as well please Alexander.

Firstly...

showProgressbar: false // under settings

seems to be ignored.

Secondly, I can't see this setting under the "Settings" tab of the Flash message component.

pratyushpundir6424
pratyushpundir6424

@lbrowning11071 - I believe you can use the template feature under the plugin settings to remove the div meant for the progress bar.

<div data-notify="container" class="col-xs-11 col-sm-3 alert alert-{0}" role="alert">
    <button type="button" aria-hidden="true" class="close" data-notify="dismiss">×</button>
    <span data-notify="icon"></span>
    <span data-notify="title">{1}</span>
    <span data-notify="message">{2}</span>
    // Remove this DIV and it's contents
    <div class="progress" data-notify="progressbar">
        <div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
    </div>
    <a href="{3}" target="{4}" data-notify="url"></a>
</div>

I think that should work..

Last updated

Alexander Romanov
Alexander Romanov

@lbrowning11071, my plugin use Bootstrap Notify v3.0.0. Сustomize the display progress bar settings appeared in v3.0.1 https://github.com/mouse0270/bootstrap-notify#changelog

You can use the solution proposed by @pratyushpundir6424, it is correct.

Now I have no time to update the plugin. You are free to do pull requests to plugin repo on github.

And as always, I'm sorry for my english.

lbrowning11071
lbrowning11071

Thanks for such a prompt response Alexander, and no need to be so self-deprecating!

I did try to override the Bootstrap Notify plugin settings directly with Javascript, e.g.

                    $.notify({
                        // options
                        icon: 'icon-thumbs-up-alt',
                        title: "<strong>Welcome:</strong> ",
                        message: 'Hello World' 
                    },{
                        // settings
                        placement: {
                            align: 'center'
                        },
                    //  type: 'info', // default -- don't need to set
                    //  type: 'success',
                    //  type: 'warning',
                    //  type: 'danger',
                        type: type,
                        showProgressbar: false
                    });

but as I said it seems to be ignored for some reason, as if perpetually "true".

When I mentioned the "Settings" tab, I was referring to the configuration area in the CMS itself. I was wondering why the progress bar was missing. I could probably dig into your plugin code and modify it, but thought maybe there was a good reason -- sometimes it pays to ask first!

lbrowning11071
lbrowning11071

And thanks pratyushpundir6424 for your solution, I will give it a go!

lbrowning11071
lbrowning11071

awesome guys... I only had to update bootstrap-notify.min.js to the latest and everything works perfectly.

lbrowning11071
lbrowning11071

Hi @Alexander, I've been playing with this for a while now and ended up editing the main.js to use .ajaxSuccess (much like it already does with .ajaxError). This has the benefit of being able to fire off the notify flash immediately rather than on page refresh.

I thought this might help out anyone else trying to do something similar. The Account.php is for Rainlab user and the only code that was modified is in the onSignin() function. (Returning JSON instead of calling Flash::error).

https://gist.github.com/kdallas/17e07f9b50b066a13bdd

muhdDev63062
muhdDev63062

in a scenario where my form is not using the data-onStart() function but instead is using an action="/login" can i still use the flash class like this below

public static function register($firstname, $email, $password, $cPassword){
        if(strcmp($password,$cPassword == 0)){
            $muser = new MUsers();
            $muser->firstname = $firstname;
            $muser->email = $email;
            $muser->password = UserCrypt::encryptString($password);
            $muser->save();

            if($muser){
                 Flash::success('Settings successfully saved!');
            }
        }

Last updated

1-16 of 16