显示/隐藏DIV与创建,编辑,删除


Show/hide DIV with create, edit, delete

我在一个类中定义了三个按钮(创建、编辑、删除)和三个独立的函数。

当我点击创建时,应该调用创建函数,编辑和删除也是如此。

一切都工作得很好,到这里,但当我点击提交在任何选项(创建/编辑/删除),页面被重定向显示第一个div "cs_content"所有的时间。

我的要求是:直到数据被存储到数据库成功提交,然后只有页面应该重定向到"cs_content"否则在任何错误的情况下,页面应该是

 $ (document).ready(function () 
    {
      //$("#cs_content").show();
      $('#cs').click(function () 
      {
            $('#cs_content').fadeIn('slow');
            $('#rp_content').hide();
      });
      $('#ed').click(function () 
      {
            $('#ed_content').fadeIn('slow');
            $('#cs_content').hide();
      });
      $('#del').click(function () 
      {
            $('#del_content').fadeIn('slow');
            $('#ed_content').hide();
      });
    });

            <div class="container2">        
              <div id="cs" style="float:left;margin:0px 0px;padding:7px;"><input type="button" value="Create"></div>
              <div id="ed" style="float:left;margin:0px 0px;padding:7px;"><input type="button" value="Edit"></div>
              <div id="del" style="float:left;margin:0px 0px;padding:7px;"><input type="button" value="Delete"></div>
               <div id="cs_content"><?php $ds->create_ds($db_host,$db_username,$db_password); ?> </div>        
               <div id="ed_content" style="display:none;"> <?php $ds->update_ds($db_host,$db_username,$db_password); ?>  </div>
               <div id="del_content" style="display:none;"> <?php $ds->delete_ds($db_host,$db_username,$db_password); ?>  </div>
            </div>

更新代码:

class Datasource 
 {
       private $db;
       public function __construct($database){
          $this->db = $database;
       }
       //CREATE DATASOURCE
       public function create_ds($db_host,$db_username,$db_password)
       {
           if (isset($_POST['create_dsource']))
           {      
              $dsource_host = htmlentities($_POST['dsource_host']); 
              $dsource_username = htmlentities($_POST['dsource_username']); 
              $dsource_password = $_POST['dsource_password']; 
              $dsource_name = htmlentities($_POST['dsource_name']); 
              if (empty($_POST['dsource_host']) || empty($_POST['dsource_username']) || empty($_POST['dsource_name']))
              {
                 $errors[] = '<span class="error">All fields are required.</span>';
              }
              else
              {
                 if (isset($_POST['dsource_host']) && empty($_POST['dsource_host'])) { $errors[] = '<span class="error">Datasource Host is required</span>'; }
                 else if ($_POST['dsource_host'] !== $db_host)
                 {  $errors[] = '<span class="error">dsource Host is not matching with the application data source host </span>';  }

                 if(isset($_POST['dsource_username']) && empty($_POST['dsource_username'])) { $errors[] = '<span class="error">Datasource username is required</span>';  }
                 else if ($_POST['dsource_username'] !== $db_username)
                 {  $errors[] = '<span class="error">Datasource Username is not matching with the application datasource username </span>';  }

                 if ($_POST['dsource_password'] !== $db_password)
                 {  $errors[] = '<span class="error">Datasource Password is not matching with the application datasource password </span>';  }

                 if (isset($_POST['dsource_name']) && empty($_POST['dsource_name'])) { $errors[] = '<span class="error">Datasource name is required</span>'; }
                 else if (!ctype_alnum($_POST['dsource_name']))
                 {  $errors[] = '<span class="error">Please enter a datasource name with only alphabets and numbers</span>';  }
              }     
              if (empty($errors) === true)
              {                    
                 try 
                 {   
                    $this->db->exec("CREATE DATABASE IF NOT EXISTS ".$dsource_name."");
                    $this->db->query("USE ".$dsource_name."");
                    $sql_filename = "includes/datasource.sql";
                    $sql_contents = file_get_contents($sql_filename);
                    $sql_contents = explode("@@", $sql_contents);           
                    foreach($sql_contents as $query)
                    {
                       $result = $this->db->prepare($query);
                       $result->execute();        
                    }
                 }  
                 catch (PDOException $e) {
                     die("DB ERROR: ". $e->getMessage());
                 }                  
                 header('Location:home.php?success');
                 exit();
              }
           }    
           if (isset($_GET['success']) && empty($_GET['success'])) 
           { 
              header('Refresh:0; url=home.php');
              echo '<span class="error">Datasource is succesfully created</span>';  
           }
           ?>
           <form action="" method="POST" accept-charset="UTF-8" id="create_ds" name="create_ds">
             <table class="create_dsource">
               <tr><td><label>Datasource Host</label><span style="color:#A60000">*</span></td>
                   <td><input type="text" name="dsource_host" required placeholder="localhost/server" value="<?php if(isset($_POST["dsource_host"])) echo $dsource_host; ?>" size="30">            
               </td></tr>
               <tr><td><label>Datasource Username</label><span style="color:#A60000">*</span></td>
                   <td><input type="text" name="dsource_username" required placeholder="Datasource username" size="30" value="<?php if(isset($_POST["dsource_username"])) echo $dsource_username; ?>">                                 
               </td></tr>
               <tr><td><label>Datasource Password</label></td>
                   <td><input type="password" name="dsource_password" placeholder="Datasource password" size="30" value="<?php if(isset($_POST["dsource_password"])) echo $dsource_password; ?>" autocomplete="off">                                    
               </td></tr>
               <tr><td><label>Datasource Name</label><span style="color:#A60000">*</span></td>
                   <td><input type="text" name="dsource_name" size="30" required placeholder="Datasource name" value="<?php if(isset($_POST["dsource_name"])) echo $dsource_name; ?>">                                  
               </td></tr>
               <tr><td><input type="submit" value="create datasource" style="background:#8AC007;color:#080808;padding:6px;" name="create_dsource"></td></tr> 
             </table>
           </form>
           <?php             
             //IF THERE ARE ERRORS, THEY WOULD BE DISPLAY HERE
             if (empty($errors) === false) 
             echo '<div>' . implode('</p><p>', $errors) . '</div>';             
       }
} //class closes here
$ds = new Datasource($db);

