Hello.
I am using a toast code from here.
The HTML is:
The CSS is:
The JS is:
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:
Where do I call the event?
Regards,
GenXCoders
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