Toastr Redirect Issue

[GhostElite_89]

I got toastr.js to work but once the form is submitted, it flashes for a second then the page is reloaded (supposed to be originally). How do I get the form submit button to fire off a notification after the page has been refreshed?

 

<script type="text/javascript">

		 $(document).ready(function () {
			$('#add').click(function (e) {
				
					toastr.success("Folder 2 has been clicked!", "Folder 2", );

					});
});
	</script>
	

Im simply using an "action="#"" command for the form

[denno020]

The issue you're running in to is one of timing. The fact that you can see the toastr at all is very surprising, and likely because there aren't any other actions being performed on click.. As soon as there are some actions being performed within the click handler, then the toastr likely won't ever be seen! Unless of course, we fix it!

Essentially we need to tell the browser to stop processing the click event so the page refresh doesn't occur

Something like this will get you going:

<script type="text/javascript">
  $(document).ready(function () {
    $('#add').click(function (e) {
      e.preventDefault(); // Stop the browser from redirecting to click target (i.e. the href)
      // Perform actions
      // ...
      // ...
      toastr.success("Folder 2 has been clicked!", "Folder 2", );
      
      window.setTimeout(function () {
        toastr.clear();
      }, 3000);
    });
  });
</script>