成功发布新闻后显示引导警报框答案

【问题标题】：Show bootstrap alert box after successfully posted a news成功发布新闻后显示引导警报框
【发布时间】：2016-07-13 01:15:53
【问题描述】：

这就是我想做的。每当管理员成功发布新闻时，我希望 div 成功警报在 3 秒后弹出并消失。我想把它放在文本“添加新闻”之后，如图所示。有人可以告诉我如何执行此操作吗？

这是我工作的示例图片。

这是我添加新闻的 php 代码。

  <?php
    include_once('connection.php');
    session_start();
   $username = ucfirst($_SESSION['username']);

  if(isset($_POST['submit'])){

    $title = $_POST['title'];
    $date = $_POST['date'];
    $content = $_POST['content'];
    $file=$_FILES['image']['tmp_name'];
    $image= @addslashes(file_get_contents($_FILES['image']['tmp_name']));
    $image_name= addslashes($_FILES['image']['name']);
    move_uploaded_file($_FILES["image"]["tmp_name"],"img/" . $_FILES["image"]["name"]);
    $newsimage="img/" . $_FILES["image"]["name"];



    $sql ="INSERT into news (news_title, news_date, news_content, news_image) VALUES ('$title', '$date', '$content', '$newsimage')";
    mysqli_query($con, $sql);



  }
  ?>

这是提醒框所在的表单。

 <div id="page-wrapper">

            <div class="container-fluid">

                  <a class='btn btn-info' href ="news.php" style="margin-bottom:25px; float:right;" ><span class="glyphicon glyphicon-search"></span> View all news</a>


            <form method="post" action ="addnews.php" enctype="multipart/form-data">

             <h4>Add News</h4>

             <div class="alert alert-success" id="success-alert">
              <strong>Successfully posted!</strong>
             </div>

                <div class="form-group">
                       <label for="title">News Title</label>
                        <input type="text" name="title" class="form-control title" id="title" placeholder="News Title" required >
                </div>  

              <div class="form-group">
               <label for="title">Date</label>
                   <input type="text" name="date" class="form-control date" id="date" placeholder="Date" required >  
                </div>

                <div class="form-group">
                      <label for="content">News Content</label>
                     <textarea class="form-control content" name="content" rows="5" id="content" required></textarea>
                </div>    


                      <img id="blah" src="" alt="image here" width="200px" height="140px"/>
                       <input id="image" name="image" class="fileupload" type="file" accept="image/*"/>
                     <button type="submit" name="submit" id="postnews" class='btn btn-info '>Post news</button>
              </form>




        </div>
        <!-- /#page-wrapper -->

    </div>
    <!-- /#wrapper -->

【问题讨论】：

标签： javascript php jquery html twitter-bootstrap

【解决方案1】：

您可以使用 Php 会话在表单提交时显示警告框，例如：

<?php
if(isset($_SESSION['form_submit'])) {
 echo '<div class="alert alert-success alert-dismissable" id="success-alert">';
          echo '<strong>Successfully posted!</strong>';
         echo '</div>';
 unset($_SESSION['form_submit']);
}
?>

您已在表单提交时设置此会话变量：- $_SESSION['form_submit']=true

要自动隐藏此警告框，您可以使用此 javascript 代码

$(".alert-dismissable").fadeTo(2000, 500).slideUp(500, function(){
 $(".alert-dismissable").alert('close');
});

【讨论】：

【解决方案2】：

在你的 addnews.php 文件中做这样的事情

假设你使用的是核心 php 意味着没有框架

     $msg = ''
    $sql ="INSERT into news (news_title, news_date, news_content, news_image) VALUES ('$title', '$date', '$content', '$newsimage')";

    if  (mysqli_query($con, $sql)) 
    {
       $msg = 'success'

    } 
    else 
     {
     $msg = 'error'
     }
     header('Location: http://www.example.com/addnews.php?msg='.$msg);

在您的表单文件中

只需使用 $_GET['msg'] 接收 $msg

  <?php  if (isset($_GET['msg'] and $GET['msg'] == 'success') {?>

      <div class="alert alert-success" id="success-alert">
          <strong>Successfully posted!</strong>
         </div>
  <?php  } 

       if (isset($_GET['msg'] and $GET['msg'] == 'error') { ?>

          <div class="alert alert-error" id="error-alert">
             <strong>Something went wrong !</strong>
           </div>
<?php  } ?>

这也可以通过 ajax 以更有效的方式完成

要关闭警报，请使用引导警报关闭按钮或使用 jquery 的 setTimeout 函数

 window.setTimeout(function () { 
           $("#success-alert").alert('close'); }, 2000);               
    });

或者你可以像这样使用：

    $("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
    $("#success-alert").alert('close');
  });

对错误做同样的事情

【讨论】：

【解决方案3】：

已经创建了示例，您可以使用它，它工作正常。这个 div 放在新闻 div 之后。

<div id="msg">
    <?php if(isset($_SESSION) && $_SESSION['msg'] != ''){ ?>
         <div class="alert alert-success">
             <strong>Success!</strong> Successfully posted!
         </div>
    <?php } unset($_SESSION['msg']); ?>
</div>

脚本：设置超时功能

setTimeout( function(){$('#msg').hide();} , 3000);

【讨论】：