如何在页面中间设置成功提醒?

时间:2016-06-27 09:22:42

标签: javascript php css twitter-bootstrap alert

在我的应用程序中,当用户更新或插入任何数据时,如果返回值为1,则显示引导成功警报。但它出现在页面的末尾,我希望它在页面的中间或div框页脚。这是我的页面代码。

ClassConnection.php:

<?php

 class connection
 {

 Public $ServerName="localhost";
 Public $ServerUser="root";
 Public $ServerPassword="";
 Public $DatabaseName="taksicab";


public $mycon=" ";
public $rs = " " ;
public $sql= " ";
public $myquery = " ";
    function open_connection()
    {
      $con=mysql_connect($this->ServerName, $this->ServerUser, $this->ServerPassword);

      if(!$con)
      {
         die("Error in connection .......");
      }

      else
      {
            $this->mycon=$con;
            return $this->mycon;
      }
   }

   function SelectDB()
   {
      mysql_select_db($this->DatabaseName);
   }


    //DBOperations

     function DBOperation ($mTable,$mFields,$mValues,$mOperation)
     {
        $mSQL="";
        $mStr="";

    $tFields = explode(",",$mFields);
    $tValues = explode(",",$mValues);


    if($mOperation == "Insert")
    {

        $mSQL = "Insert into " . $mTable . "( " . $mFields . ") values ( " . $mValues . ")";
        $query = mysql_query($mSQL);




    }


    else if($mOperation == "Update")
    {

                for($i=0; $i<count($tFields); $i++)
                {

                    if($i== (count($tFields)-1))
                    {

                        $mStr = $mStr . " " . $tFields[$i] . " = " . $tValues[$i];
                    }

                    else
                    {       
                        $mStr=$mStr . " " . $tFields[$i] . " = " . $tValues[$i] . " , ";
                    }

                }

        $mSQL = "Update " . $mTable . " set " . $mStr . " Where " . $tFields[0] . " = " . $tValues[0];
        $query = mysql_query($mSQL);


    }

    else if($mOperation == "Delete")
    {

        $mSQL = "Delete from " . $mTable . " Where " . $tFields[0] . " = " . $tValues[0];
    }


   // echo $mSQL;

$this->myquery = $query ;
    return $this->myquery;



}

 }

 ?>

Block_User.php

   <?php
      include("ClassConnection.php");

    $mcon=new connection();

   $mcon->open_connection();
    $mcon->SelectDB();



   ?>


   <!DOCTYPE html>
  <html>
   <head>
    <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <title>Block User | Admin Taksi</title>
       <!-- Tell the browser to be responsive to screen width -->
           <meta content="width=device-width, initial-scale=1, maximum-      scale=1, user-scalable=no" name="viewport">
     <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
   <!-- Ionicons -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
   <!-- Theme style -->
   <link rel="stylesheet" href="../dist/css/AdminLTE.min.css">

   <link rel="stylesheet" href="../dist/css/skins/skin-blue.min.css">

     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media   queries -->
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
     <!--[if lt IE 9]>
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js">       </script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
   <![endif]-->
   </head>
    <body class="hold-transition skin-blue sidebar-mini">
     <div class="wrapper">

     <!-- Main Header -->
      <header class="main-header">

  <!-- Logo -->
  <a href="index2.html" class="logo">
  <!-- mini logo for sidebar mini 50x50 pixels -->
  <span class="logo-mini"><b>A</b>LT</span>
    <!-- logo for regular state and mobile devices -->
   <span class="logo-lg"><b>Admin</b>&nbsp;Taksi</span>
  </a>

   <!-- Header Navbar -->
 <nav class="navbar navbar-static-top" role="navigation">
  <!-- Sidebar toggle button-->
  <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
    <span class="sr-only">Toggle navigation</span>
  </a>
  <!-- Navbar Right Menu -->
  <div class="navbar-custom-menu">
    <ul class="nav navbar-nav">

                <!-- User Account Menu -->
      <li class="dropdown user user-menu">
        <!-- Menu Toggle Button -->
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          <!-- The user image in the navbar-->
          <img src="../dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
          <!-- hidden-xs hides the username on small devices so only the image appears. -->
          <span class="hidden-xs">Ravi Barot</span>
        </a>
        <ul class="dropdown-menu">
          <!-- The user image in the menu -->
          <li class="user-header">
            <img src="../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">

            <p>
              Ravi Barot - Web Developer
              <small>Tarinee since May. 2016</small>
            </p>
          </li>
          <!-- Menu Body -->
          <li class="user-body">

            <!-- /.row -->
          </li>
          <!-- Menu Footer-->
          <li class="user-footer">

            <div class="pull-right">
              <a href="index.html" class="btn btn-default btn-flat">Sign out</a>
            </div>
          </li>
        </ul>
      </li>
     </ul>
  </div>
   </nav>
    </header>
    <!-- Left side column. contains the logo and sidebar -->
    <aside class="main-sidebar">

