1. 首頁
  2. 問答
  3. 上傳文件和通過Ajax和Bootstarp模式更新數據時出錯

上傳文件和通過Ajax和Bootstarp模式更新數據時出錯

2016-11-21 51 views
0

我是Ajax和Bootstrap模型的新手。我按照這個教程Webslesson Tutorial。但是，我在上傳文件和更新數據時遇到了一些問題。請給點意見。 錯誤：上傳文件和通過Ajax和Bootstarp模式更新數據時出錯

  1. 同時插入數據，未定義指數：圖像

  2. 不要檢索表格上的數據，而編輯按鈕，點擊

newsandnotice.php

<?php 
if (isset($_GET['delmessage'])) { 
    echo '<script type="text/javascript" language="javascript"> 
    alert("' . $_GET['delmessage'] . '"); 
    </script>'; 
} else if (isset($_GET['editmessage'])) { 
    echo '<script type="text/javascript" language="javascript"> 
    alert("' . $_GET['editmessage'] . '"); 
    </script>'; 
} 
//load the classes 
require_once("../classes/connection.class.php"); 
require_once("../classes/notice.class.php"); 
$objNotice = new Notice(); 
$objNotice->getNotice(); 
?> 
<ol class="breadcrumb"> 
          <li class="breadcrumb-item"><a href="#">Home</a></li> 
          <li class="breadcrumb-item active"> 
            <?php 
            if(isset($_GET['action'])) 
            {  
             if($_GET['action'] == "newsAndNotice"){ 
              echo "News And Notice"; 
              } 
            } 
            ?> 
          </li> 
</ol> 

<p> 

</p> 
<h2>Recent Notice and News View</h2> 

<div class="table-responsive"> 
        <div align="left"> 

          <button type="button" name="add" id="add" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning"> 
          <span class="glyphicon glyphicon-plus">Add</span> 
          </button> 
        </div> 
       <br /> 
    <div id="notice_table"> 
     <table class="table"> 
      <tr> 
       <th>S.N</th> 
       <th>Notice Topic</th> 
       <th>Notice Description</th> 
       <th>Notice Date</th> 
       <th>Picture</th> 
       <th>Action</th> 
      </tr> 
      <?php 
       $t=1; 
         if (sizeof($objNotice->data) > 0) { 
          foreach ($objNotice->data as $key => $value) { 
           ?> 
      <tr> 
       <td><?php echo $t++;?></td> 
       <td><?php echo $value['noticeTitle'];?></td> 
       <td width="400"><?php echo substr($value['noticeDesc'],0,500)?>....</td> 
       <td><?php echo $value['noticeDate'];?></td> 
       <td> 
        <?php if($value['noticePicture']!="-" || $value['noticePicture']==""){?> <img src="image/notice/<?php echo $value['noticePicture'];?>" width="50px" height="50px"/> 
        <?php }else{ echo"No image Availbale";}?> 
       </td> 
       <td> 
        <a href="#" name="edit" value="Edit" id="<?php echo $value["noticeId"]; ?>" class="edit_data"> 
         <span class="fa fa-edit"></span> 
        </a> || 
        <a href="#" name="view" value="view" id="<?php echo $value["noticeId"]; ?>" class="view_data" > 
         <span class="fa fa-eye"></span> 
        </a> 
       </td> 
      </tr> 
       <?php 
       } 
       } 
       ?> 
     </table> 
    </div> 
</div> 

<div id="dataModal" class="modal fade"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
        <h4 class="modal-title">News And Notice Details</h4> 
       </div> 
       <div class="modal-body" id="noticeAndNews_detail"> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
      </div> 
     </div> 
</div> 

<div id="add_data_Modal" class="modal fade"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
        <h4 class="modal-title">Add & Update News And Notice</h4> 
       </div> 
       <div class="modal-body"> 
        <form method="post" id="insert_form" enctype="multipart/form-data"> 
          <label>News Title: </label> 
          <input type="text" name="title" id="title" class="form-control" /> 
           <br /> 
          <label>News Description: </label> 
          <textarea name="description" id="description" class="form-control" required=""></textarea> 
           <br /> 
           <br /> 
          <label>Date: </label> 
          <input type="date" name="date" id="date" class="form-control" required=""/> 
           <br /> 
          <label>Picture: </label> 
          <input type="file" name="image" id="image" accept="image/*" class="form-control" /> 
           <br /> 
          <input type="hidden" name="noticeId" id="noticeId" /> 
          <input type="submit" name="insert" id="insert" value="Insert" class="btn btn-success" /> 
        </form> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
      </div> 
     </div> 
