Problems, need help? Have a tip or advice? Post it here.
9 posts Page 1 of 1
Hello.

I am using a toast code from here.

The HTML is:
Code: Select all
<h2>Toast</h2>
<p>Click on the button to show the Toast. It will disappear after 5 seconds.</p>

<button onclick="launch_toast()">Show Toast</button>

<div id="toast"><div id="img">Icon</div><div id="desc">A notification message..</div></div>

<!-- http://jsfiddle.net/m8x1g0q8/ -->


The CSS is:
Code: Select all
#toast {
    visibility: hidden;
    max-width: 50px;
    height: 50px;
    /*margin-left: -125px;*/
    margin: auto;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 2px;

    position: fixed;
    z-index: 1;
    left: 0;right:0;
    bottom: 30px;
    font-size: 17px;
    white-space: nowrap;
}
#toast #img{
   width: 50px;
   height: 50px;
   
    float: left;
   
    padding-top: 16px;
    padding-bottom: 16px;
   
    box-sizing: border-box;

   
    background-color: #111;
    color: #fff;
}
#toast #desc{

   
    color: #fff;
   
    padding: 16px;
   
    overflow: hidden;
   white-space: nowrap;
}

#toast.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
}

@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes expand {
    from {min-width: 50px}
    to {min-width: 350px}
}

@keyframes expand {
    from {min-width: 50px}
    to {min-width: 350px}
}
@-webkit-keyframes stay {
    from {min-width: 350px}
    to {min-width: 350px}
}

@keyframes stay {
    from {min-width: 350px}
    to {min-width: 350px}
}
@-webkit-keyframes shrink {
    from {min-width: 350px;}
    to {min-width: 50px;}
}

@keyframes shrink {
    from {min-width: 350px;}
    to {min-width: 50px;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 60px; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 60px; opacity: 0;}
}


The JS is:
Code: Select all
function launch_toast() {
    var x = document.getElementById("toast")
    x.className = "show";
    setTimeout(function(){ x.className = x.className.replace("show", ""); }, 5000);
}


I have a DBF. I want to display the success message when the form submits successfully. To be more specific I am using the extended users module andwant the message to pop up only when the form is submitted successfully.

What happens now is that the toast popups and then the page refreshes. How to go about with it?

My couch code at the moment is:
Code: Select all
<cms:set success_msg="<cms:get_flash 'success_msg' />" />
                        <cms:if success_msg>
                            <!-- TOAST MESSAGE to be displayed  -->
                            <div id="toast">
                                <div id="img">Icon</div>
                                <div id="desc">A notification message..</div>
                            </div>
                            <!-- TOAST MESSAGE to be displayed -->
                        </cms:if>
                               
                        <!-- this ia regular databound-form -->
                        <cms:form
                            masterpage=k_user_template
                            mode='edit'
                            page_id=k_user_id
                            enctype="multipart/form-data"
                            method='post'
                            anchor='0'
                            >
                           
                            <cms:if k_success >
                                <cms:db_persist_form />

                                <cms:if k_success >
                                    <cms:set_flash name='success_msg' value='1' />
                                    <cms:redirect k_page_link />
                                </cms:if>
                            </cms:if> 
                           
                            <cms:if k_error >
                                <font color='red'><cms:each k_error ><cms:show item /><br /></cms:each></font>
                            </cms:if>
                           
                            <div class="row clearfix">

                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <div class="form-group form-float">
                                        <label class="form-label">Profile Picture</label>
                                        <div class="form-line">
                                            <cms:input name="profile_pic" type="bound" class="form-control"/>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <div class="form-group form-float">
                                        <div class="form-line">
                                            <cms:input name='k_page_title' type='bound' class="form-control" />
                                            <label class="form-label">Username</label>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <div class="form-group form-float">
                                        <div class="form-line">
                                            <cms:input name='extended_user_email' type='bound' class="form-control" />
                                            <label class="form-label">Email</label>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <div class="form-group form-float">
                                        <div class="form-line">
                                            <cms:input name='extended_user_password' type='bound' class="form-control" />
                                            <label class="form-label">New Password (Use only to change, else leave blank)</label>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <div class="form-group form-float">
                                        <div class="form-line">
                                            <cms:input name='extended_user_password_repeat' type='bound'  class="form-control"/>
                                            <label class="form-label">Repeat Password</label>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                    <!-- TOAST Display Event in onclick -->
                                    <button class="btn bg-pink waves-effect" name='submit' type="submit" onclick="launch_toast()">
                                        SAVE
                                    </button>
                                    <!-- TOAST Display Event in onclick -->
                                </div>
                            </div>
                           
                        </cms:form>


Where do I call the event?

Regards,
GenXCoders
Image
where innovation meets technology
Hi,

I think you'll find the method used by @trendoman in the following thread useful -
viewtopic.php?f=8&t=11665
@KK Sir,

@trendoman has created an awesome thing. I have been through it.

I am using adminbsb. @trrendoman has used "toastr" which I will not implement in admin bsb as my cause does not require as many features as "toastr".

Also, I need the toast to display a success message at the front end. So do you still suggest me to see the method proosed by @trendoman?

Regards,
GenXCoders
Image
where innovation meets technology
@genxcoders, yours is squarely a frontend issue - I am not sure how the notification component of the library you are using works.

The intention of pointing to @trendoman's code was to show at what point to inject that 'notification' component (whatever it might be)