<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">

  <!-- Sidebar user panel (optional) -->
  <div class="user-panel">
    <div class="pull-left image">
      <img src="../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
    </div>

    <div class="pull-left info">
      <p>Ravi Barot</p>
      <!-- Status -->

    </div>
  </div>

  <!-- search form (Optional) -->
  <form action="#" method="get" class="sidebar-form">
    <div class="input-group">
      <input type="text" name="q" class="form-control" placeholder="Search...">
          <span class="input-group-btn">
            <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
            </button>
          </span>
    </div>
  </form>
  <!-- /.search form -->

  <!-- Sidebar Menu -->
  <ul class="sidebar-menu">
    <li class="header">Main Menu</li>
    <!-- Optionally, you can add icons to the links -->
    <li>
    <a href="dashboard.php">
    <i class="fa fa-fw fa-dashboard"></i> 
    <span>Dashboard</span>
    </a>
    </li>




    <li class="treeview">
      <li class="active">
    <a href="#">
    <i class="fa fa-fw fa-users"></i> 
     <span>Manage Users</span>
    </a>
    <ul class="treeview-menu">
    <li class="active">
    <a href="block_user.php">
    <i class="fa fa-fw fa-circle-o"></i> 
    Block User
    </a>
    </li>

    <li>
    <a href="obsulate_user.php">
    <i class="fa fa-fw fa-circle-o"></i> 
    Obsulate User
    </a>
    </li>
    </ul>
    </li>


  <li class="treeview"> 
    <a href="#">
    <i class="fa fa-fw fa-cab"></i> 
    <span>Manage Cabs</span>
    </a>
    <ul class="treeview-menu">
    <li>
    <a href="add_cab.php">
    <i class="fa fa-fw fa-circle-o"></i> 
    Add Cab
    </a>
    </li>

    <li>
    <a href="obsulate_cab.php">
    <i class="fa fa-fw fa-circle-o"></i> 
    Obsulate Cab
    </a>
    </li>
    </ul>
    </li>

    <li class="treeview"> 
    <a href="#">
    <i class="fa fa-fw fa-user"></i> 
    <span>Manage Driver</span>
    </a>
    <ul class="treeview-menu">
    <li>
    <a href="add_driver.php">
    <i class="fa fa-fw fa-circle-o"></i> 
    Add Driver
    </a>
    </li>

    <li>
    <a href="obsulate_driver.php">
    <i class="fa fa-fw fa-circle-o"></i> 
    Obsulate Driver
    </a>
    </li>
    </ul>
    </li>

    <li class="treeview"> 
    <a href="#">
    <i class="fa fa-fw fa-star-half-full"></i> 
    <span>Manage Cab Category</span>
    </a>
    <ul class="treeview-menu">
    <li>
    <a href="add_cab_category.php">
    <i class="fa fa-fw fa-circle-o"></i> 
    Add Cab Category
    </a>
    </li>

    <li>
    <a href="obsulate_cab_category.php">
    <i class="fa fa-fw fa-circle-o"></i> 
    Obsulate Cab Category
    </a>
    </li>
    </ul>
    </li>

    <li class="treeview"> 
    <a href="#">
    <i class="fa fa-fw fa-road"></i> 
    <span>Manage Route</span>
    </a>
    <ul class="treeview-menu">
    <li>
    <a href="add_source_place.php">
    <i class="fa fa-fw fa-circle-o"></i> 
    Add Source Place
    </a>
    </li>

    <li>
    <a href="obsulate_source_place.php">
    <i class="fa fa-fw fa-circle-o"></i> 
    Obsulate Source Place
    </a>
    </li>

    <li>
    <a href="add_desti_place.php">
    <i class="fa fa-fw fa-circle-o"></i> 
    Add Destination Place
    </a>
    </li>

    <li>
    <a href="obsulate_desti_place.php">
    <i class="fa fa-fw fa-circle-o"></i> 
    Obsulate Destination Place
    </a>
    </li>
    </ul>
    </li>

    <li class="treeview"> 
    <a href="#">
    <i class="fa fa-fw fa-arrows-h"></i> 
    <span>Manage Route Distance</span>
    </a>
    <ul class="treeview-menu">
    <li>
    <a href="add_distance.php">
    <i class="fa fa-fw fa-circle-o"></i> 
    Add Route Distance
    </a>
    </li>

    <li>
    <a href="update_distance.php">
    <i class="fa fa-fw fa-circle-o"></i> 
    Update Route Distance
    </a>
    </li>
    </ul>
    </li>

    <li class="treeview"> 
    <a href="#">
    <i class="fa fa-fw fa-rupee"></i> 
    <span>Manage Fare</span>
    </a>
    <ul class="treeview-menu">
    <li>
    <a href="add_new_fair.php">
    <i class="fa fa-fw fa-circle-o"></i> 
    Add New Fare
    </a>
    </li>

    <li>
    <a href="obsulate_fair.php">
    <i class="fa fa-fw fa-circle-o"></i> 
    Obsulate Current Fare
    </a>
    </li>
    </ul>
    </li>

     </ul>
     <!-- /.sidebar-menu -->
    </section>
    <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
     <div class="content-wrapper">
  <!-- Content Header (Page header) -->
    <section class="content-header">
    <h1>Manage User

  </h1>
  <ol class="breadcrumb">
    <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
    <li class="active">Here</li>
  </ol>