更新例子。

你犯了大错,这不是你想做的事的正确方法。

你应该使用ajax。

阅读这里jQuery。AJAX指南。

我给你做了一个例子,如何做到这一点非常基本,但会做的工作:

HTML PAGE:

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript">
   $ (document).ready(function () 
    {
      //$("#cs_content").show();
      $('#cs').click(function () 
      {
         createDs();
      });
      $('#ed').click(function () 
      {
          updateDs();
      });
      $('#del').click(function () 
      {
          deleteDs();
      });
    });

function createDs(){
     $.ajax({  
      url: "check.php?proc=create",
      type: "POST",  
      dataType:'json',
      success: function(data)
      {  
             $('#returnMessage').show();
             $('#returnMessage').html(data.mes);
      }

   });  
return false;
}
function updateDs(){
    
     $.ajax({  
      url: "check.php?proc=update",
      type: "POST",  
      dataType:'json',
      success: function(data)
      {  
          $('#returnMessage').show();
          $('#returnMessage').html(data.mes);
      }

   });  
return false;
}
function deleteDs(){

     $.ajax({  
      url: "check.php?proc=delete",
      type: "POST",  
      dataType:'json',
      success: function(data)
      {  
       $('#returnMessage').show();
        $('#returnMessage').html(data.mes);
      }
   });  
return false;
}
  </script>
<div class="container2">        
      <div style="float:left;margin:0px 0px;padding:7px;"><input type="submit" value="Create" id="cs"></div>
      <div  style="float:left;margin:0px 0px;padding:7px;"><input type="submit" value="Edit" id="ed"></div>
      <div  style="float:left;margin:0px 0px;padding:7px;"><input type="submit" value="Delete" id="del"></div>
       <div  style="float:left;margin:0px 0px;padding:7px;"><input type="submit" value="Clear DIV" id="clear"></div>
       <div id="returnMessage" style="display:none;"></div>        
           <div id="returnMessage" style="display:none;"></div>        
        </div>

check.php:(不要忘记在这里包含$ds-)

 <?php
    //include here $ds- so it could work and won't give you a error.
    if(isset($_GET['proc']) && !empty($_GET['proc'])){
                   $proc =  $_GET['proc'];
                  
                  if($proc == 'create'){
              $ds->create_ds($db_host,$db_username,$db_password);
                   $return = array('mes' => 'Created' );
              header('content-type: application/json; charset=utf-8');
              echo json_encode($return);
            }elseif($proc == 'update'){
              $ds->update_ds($db_host,$db_username,$db_password);
               $return = array('mes' => 'Updated' );
              header('content-type: application/json; charset=utf-8');
              echo json_encode($return);
            }elseif($proc == 'delete'){
              $ds->delete_ds($db_host,$db_username,$db_password);
              $return = array('mes' => 'Deleted' );
              header('content-type: application/json; charset=utf-8');
              echo json_encode($return);
            }
    }else{
             $return = array('mes' => 'The $_GET is empty , check if all parms and ajax function passing to the true file, good luck :).' );
              header('content-type: application/json; charset=utf-8');
              echo json_encode($return);
    }
?>

你必须包含文件到check.php或者使用$ds-,它必须是基本的,你应该看看ajax是如何工作的。

编辑:

这里的工作示例:点击我进入演示,这里你可以下载示例:点击我下载示例

工作完美,不要忘记从check.php中取消注释,这样它就会做你需要的东西。

如果你仍然不能让它工作(即使你有工作演示),去学习php和Javascript,这是我能帮助你的。

还可以在google上搜索firebug,这将帮助您看到ajax/post请求的错误,并且无论如何都会对您有所帮助。

当绑定到事件(如click)时,需要ajax来动态运行一些php代码。试着读取。ajax()

PHP代码在创建DOM之前执行。所以你的jquery不会再次运行这个函数它只是显示php函数已经发送的内容。您需要Ajax来运行php函数并显示它发回的数据。