Victor Huang Victor Huang - 4 days ago 6
HTML Question

Alert show and disappear after period of time

My code is working but I want to show the alert for period of time (alert alert-warning) and for (alert alert-success) I also want to show the alert for period of time but after that it reload the page.

Screen below example for the (alert alert-warning)
enter image description here

It's working but it would be great if the alert-warning show and disappear after a period of time (I think 3 second should be nice).

Screen below for the (alert alert-success)
enter image description here

It's also working and I also want to show and disappear after a period of time but for this alert I want after the alert disappear it's directly reload the page (without close the x button)

this is my index.php

enter image description here

this is my register.php

enter image description here

and this is my main.js

enter image description here

My problem is in main.js, I tried some code it worked, but after the alert disappear (3second), when the user tries to display it again it don't worked anymore.
Any advice would be appreciated.

Answer

It didn't show because after success callback, you hide the element after 3 seconds of setTimeout. What you need to do is, before run setTimeout function, just show the element back to page like instance :

success : function () {
  $( '#register_message' ).show(); //show the element back
  $( '#register_message' ).html(''); // remove existing element
  $( '#register_message' ).html( data ); // adding new element coming from server side
  ...........
  the rest of the code
  ..........

}

For reload :

If the data coming from server side is an HTML code, then do like this :

success : function ( data ) {

   $( '#register_message' ).show(); //show the element back
   $( '#register_message' ).html(''); // remove existing element
   $( '#register_message' ).html( data ); // adding new element coming from server side

   setTimeout( function () {
      $( '#register_message' ).hide();
      // and at here you can check whether the html coming is success or error
      if ( $( data ).hasClass( 'alert-success' ) )
          location.reload();

   }, 3000 );

}
Comments