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

时间:2014-06-09 10:36:58

标签: php jquery crud

我有三个按钮(创建,编辑,删除),在一个类中定义了三个独立的功能。

当我点击创建时,应该调用create function并同样进行编辑和删除。

一切都工作得很好 - 但是当我点击任何选项中的提交(创建/编辑/删除)时,页面会通过显示第一个div" cs_content"来重定向。一直以来。

我的要求是:在通过提交将数据成功存储到数据库之前,只有页面应该重定向到" cs_content"如果有任何错误,页面应该是 在选定的div。

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

3 个答案:

答案 0 :(得分:0)

绑定到click等事件时,需要ajax动态运行一些php代码。尝试阅读.ajax()

答案 1 :(得分:0)

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

答案 2 :(得分:0)

更新示例。

你做错了,这不是你想要的正确方法。

你应该使用ajax。

请阅读jQuery.AJAX guide

我告诉你如何做非常基本但是会做的工作:

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是如何工作的。

修改

这里的工作示例:    Click on me to go to demo,您可以在此处下载示例:Click on me to download the example

完美的工作,不要忘记从check.php取消注释//这样你就能找到所需的东西。

如果你仍然无法使它工作(即使你有工作演示),去学习php和Javascript,这一切都可以帮助你。

还研究了关于firebug的谷歌,这将帮助您从ajax / post请求中看到错误,无论如何都会帮助您。