</section>

<!-- Main content -->
<section class="content">

  <!-- Your Page Content Here -->

  <div class="box box-info">
        <div class="box-header with-border">
          <h3 class="box-title">Block User</h3>
        </div>
        <!-- /.box-header -->
        <!-- form start -->
        <form class="form-horizontal" method="POST">
          <div class="box-body">
            <div class="form-group">
              <label for="inputEmail3" class="col-sm-2 control-label">User Email ID</label>

              <div class="col-xs-5">
                  <input type="email" class="form-control" id="inputEmail3" placeholder="Email" name="user_email">
              </div>
            </div>
            <div class="form-group">
              <label for="inputPassword3" class="col-sm-2 control-label">Block Reason </label>

              <div class="col-xs-5">
                  <input type="text" class="form-control" id="inputPassword3" placeholder="Reason for Blocking" name="block_reason">
              </div>
            </div>



              <!-- select -->
            <div class="form-group">
              <label for="form-control" class="col-sm-2 control-label">Block Peroid</label>
              <div class="col-xs-5">
                  <select class="form-control" name="block_period">
                      <option value="1 week">1 Week</option>
                      <option value="1 month">1 Month</option>
                      <option value="permenent">Permenent</option>

              </select>
            </div>
            </div>


          </div>
          <!-- /.box-body -->
          <div class="box-footer">

              <button type="submit" class="btn btn-info pull-left" name="block_user">Block User</button>
          </div>
          <!-- /.box-footer -->

        </form>
      </div>

      </section>
      <!-- /.content -->
      </div>
       <!-- /.content-wrapper -->

   <!-- Main Footer -->
   <footer class="main-footer">
  <!-- To the right -->
  <div class="pull-right hidden-xs">All rights reserved
  </div><strong>Copyright &copy; 2016 Parshwa Technology</strong> 
   </footer>

   <!-- Control Sidebar -->
   <aside class="control-sidebar control-sidebar-dark">
   <!-- Create the tabs -->
   <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
   <li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab">           <i class="fa fa-home"></i></a></li>
  <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa   fa-gears"></i></a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
  <!-- Home tab content -->
  <div class="tab-pane active" id="control-sidebar-home-tab">
    <h3 class="control-sidebar-heading">Recent Activity</h3>
    <ul class="control-sidebar-menu">
      <li>
        <a href="javascript::;">
          <i class="menu-icon fa fa-birthday-cake bg-red"></i>

          <div class="menu-info">
            <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>

            <p>Will be 23 on April 24th</p>
          </div>
        </a>
      </li>
    </ul>
    <!-- /.control-sidebar-menu -->

    <h3 class="control-sidebar-heading">Tasks Progress</h3>
    <ul class="control-sidebar-menu">
      <li>
        <a href="javascript::;">
          <h4 class="control-sidebar-subheading">
            Custom Template Design
            <span class="label label-danger pull-right">70%</span>
          </h4>

          <div class="progress progress-xxs">
            <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
          </div>
        </a>
      </li>
    </ul>
    <!-- /.control-sidebar-menu -->

  </div>
  <!-- /.tab-pane -->
  <!-- Stats tab content -->
  <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
  <!-- /.tab-pane -->
  <!-- Settings tab content -->
  <div class="tab-pane" id="control-sidebar-settings-tab">
    <form method="post">
      <h3 class="control-sidebar-heading">General Settings</h3>

      <div class="form-group">
        <label class="control-sidebar-subheading">
          Report panel usage
          <input type="checkbox" class="pull-right" checked>
        </label>

        <p>
          Some information about this general settings option
        </p>
      </div>
      <!-- /.form-group -->
      </form>
     </div>
     <!-- /.tab-pane -->
    </div>
    </aside>
    <!-- /.control-sidebar -->
    <!-- Add the sidebar's background. This div must be placed
   immediately after the control sidebar -->
   <div class="control-sidebar-bg"></div>
   </div>
   <!-- ./wrapper -->

     <!-- REQUIRED JS SCRIPTS -->

   <!-- jQuery 2.2.0 --> 
     <script src="../plugins/jQuery/jQuery-2.2.0.min.js"></script>
    <!-- Bootstrap 3.3.6 -->
   <script src="../bootstrap/js/bootstrap.min.js"></script>
   <!-- AdminLTE App -->
   <script src="../dist/js/app.min.js"></script>

    <!-- Optionally, you can add Slimscroll and FastClick plugins.
       Both of these plugins are recommended to enhance the
   user experience. Slimscroll is required when using the
    fixed layout. -->
   </body>
   </html>
   <?php
   if(isset($_POST["block_user"]))
    {



  $mTable = "blocked_user_master";
  $mFields = "User_Email,Block_Reason,Block_Period";
  $mValues = "'".$_POST['user_email']. "','" . $_POST['block_reason'] . "','" . $_POST['block_period'] . "'";
  $mOperation = "Insert";

 $r = $mcon->DBOperation($mTable,$mFields,$mValues,$mOperation);

$mTable1 = "user_master";
$mFields1 = "User_Email,Blocked";
$mValues1 = "'" . $_POST['user_email'] ."',1";

 $mOperation1 = "Update";

 $r1 = $mcon->DBOperation($mTable1,$mFields1,$mValues1,$mOperation1);

// echo $r.$r1; 
if($r1 && $r == 1)
{

echo "<div class='alert alert-success alert-dismissible col-xs-5'>
            <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
            <h4><i class='icon fa fa-check'></i> Alert!</h4>
            Success... 
         </div> ";
  }


}

