Identical characteristics on display in $mdToast

I have created a custom function to display multiple toasts at the same time, but only the last action has the passed values while other values remain as the first toast.

Check out the screenshothttps://i.sstatic.net/IuQYw.png

Here is my code snippet

      var setToaster = function(text,action,url,position) {
        var toast = $mdToast.simple()
            .textContent(text)
            .action(action)
            .position(position)
            .hideDelay(false)
            .highlightAction(true)
            .highlightClass('md-accent')// Accent is used by default, this just demonstrates the usage.
            // .position(pinTo);

      return  $mdToast.show(toast).then(function (response) {
            if (response == 'ok') {
                $location.url(url);
            }
        });
    };

    var setToaster2 = function(text,action,url,position) {


    if (vm.viewForm == false) {
        setToaster('Your Client History Form still not completed,Please Complete it', 'Complete', '/client-history', 'top right')
    }


    if (vm.myVar.complete_profile == true) {
       setToaster('Your profile is incomplete, Please Complete your profile', 'Go To Profile', '/user/profile', 'bottom right')
    }

Is there an issue with this function? Can the toast feature handle multiple instances like this?

Answer №1

I have recently made a change in the way I call a function, which has proven to be successful for me. Hopefully, this updated approach can benefit others as well.

enter code here     if (vm.myVar.complete_profile == false) {
        var message = 'Your profile is incomplete, Please Complete your profile';

        $mdToast.show({
            template: '<md-toast id="profile-message" layout="column" layout-align="center start"><div class="md-toast-content">' + message + '<md-button ui-sref="app.auth_profile">Complete</md-button></div></md-toast>',
            hideDelay: 10000,
            position: 'top right',
            parent: '#content'
        }).then(function(){
            location.url('user/profile')
        });

    }

    if (vm.viewForm == false) {
        var message = 'Your Client History Form still not completed,Please Compelete it';

        $mdToast.show({
            template: '<md-toast id="form-message" layout="column" layout-align="center start"><div class="md-toast-content">' + message + '<md-button ui-sref="app.auth_client-history">Complete</md-button></div></md-toast>',
            hideDelay: 10000,
            position: 'top right',
            parent: '#content'
        }).then(function(){
            location.url('client-history')
        });
    }

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

Determining the optimal route to retrieve the key value in JSON format?

Here is a sample json data: var countryData = { "USA":{ "W": 97.0, "N":42.5, "E": 130.0, "S": 20.0, "vert_%": 170 }, }; While I know how to access the values: var myValue = countryData.USA.W; How can I access a specific key like W or USA? ...

Leverage the power of JSON objects within your Angular.js application

Is it possible to request a JSON object, such as the one in employes.json file: {"employees":[ {"firstName":"John", "lastName":"Doe"}, {"firstName":"Anna", "lastName":"Smith"}, {"firstName":"Peter", "lastName":"Jones"} ]} Then, how can I util ...

What is the best way to streamline the response with RxJs?

At this moment, I am using the following code for the operation mentioned in the title: from(["url_1", "url_2"]) .pipe( concatMap(url => this.vocabularyService.getSimilarProducts(url) .pipe(concatMap(x => x.items)) ), toArray() ...

Enhance your Angular-material calendar by incorporating tooltips for dates

I am attempting to include a tooltip on Angular Material calendar dates. I have experimented with using matToolTip but unfortunately, nothing appears when hovering over the dates. <mat-calendar [dateClass]="dateClass()" [startAt]="month" [selected]=" ...

tips for using Node Mailer to send emails without using SMTP

Currently, I am facing an issue with sending emails through nodemailer. Although I have successfully used my gmail account for this purpose in the past, I now wish to switch to using my business email to communicate with clients on a regular basis. The cu ...

Minimizing repeated autofocus calls in material-ui's <TextField> component

In the realm of coding with material-ui, when dealing with the <TextField> component, it's important to keep in mind that the solution may actually lie within React itself. Let's paint a scenario where we're crafting a basic login for ...

Executing multiple asynchronous XMLHttpRequests with React

I experimented with multiple asynchronous XMLHttpRequests based on various examples I came across: var URL=["https://api.github.com/users/github","https://api.github.com/users/github/repos"]; var xhr = [null, null]; for (var i = 0; i < 2; i++) { ( ...

Utilizing AngularJS ng-repeat to dynamically assign distinct values to buttons; techniques for extracting the assigned value to JavaScript upon button click

In my Angular project, I am creating a waiting list system where users can join a waiting list and then be moved to a member list. To populate the table with rows of waiting people, I am using ng-repeat. Each row has a button that, when clicked, should mov ...

How to retrieve information from a pre-populated <textarea> using Google Maps script in AngularJS

Is there a way to transfer data from a prefilled <textarea> that is populated by accessing the Google Maps API in a JavaScript script, into an AngularJS controller? $scope.Add=function(msg){ $log.log(msg) } <div ng-app=""> <div ng-contro ...

Sending mass text messages with a customized message for each phone number - A guide using Twilio

I have a batch of 100 to 1500 phone numbers that I need to send SMS messages to. Each message should include the recipient's name associated with the phone number in the text. How can I achieve this using Twilio? client.notify.services(notifyServiceS ...

Removing all Null Form Inputs from the Document Object Model upon Submission utilizing JavaScript

I am currently working on a conditional Shopify form that was passed down to me from another developer. The form utilizes JavaScript/Jquery for field validation, ensuring that all mandatory fields are completed before proceeding to the next step. After mak ...

Implement pagination for API calls within a React Component

I am trying to implement pagination for the results of an API call. The following code snippet shows how I am making the API call using Axios: apiCall() { const API = `http://www.omdbapi.com/`; axios.get(API, { params: { apikey: proces ...

Generating a component and rendering it according to the dynamic route parameters using mapStateToProps and reselect techniques

I have set up a global app container to store data for different rooms, with a sub-container called roomDetails that utilizes a reselect selector to pick a room from the global state based on ownProps.params.slug. This process is accomplished through mapSt ...

Issue with Flat-UI: Navigation bar is not collapsing correctly. Need help to resolve this problem

I am currently utilizing the most recent Twitter Bootstrap along with Flat UI. I have been trying to create a basic navbar that collapses when the screen size is reduced. How can I resolve this issue? This is how it currently appears: My navigation items ...

Problem encountered while attempting to insert chunk data into an array correctly with Node.js

I am currently working on a project where I need to read a text file and store each word in an array using Node.js. However, I am facing difficulties as my current code is not producing the desired result. Below is an overview of my txt file. CHANGES: C ...

Creating a delay before each new object is added to an array within a loop

I have a code for loop that needs to send an AJAX request with a one second delay between each iteration. It should take the object and add it to the array using .push method. However, my current implementation only adds the first object to the array. Ca ...

In Reactjs, it is important that each child in a list is assigned a distinct "key" prop

I am currently working on fetching data in Nextjs/Reactjs after clicking a button, but I am encountering the following error in my console: Each child in a list should have a unique "key" prop Below is my current code where data is displayed wit ...

Transfer information from one Angular JS page to another pager based on ID

In my use of the mobile angular js UI framework, I am a beginner in angular js and looking to transmit data from one page to another using city id. When a user clicks on a city, the data should be displayed according to that specific city. HOME PAGE: ht ...

merge a multidimensional array to create a dictionary object organized by keys

In my quest to construct a pricing structure for a product based on its color, size, and material, I have been grappling with the implementation process. Currently, I am maintaining a single JSON object that contains all possible options and attempting to ...

Extract the text from a Spotify mobile application

One of the features in my application is generating a link based on the currently playing song. To make it user-friendly, I want to implement a button that will copy the generated link to the clipboard when clicked. I've explored options like zerocli ...