OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Find and clear a toast (Toastr)

  • Thread starter Thread starter Gokul
  • Start date Start date
G

Gokul

Guest
I have a page where there may be multiple toasts added dynamically using the plugin https://github.com/CodeSeven/toastr.

I have a link(Ok) on each toast on clicking that link I need to close only the particular toast not all toast that are visible.

Code:
toastr.warning("You are warned. <br/> <a id='close-toastr'> Ok </a>", {
    tapToDismiss: false
    , timeOut: 0
    , extendedTimeOut: 0
    , allowHtml: true
    , preventDuplicates: true
    , preventOpenDuplicates: true
    , newestOnTop: true
});

$('body').on('click', 'a#close-toastr', function () 
    toastr.clear();
});

In the above code I have used toastr.clear() method which clears all toasts.

Can anyone help me how to identify the toast of the Ok link clicked and clear only that toast?

Update #1:

I tried the answer given by @imjosh but, $(this).closest('.toast') finds the correct toast but toastr.clear($(this).closest('.toast')); doesn't close any toast.

If I store the toast object in a variable and pass as an argument to toastr.clear() it works. But, I don't know how to handle multiple toasts this way.

Code:
var toast = toastr.warning("You are warned. <br/> <a id='close-toastr'> Ok </a>", {
    tapToDismiss: false
    , timeOut: 0
    , extendedTimeOut: 0
    , allowHtml: true
    , preventDuplicates: true
    , preventOpenDuplicates: true
    , newestOnTop: true
});

$('body').on('click', 'a#close-toastr', function () 
    toastr.clear(toast);
});

Update #2:

Sorry, I am using https://github.com/Foxandxss/angular-toastr plugin not the one I mentioned above.

Thanks.

<p>I have a page where there may be multiple <code>toasts</code> added dynamically using the plugin <a href="https://github.com/CodeSeven/toastr" rel="nofollow noreferrer">https://github.com/CodeSeven/toastr</a>.</p>

<p>I have a <code>link</code><strong>(Ok)</strong> on each toast on clicking that link I need to close only the particular <code>toast</code> not all <code>toast</code> that are visible. </p>

<pre><code>toastr.warning("You are warned. <br/> <a id='close-toastr'> Ok </a>", {
tapToDismiss: false
, timeOut: 0
, extendedTimeOut: 0
, allowHtml: true
, preventDuplicates: true
, preventOpenDuplicates: true
, newestOnTop: true
});

$('body').on('click', 'a#close-toastr', function ()
toastr.clear();
});
</code></pre>

<p>In the above code I have used <code>toastr.clear()</code> method which clears all toasts. </p>

<p>Can anyone help me how to identify the <code>toast</code> of the <strong>Ok</strong> <code>link</code> clicked and clear only that toast?</p>

<p><strong>Update #1:</strong></p>

<p>I tried the answer given by @imjosh but, <code>$(this).closest('.toast')</code> finds the correct toast but <code>toastr.clear($(this).closest('.toast'));</code> doesn't close any toast. </p>

<p>If I store the toast <code>object</code> in a variable and pass as an argument to <code>toastr.clear()</code> it works. But, I don't know how to handle multiple toasts this way.</p>

<pre><code>var toast = toastr.warning("You are warned. <br/> <a id='close-toastr'> Ok </a>", {
tapToDismiss: false
, timeOut: 0
, extendedTimeOut: 0
, allowHtml: true
, preventDuplicates: true
, preventOpenDuplicates: true
, newestOnTop: true
});

$('body').on('click', 'a#close-toastr', function ()
toastr.clear(toast);
});
</code></pre>

<p><strong>Update #2:</strong></p>

<p>Sorry, I am using <a href="https://github.com/Foxandxss/angular-toastr" rel="nofollow noreferrer">https://github.com/Foxandxss/angular-toastr</a> plugin not the one I mentioned above.</p>

<p>Thanks.</p>
 

Latest posts

J
Replies
0
Views
1
jbowerbir
J
V
Replies
0
Views
1
Vinicius Martin
V
Top