</div> 
<script> 
$(document).ready(function(){ 
     $('#add').click(function(){ 
      $('#insert').val("Insert"); 
      $('#insert_form')[0].reset(); 
     }); 
     $(document).on('click', '.edit_data', function(){ 
      var noticeId = $(this).attr("id"); 
      $.ajax({ 
       url:"views/fetch/fetchNewsAndNotice.php", 
       method:"POST", 
       data:{noticeId:noticeId}, 
       dataType:"json", 
       success:function(data){ 
        $('#title').val(data.noticeTitle); 
        $('#description').val(data.noticeDesc); 
        $('#date').val(data.noticeDate); 
        $('#image').val(data.noticePicture); 
        $('#noticeId').val(data.noticeId); 
        $('#insert').val("Update"); 
        $('#add_data_Modal').modal('show'); 
       } 
      }); 
     }); 
     $('#insert_form').on("submit", function(event){ 
      event.preventDefault(); 
      if($('#title').val() == "") 
      { 
       alert("title is required"); 
      } 
      else if($('#description').val() == '') 
      { 
       alert("description is required"); 
      } 
      else if($('#date').val() == '') 
      { 
       alert("date is required"); 
      }  
      else 
      { 
       $.ajax({ 
        url:"../processes/addnotice.php", 
        method:"POST", 
        data:$('#insert_form').serialize(), 
        beforeSend:function(){ 
          $('#insert').val("Inserting"); 
        }, 
        success:function(data){ 
          $('#insert_form')[0].reset(); 
          $('#add_data_Modal').modal('hide'); 
          $('#notice_table').html(data); 
        } 
       }); 
      } 
     }); 
     $(document).on('click', '.view_data', function(){ 
      var noticeId = $(this).attr("id"); 
      if(noticeId != '') 
      { 
       $.ajax({ 
        url:"views/select/selectNoticeAndNews.php", 
        method:"POST", 
        data:{noticeId:noticeId}, 
        success:function(data){ 
          $('#noticeAndNews_detail').html(data); 
          $('#dataModal').modal('show'); 
        } 
       }); 
      }    
     }); 
}); 
</script>

fetchNewsAndNotice.php

<?php 
require_once("../../../classes/connection.class.php"); 
require_once("../../../classes/notice.class.php"); 

if(isset($_POST["noticeId"])) 
{ 
    $objNotice = new Notice(); 
    $objNotice->setNoticeId($_POST["noticeId"]); 
    $objNotice->getNotice(); 

    echo json_encode($objNotice->data);  
} 
?>

addNotice.php

<?php 
//load the classes 
ob_start(); 
require_once("../classes/connection.class.php"); 
require_once("../classes/notice.class.php"); 
$objNotice = new Notice(); 

if(!empty($_POST)) { 
$output = ''; 
$message = ''; 
$noticeTitle=$_POST['title']; 
$noticeDate=$_POST['date']; 
$noticeDesc= mysqli_real_escape_string(Connection::$conxn,$_POST['description']); 
$objNotice->setNoticeTitle($noticeTitle); 
$objNotice->setNoticeDate($noticeDate); 
$objNotice->setNoticeDesc($noticeDesc); 

//change part start 
if($_POST["noticeId"] != '') 
    { 
     $noticeId = $_POST['noticeId']; 
     $objNotice->setNoticeId($noticeId); 
      if($_FILES['image']['size'] > 0){ 
       $objNotice->setPicture($image); 
       $flag = $objNotice->editUploadOnServer('image', '../adminview/image/notice/'); 
      }else 
      { 
       $objNotice->setPicture($image); 
       $flag = $objNotice->updateNotice(); 
      } 
      $message = 'Data Updated'; 
    } 
else{ 

        if($_FILES['image']['size'] > 0) 
        { 
         $flag = $objNotice->uploadOnServer('image', '../adminview/image/notice/'); 
        } 
       else 
       { 
        $image = "-"; 
        $objNotice->setPicture($image); 
        $flag = $objNotice->addNotice(); 
       } 
       $message = 'Data Inserted'; 
} 
//change part end 
if($flag){ 
    $output .= '<label class="text-success">' . $message . '</label>'; 
    $output .= ' 
    <table class="table table-bordered"> 
      <tr> 
       <th>S.N</th> 
       <th>Notice Topic</th> 
       <th>Notice Description</th> 
       <th>Notice Date</th> 
       <th>Picture</th> 
       <th>Action</th> 
      </tr>>'; 

       $t=1; 
       $objNoticeGet = new Notice(); 
       $objNoticeGet->getNotice(); 

      if (sizeof($objNoticeGet->data) > 0) 
       { 
        foreach ($objNoticeGet->data as $key => $value) 
         { 

     $output .= ' 
      <tr> 
       <td>'.$t++.'</td> 
       <td>'.$value['noticeTitle'].'</td> 
       <td width="400">'.substr($value['noticeDesc'],0,500).'....</td> 
       <td>'.$value['noticeDate'].'</td> 
       <td><img src="image/notice/'.$value['noticePicture'].'" width="50px" height="50px"/></td> 
       <td> 
        <a href="#" name="edit" value="Edit" id="'.$value["noticeId"] .'" class="edit_data"> 
         <span class="fa fa-edit"></span> 
        </a> || 
        <a href="#" name="view" value="view" id="' . $value["noticeId"] . '" class="view_data" > 
         <span class="fa fa-eye"></span> 
        </a> 
       </td> 
      </tr>'; 
         } 
       } 
     $output.='</table>'; 

    } 
    echo $output; 
} 
ob_end_flush(); 
?>

來源

2016-11-21 Ncit Cosmos

回答

0

要開始，我會嘗試找出什麼樣的錯誤你得到。嘗試添加一個錯誤處理您的Ajax調用：

$.ajax({ 
    ... 
    error: function (xhr, textStatus, errorThrown) { 
    alert('ERROR: status='+xhr.status+", textStatus="+textStatus+", errorThrown="+errorThrown); 
    }, 
});

您還可以使用控制檯日誌看到您發送的信息，在AJAX調用之前：

console.log("Sending "+$('#insert_form').serialize());

來源

2016-11-21 17:23:56 dhc

相關問題

 相關問題