Toastr - encountering a problem with the settings

After invoking a toastr message using the following command: 

Command: toastr["success"]("foo")

toastr.options = {
  "closeButton": false,
  "debug": false,
  "newestOnTop": false,
  "progressBar": false,
  "positionClass": "toast-bottom-right",
  "preventDuplicates": false,
  "onclick": null,
  "showDuration": "300",
  "hideDuration": "1000",
  "timeOut": "2000",
  "extendedTimeOut": "1000",
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut"
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>

It appears that some options are not taking effect, specifically timeOut and positionClass were not overridden as expected.

Could someone please provide me with information on what might be causing this issue?

javascripttoast

Answer №1

In my opinion, it’s best to modify the options before using any of toastr's methods such as info or success.

Answer №2

If you are currently using jQuery version 1.2.3, it may be time to consider updating to a newer version. I conducted a test on jsbin and found that switching to a newer version like "1.9.1" can resolve any compatibility issues. Alternatively, if you must remain on version 1.2.3, look for a different version of toastr that is compatible with this jQuery version.

You can view the jsbin example here: https://jsbin.com/rufuganane/edit?html,output

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountered an unhandled promise rejection: TypeError - The Form is undefined in Angular 6 error

Whenever I attempt to call one .ts file from another using .Form, I encounter the following error: Uncaught (in promise): TypeError: this.Form is undefined The file that contains the error has imported the .ts file which I intend to pass values to. ...

javascriptangularangular6angular7

Failure to receive Ajax XML data in success callback

I am struggling to access the book.xml file that is located in the same folder as other files. Everything seems fine, but the ajax function refuses to enter the success state and instead shows an [object object] error message. The XML file is very simple, ...

javascriptjqueryhtmlajax

Using for loops in Vue.js to dynamically generate HTML elements

I have a JSON object passed into an EJS template, and I want to achieve the same table structure in VUE.js. However, it seems like v-for in Vue only works with li tags. Is there a way to create a similar loop in VUE that generates HTML elements like show ...

javascriptvue.js

Spring Security does not generate an error if the authorization header is missing following a login using AngularJS

Working on implementing HTTP Basic Authentication using Spring Security and Angular JS by including the Authorization header in $http headers: const headers = { authorization: "Basic " + btoa(this.login + ":" + this.password) }; this._$http.get("user ...

javascriptangularjsspringspring-mvcspring-security

The JavaScript code is attempting to execute a PHP script, however, I am struggling to parse the JSON data returned for use in the

As a novice, I am in the process of creating a JavaScript function that calls a PHP script every second. The PHP script retrieves values from MySQL DB, encodes them into JSON, which is then decoded by JS to display them on an HTML page. I have two queries ...

javascriptphpmysqljson

The output of VueJs hooks shows a blank refs object first, followed by the referenced elements

Below is the HTML VueJS code sample that I am working with: <div v-for="site in topSites" ref="ts"><a :href="site.url"> ... </div> Update: Here is the full div code: <div v-for="site in topSites& ...

javascripthtmlvue.jsvuejs2vue-component

What could be causing my function to fail after pressing the button?

I am new to coding in HTML and JS and attempted to create a button that combines two strings into one when clicked. Can someone please review my code and point out where I may have made an error? <!DOCTYPE html> <html> <body> ...

javascripthtml

Is it possible to configure route localization in Next.js and next-i18next to function as an URL alias?

Currently, I am utilizing NextJs version 10.0.5 in conjunction with next-i18next version 8.1.0 to localize my application. With the introduction of subpath routing for internationalized routing in NextJs 10, I encountered a situation where I needed to modi ...

javascriptexpressnext.jsi18nextnext-i18next

What is the best way to streamline this using Javascript or jQuery?

Looking for a way to simplify the code for 4 vertical sliding panels? Check out the following script: $(".sliding-panels").click(function() { var n = $(this).attr("number"); var panels = $(".panel"); panels.not(".panel" + n).removeClass("pa ...

javascriptjquery

What is the best way to add attachments to the clipboard in a Chrome extension?

One possible way to achieve this is by using the navigator.clipboard.write API, but keep in mind that this API is not available to background pages of Chrome extensions. A method I attempted involved creating a blob like this: let blobFinal = null; // ...

javascriptgoogle-chrome-extension

The initial attribute unattainable for entities processed by csv-parse

Working on parsing a csv file, I am utilizing the csv-parse library to handle the following data - userID,sysID 20,50 30,71 However, after parsing, I am encountering difficulty accessing the property generated from the first column userID. Here is the s ...

javascriptnode.jsnode-csv-parse

Guide on initializing a Redux toolkit state with an array of objects or local storage using TypeScript

Currently, I am attempting to set an initial state (items) to an array of objects or retrieve the same from localStorage. However, I am encountering the following error. Type 'number' is not assignable to type '{ id: string; price: number; ...

javascripttypescriptreduxnext.js

Tips for making an image fill the entire screen with a header using React Navigation

My screen includes an image and I would like to capture the full-size screen with the header displayed. However, using position: "absolute" does not properly wrap the header, and setting header: null is not an option since I still want the back button to b ...

javascriptreactjsreact-nativereact-navigationreact-native-ios

I designed a dropdown menu with a searchable <mat-select> feature, where selecting an item is automatic when a space bar is pressed in the search box

Description : I have implemented a dropdown list using element that contains a list of items along with a search field. This allows users to easily search for specific items in the list instead of manually scrolling through a long dropdown menu. They can ...

javascripthtmlangularmat-selectmat-option

Visualizing data with a grouped bar chart in D3.js

I am currently working on creating a vertical bar chart using D3.js, similar to the one shown in this (source: statcan.gc.ca) However, I am facing an issue as I am unable to display two sets of data for comparison. Following a tutorial from , I have cr ...

javascriptsvgd3.jscharts

How can I disable auto-fill for password input fields? Setting autocomplete="off" doesn't seem to be working

Hey there, I'm having some trouble with the autocomplete feature in Google Chrome. Can anyone suggest an alternative way to disable autocomplete for password fields? By the way, my project is using Vue.js. ...

javascripthtmlcssvue.js

The localhost server in my Next.js project is currently not running despite executing the 'npm run dev' command. When trying to access the site, it displays an error message saying "This site can't be

I attempted to install Next.js on my computer and followed the documentation provided to set up a Next.js project. You can find the documentation here. The steps I took were: Ran 'npx create-next-app@latest' Was prompted for the name of my proj ...

javascriptreactjsnpmnext.jslocalhost

Displaying Text and Images on a Sliding Carousel with a Static Background Image

I am currently experimenting with the Materializecss Image Slider. My goal is to have a fixed full-screen background image while the texts and images slide over it. Initially, I tried setting the background-color of the slider class as transparent, but un ...

javascripthtmlcssslidermaterialize

Show the date and time in a visually appealing way by using HTML and JavaScript in an HTA application with scrolling effects

I have the following JavaScript code to show the current date in the format Mon Jun 2 17:54:28 UTC+0530 2014 within an HTA (HTML application). Now, I would like to display it as a welcoming message along with the current system date and time: Mon Jun 2 17: ...

javascriptcsshtmlhta

Is there a way to display sorting icons consistently and in a blue color for the currently selected sorting column in a React material-table component?

I recently used the material-table library to create a material table, but I am having trouble displaying the sorting icon continuously for all columns. In addition, I would like the color of the column that is currently sorted to be blue. If you want to ...

javascriptreactjsmaterial-uimaterial-table