Search code examples
javascriptjquerycsstoastr

Display toastr within a particular div

I need to display a toastr message within a particular div, class or id. By default it is body. I have figured out that I need to change the target. But I cannot seem to make it work.

Say for example I want to display toastr inside this div:

<showerror> </showerror>

This is the code I am using:

toastr.options = {
    "closeButton": false,
    "debug": false,
    "newestOnTop": false, 
    "progressBar": false, 
    "positionClass": "toast-top-right",
    "preventDuplicates": false, 
    "onclick": null,
    "showDuration": "300", 
    "hideDuration": "1000", 
    "timeOut": "5000", 
    "extendedTimeOut": "1000",
    "showEasing": "swing",
    "hideEasing": "linear",
    "showMethod": "fadeIn",
    "hideMethod": "fadeOut",
};

$('#submitform').submit(function(e){
    e.preventDefault(); 
    console.log($('#ques1').val());
    if($('#ques1').val()==null){
        toastr.error('Please select a question', 'Error!');
   }
});

Could anyone please help.

Solution

  • It's simple just set the a new class name to "positionClass" inside toastr.options 

    toastr.options = { 
    ....
    "positionClass": "your-classname-here",
    ....
};

    here is a Fiddle