?>

1 个答案:

答案 0 :(得分:2)

你可以用花哨的javascript来做到这一点,它会将带有输出信息的div框移动到你喜欢的任何地方。

但那只是肮脏的黑客,而不是正确的编码方式。

正确的方法是划分操作和显示(至少MVC更好)。 这样你可以设置一些变量,表明名称是变化,并根据该变量从模板生成一个页面(即如果有变量,则在页面顶部设置成功msg)。

请不要制作自己的模板引擎。使用一些现有的(Savant很容易学习)。

修改 好的,我不会给你现成的代码,相反我会告诉你如何以快速但又脏的方式去做:

1)创建一个div,您希望在其中显示您的消息,将其放在您想要的位置并给它一些id(页面范围内唯一)即:

<div id="resultMsg"></div>

2)稍后在您的PHP代码中:而不是使用消息打印div,打印一些javascript,它将填充您的resultMsg容器中的消息:

echo '<script type="text/javascript">document.getElementById("resultMsg").innerHTML = "put your generated message here";</script>';

快速解决但不习惯。而是学习如何以正确的方式做到这一点。您可以从https://github.com/phplucidframe/phplucidframe/wiki/Integration-of-Savant,-The-Simple-Template-System开始,也可以使用其他模板系统。它将为您节省许多比以后更大的问题:)