Jump to content
GhostElite_89

Toastr Redirect Issue

Recommended Posts

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

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.