上传文件并通过Ajax和Bootstarp Modal更新数据时出错

时间:2016-11-21 16:33:45

标签: php jquery ajax twitter-bootstrap bootstrap-modal

我是Ajax和Bootstrap模型的新手。我按照本教程Webslesson Tutorial进行操作。但是,我在上传文件和更新数据时遇到了一些问题。请提出一些想法。 错误:

  1. 插入数据时,未定义索引:图像

  2. 在编辑按钮单击

  3. 时,不要检索表单上的数据

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

1 个答案:

答案 0 :(得分:0)

首先,我想弄清楚你会得到什么错误。尝试在ajax调用中添加错误处理程序:

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

您还可以使用控制台日志查看您在ajax呼叫之前发送的内容:

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