Am using Bootstrap-Purr for alert messaging. By using this, alert message appears and automatically disappears within few seconds. This should not happen. Alert message should be dismissed on only clicking close button, until then it should be viewed.
Tried a Fiddle
$.bootstrapPurr('<strong>My error Mesasge </strong> ,Try Again !', {
type: 'danger',
delayPause: true,
align: 'center',
allow_dismiss: false,
allowDismissType: 'click',
draggable: false,
width:'350px',
position:'absolute',
top:'50px',
});
Any Idea will be appreciated. Thank you in advance.
Set the 'delay' attribute to 0, thats all it will work
$.bootstrapPurr('This is another "purr" that will display until manually closed', {
type: 'danger',
align: 'left',
align: 'center',
delay: 0,
stackupSpacing: 30
});
Try the fiddle
Related
I want to open another alert along with the previous alert and prevent closing the previous alert, But the previous alert closes and new open.
I used iziToast and I can do this but I want to use SweetAlert.
SweetAlert Example:
const swalToast = Swal.mixin({
toast: true,
iconColor: "white",
customClass: { popup: "colored-toast" },
showConfirmButton: false,
timerProgressBar: true,
});
swalToast.fire({
title: "One",
position: "bottom",
timer: 5000,
icon: "info",
});
setTimeout(() => {
swalToast.fire({
title: "Two",
position: "bottom",
timer: 1500,
icon: "info",
});
}, 2000);
iziToast Example:
iziToast.info({
position: "bottomCenter",
title: "One",
message: "",
timeout: 5000,
});
setTimeout(() => {
iziToast.info({
position: "bottomCenter",
title: "Two",
message: "",
timeout: 1500,
});
}, 2000);
It is not possible to show more than one modal at a time, by design.
SweetAlert open another alert with prevent closing previous alert
Show two swal at same time
2 or more modals at the same time
The first one is working as excepted.I am trying to borrow the same idea to display the error msg when users try to attempt the usage of blank value.
I have few text fields,I want to display an error message when the user clicks on the save button with required fields empty or leaves blank after clicking the cursor on that tab
and not entering anything in the textfield and going to next text field. Any help would be appreciated.
//First code snippet working propely.
this.nameField = new Ext.form.TextField({
fieldLabel:getMsg('testXml','global.name')
,allowBlank:false
,cls:'c-form-field-required'
,name:'Name'
,blankText: testQR.getMsg('testXml','address.nameV')
,maxLength:100
});
this.formPanel = new Ext.form.FormPanel({
labelWidth: 100
,labelPad: 10
,labelAlign: 'right'
,bodyBorder: false
,trackResetOnLoad: true
,cls: 'testQR-form-panel'
,autoScroll: true
,defaults: {
width: 200
,msgTarget: 'under'
,emptyClass: 'c-form-empty-field'
,invalidClass: 'c-form-invalid'
,validateOnBlur: true
,validationEvent: 'blur'
}
,items:[
this.avKeyField
,this.addrKeyField
,this.nameField
,this.addressCodeField]
});
/*
Second code snippet is not working as accepted.
But when I click on the text field and leave it blank the border of the text field becomes red,
and when I hover over the text field an error message will pop out. */
this.descriptionField = new Ext.form.TextField({
fieldLabel: getMsg('testXml', 'description'),
allowBlank: false,
cls: 'c-form-field-required',
name: 'description',
blankText: testQR.getMsg('testXml', 'description.required'),
maxLength: 50,
id:"DescriptionDetails"
});
this.testFormPanel = new Ext.form.FormPanel({
id: 'testItemPanels',
trackResetOnLoad: true
,cls: 'testQR-form-panel'
,autoScroll: true
,defaults: {
msgTarget: 'under'
,emptyClass: 'c-form-empty-field'
,invalidClass: 'c-form-invalid'
,validateOnBlur: true
,validationEvent: 'blur'
},
border: false
,autoHeight: true
,bodyStyle: 'padding:1px 1px 1px 1px'
,layout:'table'
,layoutConfig:{
columns: 3
}
,defaults: {
labelSeparator: '',
//margins:'0 0 0 5',
style: 'marginRight: 5px;',
labelAlign: 'top',
layout:'form',
border: false,
bodyStyle:'background:transparent'
},
items:
[{
items:[this.nameField]
},
{
items:[this.descriptionField]
}
]
});
Apply
validateOnChange:false and allowBlank:false
in every fields that are required and then do your
form.isValid()
on save button click handler. It will work. If it doesnt please provide a fiddle recreating the issue.
I am trying to resolve the issue .I cant load this script http://orangeplacehotel.com/superbudget/ems-policy. Is there anything wrong with this code?? I tried putting alert and it works properly but still i cant see the plug-in loaded on the site.. Please help .. Thanks,
$(function() {
$('#nanoGallery1').nanoGallery({
kind:'flickr',
userID:'129251189#N05',
touchAutoOpenDelay: -1,
breadcrumbAutoHideTopLevel: true,
maxWidth: 948,
imageTransition : 'slide',
thumbnailWidth: 200,
thumbnailHeight: 126,
thumbnailHoverEffect: 'scaleLabelOverImage,borderDarker',
i18n: {
thumbnailImageDescription: 'view photo',
thumbnailAlbumDescription: 'open album'
},
thumbnailLabel: {
display: true,
position: 'overImageOnMiddle',
hideIcons: true, align: 'center'
},
thumbnailLazyLoad: true
});
});
alert("test");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
error is "NanoGallery is not a function"
I think you should check your plugin (in what nanoGaller() is defined) is included in page or not before running your code
Below is the code working fine
Its not a solution but might give you some idea
First include the jquery library then
$.prototype.nanoGallery = function(){
console.log(arguments);
}
$(function() {
$('#nanoGallery1').nanoGallery({
kind:'flickr',
userID:'129251189#N05',
touchAutoOpenDelay: -1,
breadcrumbAutoHideTopLevel: true,
maxWidth: 948,
imageTransition : 'slide',
thumbnailWidth: 200,
thumbnailHeight: 126,
thumbnailHoverEffect: 'scaleLabelOverImage,borderDarker',
i18n: {
thumbnailImageDescription: 'view photo',
thumbnailAlbumDescription: 'open album'
},
thumbnailLabel: {
display: true,
position: 'overImageOnMiddle',
hideIcons: true, align: 'center'
},
thumbnailLazyLoad: true
});
});
alert("test");
Opening and Closing WIndow
I have a window called from a grid that launches a window, If I launch just one window, I can drag it any where I want, but If I open the same window twice it becomes undraggable, how do I resolve this. Also if I call a close operation on this window, it closes just one of the window and leaves the other. Can anyone help with this ?
Ext.Window({
title:id.text,
autoHeight: true,
width: 500,
id:'form1',
resizable: false,
plain:true,
y: 100,
autoScroll: true,
//layout: 'fit',
buttonAlign:'center',
items: [{
xtype:'form1'
}],
buttons: [{
text: 'Save',
handler: function(){
}
},{
text: 'Reset',
handler: function(){
}
}]
});
i have 2 panels inside a border-layout. The second one is collapsible with configs 'collapsed' and 'titleCollapse' set. When i click on the title it just shows the panel "temporary" which means that it doesn't stick but collapses automatically after i click anywhere else inside my window. It kind of floats in...
Working example: http://jsfiddle.net/suamikim/LNfm8/
Ext.onReady(function() {
Ext.create('Ext.window.Window', {
width: 500,
height: 300,
layout: 'border',
items: [{
xtype: 'panel',
title: 'panel1',
region: 'center',
flex: 1
},{
xtype: 'panel',
title: 'panel2',
region: 'south',
flex: 1,
collapsible: true,
collapsed: true,
animCollapse: false,
collapseDirection: Ext.Component.DIRECTION_BOTTOM,
titleCollapse: true
}]
}).show();
});
I guess this is a feature of the border-layout because if i put the 2 panels into a box-layout the collapsed panel permanently expands after a click on the title-bar.
I'm aware that the panel would stay expanded if i click on the "double-arrow" or if i click the title a second time after it has been "floated in" but i just don't want this floating-behaviour at all because i experienced it as pretty buggy so far.
I would really appreciate if anyone could tell me how to turn that feature of the border-layout off.
Thanks
Add after titleCollapse property
floatable: false
Look at the fiddle