I am using the Toastr 2.1 JavaScript library to display transient user input validation error messages. I set preventDuplicates option to true. It is not working -- I still see duplicate messages when users click validate button in rapid succession (clicks are faster than 'timeout').
Here are my toastr defaults:
function getDefaults() {
return {
tapToDismiss: true,
toastClass: 'toast',
containerId: 'toast-container',
debug: false,
showMethod: 'fadeIn', //fadeIn, slideDown, and show are built into jQuery
showDuration: 300,
showEasing: 'swing', //swing and linear are built into jQuery
onShown: undefined,
hideMethod: 'fadeOut',
hideDuration: 1000,
hideEasing: 'swing',
onHidden: undefined,
extendedTimeOut: 1000,
iconClasses: {
error: 'toast-error',
info: 'toast-info',
success: 'toast-success',
warning: 'toast-warning'
},
iconClass: 'toast-info',
positionClass: 'toast-top-right',
timeOut: 5000, // Set timeOut and extendedTimeOut to 0 to make it sticky
titleClass: 'toast-title',
messageClass: 'toast-message',
target: 'body',
closeHtml: '<button>×</button>',
newestOnTop: true,
preventDuplicates: true,
progressBar: false
};
}
Do i need to make any other changes to prevent duplicate error messages?
this may help
toastr.options = {
"preventDuplicates": true,
"preventOpenDuplicates": true
};
toastr.error("Your Message","Your Title",{timeOut: 5000});
I believe it's working as expected
preventDuplicates: Prevent duplicates of the **last toast**.
Perhaps this is the property you are looking for?
preventOpenDuplicates: Prevent duplicates of open toasts.
I had the same issue and it turned out that toastr preventDuplicates option does not work for array messages (current version 2.1.1). You need to convert the array to string using join.
I have the same requirements as you. Below is my implementation. See if it can help you.
function hasSameErrorToastr(message){
var hasSameErrorToastr = false;
var $toastContainer = $('#toast-container');
if ($toastContainer.length > 0) {
var $errorToastr = $toastContainer.find('.toast-error');
if ($errorToastr.length > 0) {
var currentText = $errorToastr.find('.toast-message').text();
var areEqual = message.toUpperCase() === currentText.toUpperCase();
if (areEqual) {
hasSameErrorToastr = true;
}
}
}
return hasSameErrorToastr;
}
//Usage
var message = 'Error deleting user';
if (hasSameErrorToastr(message)) {
toastr.error(message, title, errorToastrOptions);
}
The code is to check whether there are existing error toastr which has the same message being displayed. I will only fire the toastr.error if there is no existing instance of the same error on display. Hope this helps. The code can be refactored futher more but I'll leave it like this so that its more easier to understand for others.
imports: [
ToastrModule.forRoot({
timeOut: 10000,
positionClass: 'toast-bottom-right',
preventDuplicates: true,
}),
],
this is also present in npm for ngx-toastr documentation. you can add it in your app module.ts to see the change.
this may help.
var config = {
maxOpened: 1,
timeOut: 100
}
put it in your toastr config.and it should work.opened toastr is made to 1,and timeout set to 100.
Search preventDuplicates in toastr.min.js and change
preventDuplicates:!1
to
preventDuplicates:1
I was facing the same issue ngx-toastr and resolved by adding the below code in my module file.
ToastrModule.forRoot({
maxOpened: 1,
preventDuplicates: true,
autoDismiss: true
})
Also, if lazy loading is implemented, then you need to add the same lines of code to your parent module file also as I've added in my app.module.ts
Add preventDuplicates:1 to
toastr.options = {
maxOpened: 1,
preventDuplicates:1,
autoDismiss: true
};
I added this in the constructor and it worked for me
this.toastr.toastrConfig.preventDuplicates = true;
Related
I am trying to use scrollify for my website (Wordpress, woocomerce) www.chame-lemon.com and I'm totally green in programming, so I really need your help guys.
I need to disable the plugin on shop page and product pages, I'm using a class named "hwdp" to all sections on the pages when I want to use plugin. but he is activated on other pages because of the footer (it has a class to turn on scrollify also) but I can't use two separate footers in Wordpress, so I need to use code with using a function
$.scrollify.disable();
The disable method turns off the scroll snap behavior so that the page scroll like normal.
there is documentation for that plugin
https://projects.lukehaas.me/scrollify/#methods-continued
that should look like that:
if there is no class named hwdp on the page
the plugin should be disable
else
he should be enabled
and I tried to fix that by myself, I spend hours and i got no results... and i know that's a very simple thing for someone who knows jquery.
<script>
jQuery(document).ready(function($) {
$.scrollify({
section : ".hwdp",
interstitialSection: ".footer",
easing: "easeOutExpo",
scrollSpeed: 1200,
offset: 1,
scrollbars: true,
standardScrollElements: "",
setHeights: true,
overflowScroll: true,
updateHash: true,
touchScroll: false,
before:function() {},
after:function() {},
afterResize:function() {},
afterRender:function() {},
});
if (!$('section').hasClass('.hwdp')) {
$.scrollify.enable();
}else{
$.scrollify.disable();
}
});
</script>
In your code, the plugin is being initialized on every page regardless of whether it finds the .hwdp class. It's better to only be initialized when it needs to be.
Here's how you can enable the plugin only when there exists a section on the page with the class .hwdp.
<script>
jQuery(document).ready(function($) {
if($('section.hwdp').length) {
$.scrollify({
section : ".hwdp",
interstitialSection: ".footer",
easing: "easeOutExpo",
scrollSpeed: 1200,
offset: 1,
scrollbars: true,
standardScrollElements: "",
setHeights: true,
overflowScroll: true,
updateHash: true,
touchScroll: false,
before:function() {},
after:function() {},
afterResize:function() {},
afterRender:function() {},
});
}
});
</script>
After doing some research on this issue trying to find a solution (unfortunately to no avail) I decided that it might be best to post my problem. I currently have a Datatable containing asset information on a view and I'm trying to prevent a user from continuing change an option on a select field until an asset is added to the asset table.
Listed below is my assets datatable code in my .js file under the document.ready function
assets = $('#assets').dataTable({
sAjaxSource: "http://" + window.location.hostname + "/request/get-request-assets/?id=" + $('#id').val(),
fnDrawCallback: function (oSettings) {
setIncompleteTD();
enableRequestStatus();
},
scrollY: '185px',
scrollCollapse: true,
paging: false,
aaSorting: [[1, 'asc']],
bPaginate: false,
bFilter: false,
bLengthChange: false,
bAutoWidth: false,
bInfo: false,
aoColumns: [
{sWidth: '35px', bSortable: false},
{sWidth: '40px'},
{},
{},
{},
{},
{},
{sWidth: '80px'}
],
language: {
sLoadingRecords: '',
sEmptyTable: 'This request has no asset records.',
sInfoEmpty: ''
}
I've found table.fnSettings().aoData.length===0 as a means to check if a table is empty. However, after stepping through the code (via Chrome debugger) it seems Datatables (at least in my case) calls the function before the table is fully generated...
I have this code below
assetPresent = (assets.fnSettings().aoData.length===0) ? false : true;
console.log(assetPresent);
in my document.ready function after $('#assets').dataTable() function (if this matters). AssetPresent will be used as a flag to toggle the status select box. Unfortunately before I can utilize that...
console.log(assetPresent);
Seems to always be set to false even if there are clearly records in the table, and...
assetPresent = (assets.fnSettings().aoData.length===0) ? false : true;
Tends to be ignored...
I'm curious to see if table.fnSettings().aoData.length===0 might not be the best option. Thank you in advance.
Have you tried, table.data().length yet?
you can try this
var table = $('#assets').DataTable();
if ( ! table.data().any() ) {
alert( 'Empty table' );
}
I have the following problem. I've written a server and client scripts for node js that work as live collaboration code editing. 2 or more people can code in the same instance of CodeMirror editor. Until i have enabled autocomplete feature and auto closing brackets it was working perfect, but after i did it messed up the work. When you use autocomplete list or when bracket or tag will be closed by module not by you manually it will not be recognized as change. I have inspected an object that CodeMirror instance is returning and it doesnt contain change that have been done automatically. its not even strictly problem for node js beacuse if you want lets say, send changes to server via ajax and save in a file, it wont happen beacuse its not present in change object. Anyone had similiar problem and can help?
client code:
var appCM = CodeMirror.fromTextArea(document.getElementById('app-cm'), {
mode: 'text/html',
theme: "monokai",
styleActiveLine: true,
lineNumbers: true,
matchBrackets: true,
indentUnit: 4,
indentWithTabs: true,
autoCloseTags: true,
autoCloseBrackets: true,
matchTags: false,
extraKeys: {
"Ctrl-Space": "autocomplete",
"Ctrl-Q": function(appCM) {
appCM.foldCode(appCM.getCursor());
}
},
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
readOnly: access
});
appCM.on('change', function(i, op) {
socket.emit('change', op);
});
socket.on('change', function(data) {
appCM.replaceRange(data.text, data.from, data.to);
});
server code:
socket.on('change', function(op) {
if(op.origin === '+input' || op.origin === 'paste' || op.origin === '+delete') {
clients.forEach(function(client) {
if(client !== socket)
client.emit('change', op);
});
};
});
You are explicitly filtering out changes whose origin isn't one of input/paste/delete. Why are you doing that? You'll need to propagate all changes if you want peers to stay in sync.
I'm trying to figure out why I can't change the backdrop to 'true' after first changing it to 'static' when using Bootstrap's modal.
I run this code:
$('#modal').modal({backdrop: 'static', keyboard: false, show: true});
$.post('server.php', $('#form').serialize(), function(data) {
if(data.success) {
$('#modal').modal({backdrop: true, keyboard: true});
} else {
$('#modal').modal({backdrop: true, keyboard: true});
}
}, 'json');
It will set it so the backdrop and keyboard will not function at the start, but I cannot figure out why I can't set it back to default.
Thanks for reading.
How about this
it looks like twitter bootstrap is storing all data in a data variable called bs.modal. so just remove that data variable and reinitialize the modal.
Your final code will look something like this
$('#modal').modal({backdrop: 'static', keyboard: false, show: true});
$.post('server.php', $('#form').serialize(), function(data) {
if(data.success) {
$('#modal').removeData('bs.modal').modal({backdrop: true, keyboard: true});
} else {
$('#modal').removeData('bs.modal').modal({backdrop: true, keyboard: true});
}
}, 'json');
The above solution was not working fine for me.
So I destroyed this instance of modal using this :-
$('#modal-xl').on('hidden.bs.modal', function (e) {
$("#modal-xl").modal('dispose');
})
Check working of dispose method here
Follow up to the solution presented by #Cerlin: I could not simply remove all data set to Bootstrap v4.6's modal, since I had other functionality attached to it. Using jQuery v3.6's $.extend(), I was able to modify the data directly to allow the backdrop/keyboard to be usable again. If you don't use jQuery and do not support Internet Explorer, you could always use JavaScript's built-in method Object.assign().
// Variable Defaults
var bootstrapModal = $('.modal');
var bootstrapData = bootstrapModal.data('bs.modal');
// Release Modal Backdrop
bootstrapModal.data('bs.modal', $.extend(true, bootstrapData, {
_config: $.extend(true, bootstrapData._config, {
backdrop: true,
keyboard: true
})
}));
I am using Mootools TextBoxList for a project. I was attempting to set the addonblur option so new tags entered would automatically be added to the list when the text box looses focus. However, I am unable to determine the correct syntax for how to set this.
I read the documentation several times and tried different things, but couldn’t get it.
My current initialization looks like this:
window.addEvent('load', function () {
var t = new TextboxList('txtAttributes', {unique: true, plugins: {autocomplete: {
minLength: 3,
queryRemote: true,
remote: {url: 'tagssuggest'}
}}});
How can I modify this to include addonblur: true?
Like this:
var t = new TextboxList('txtAttributes', {
bitsOptions: {
unique: true,
editable: {
addOnBlur: true
},
plugins: {
autocomplete: {
minLength: 3,
queryRemote: true,
remote: {url: 'tagssuggest'}
}
}
}
});