In your case it is the following -
Code: Select all
<cms:set success_msg="<cms:get_flash 'success_msg' />" />
<cms:if success_msg>
    <!-- inject  TOAST div -->
    <div id="toast">
        <div id="img">Icon</div>
        <div id="desc">A notification message..</div>
    </div>
   
    <!-- inject JS code showing TOAST div -->
    <script>
        .. whatever code ..
    </script>
</cms:if>

Eventually, it is you who knows how to show the div.

Hope this helps.
@KK Sir,

I have tried the code you have suggested above, already. The issue is it says that "launch_toast()" is not defined. It is displayed in the Console.

This happens if the script to call the toast is mentioned in the "<cms:if success_msg>" condition.

The code I am employing is from a jsFiddle (for reference).

Regards,
GenXCoders
Image
where innovation meets technology
Since you are not using Jquery, it would require some vanilla JS.
Anyway, following is a fully working complete template (borrowed the JS code for 'ready' from http://youmightnotneedjquery.com/). Please use it as a guide -
Code: Select all
<?php require_once( 'couch/cms.php' ); ?>
<cms:template title='Toastr test' order='1000' clonable='0'>
   
    <cms:editable name='my_check' type='checkbox' opt_values='Yes' opt_selected='' />
   
</cms:template>

<!DOCTYPE html>
<html lang='en' class=''>
    <head>
        <style class="cp-pen-styles">
            #toast {
                visibility: hidden;
                max-width: 50px;
                height: 50px;
                /*margin-left: -125px;*/
                margin: auto;
                background-color: #333;
                color: #fff;
                text-align: center;
                border-radius: 2px;

                position: fixed;
                z-index: 1;
                left: 0;right:0;
                bottom: 30px;
                font-size: 17px;
                white-space: nowrap;
            }
            #toast #img{
                width: 50px;
                height: 50px;
               
                float: left;
               
                padding-top: 16px;
                padding-bottom: 16px;
               
                box-sizing: border-box;

               
                background-color: #111;
                color: #fff;
            }
            #toast #desc{

               
                color: #fff;
               
                padding: 16px;
               
                overflow: hidden;
                white-space: nowrap;
            }

            #toast.show {
                visibility: visible;
                -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
                animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
            }

            @-webkit-keyframes fadein {
                from {bottom: 0; opacity: 0;}
                to {bottom: 30px; opacity: 1;}
            }

            @keyframes fadein {
                from {bottom: 0; opacity: 0;}
                to {bottom: 30px; opacity: 1;}
            }

            @-webkit-keyframes expand {
                from {min-width: 50px}
                to {min-width: 350px}
            }

            @keyframes expand {
                from {min-width: 50px}
                to {min-width: 350px}
            }
            @-webkit-keyframes stay {
                from {min-width: 350px}
                to {min-width: 350px}
            }

            @keyframes stay {
                from {min-width: 350px}
                to {min-width: 350px}
            }
            @-webkit-keyframes shrink {
                from {min-width: 350px;}
                to {min-width: 50px;}
            }

            @keyframes shrink {
                from {min-width: 350px;}
                to {min-width: 50px;}
            }

            @-webkit-keyframes fadeout {
                from {bottom: 30px; opacity: 1;}
                to {bottom: 60px; opacity: 0;}
            }

            @keyframes fadeout {
                from {bottom: 30px; opacity: 1;}
                to {bottom: 60px; opacity: 0;}
            }
        </style>

        <script>
            function launch_toast() {
                var x = document.getElementById("toast");
                x.className = "show";
                setTimeout(function () {x.className = x.className.replace("show", "");}, 5000);
            }
            function ready(fn) {
                if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
                    fn();
                } else {
                    document.addEventListener('DOMContentLoaded', fn);
                }
            }
        </script>
    </head>
    <body>
        <cms:set success_msg="<cms:get_flash 'success_msg' />" />
        <cms:if success_msg>
            <!-- inject  TOAST div -->
            <div id="toast">
                <div id="img">Icon</div>
                <div id="desc">A notification message..</div>
            </div>
           
            <!-- inject JS code showing TOAST div -->
            <script>
                ready(launch_toast);
            </script>
        </cms:if>

        <cms:form
            masterpage=k_template_name
            mode='edit'
            page_id=k_page_id
            enctype="multipart/form-data"
            method='post'
            anchor='0'
            >

            <cms:if k_success >
                <cms:db_persist_form />

                <cms:if k_success >
                    <cms:set_flash name='success_msg' value='1' />
                    <cms:redirect k_page_link />
                </cms:if>
            </cms:if> 

            <cms:if k_error >
                <font color='red'><cms:each k_error ><cms:show item /><br /></cms:each></font>
            </cms:if>
           
            <cms:input type='bound' name='my_check' /><br>
            <button name='submit' type="submit">SAVE</button>
        </cms:form>

    </body>
</html>
<?php COUCH::invoke(); ?>

Hope it helps.
Couldn't get it to work when brought into the code i am working with.

:cry:
Image
where innovation meets technology
As I mentioned, it is a fully working, tested, standalone code.
If even that does not help, I am sorry there is nothing more I can do to help you with this issue.
Actually I works stand alone.
But I suppose there is some code in the design that I am using, which is creating the trouble for me.
I am trying to understand where I am going wrong with the code.
I will definitely get back to you on the same sir.

Regards,
GenXCoders
(Priya)
Image
where innovation meets technology
9 posts Page 1 of 1