javascript - 警报显示并在一段时间后消失

Question

我的代码正在运行，但我想在一段时间内显示警报 (alert alert-warning) 和 (alert alert-success) 我也想在一段时间内显示警报，但之后会重新加载页面。

(alert alert-warning) 的屏幕下方示例

它工作正常，但如果 alert-warning 显示并在一段时间后消失(我认为 3 秒应该不错)，那就太好了。

(alert alert-success) 下面的屏幕

它也在工作，我也想显示并在一段时间后消失但是对于这个警报我想在警报消失后直接重新加载页面(不关闭 x 按钮)

这是我的index.php

这是我的register.php

这是我的 main.js

我的问题出在 main.js 中，我尝试了一些它可以工作的代码，但是在警报消失后(3 秒)，当用户尝试再次显示它时它不再工作了。任何意见，将不胜感激。

Answer 1

它没有显示是因为成功回调后，您在 setTimeout 3 秒后隐藏该元素。您需要做的是，在运行 setTimeout 函数之前，只需将元素显示回页面，例如:

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
  ..........

}

重新加载:

如果来自服务器端的数据是 HTML 代码，那么这样做:

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 );

}