如何使用AJAX在Bootstrap模式主体中加载MS-SQL数据?

时间:2019-05-22 15:48:44

标签: php ajax bootstrap-modal crud edit

我正在研究php CRUD应用程序。我已经为其中的Add部分编写了代码,并且可以正常工作。现在,我被困在将sql数据库中的数据放入编辑模式以进一步更新

此特定页面会根据我们从下拉菜单中选择的类型来加载标题。因此,它将显示属于同一type(typeId)的所有标题。单击特定标题后,将显示相应的数据。然后,它具有一个与模式关联的编辑按钮。

按下编辑按钮时将显示模态,但是其中没有任何数据。

这是我尝试过的:

admin.php
<?php
$titleId = filter_input(INPUT_GET, "titleId");
$active = "admin" . $titleId;
require_once './pages/header.php';
require_once './functions/queries.php';
$getAll = Queries::getAllTitle($typeId);
?>




 <div class="container">
     <div class="panel-group" id="titleAccordion">
        <?php      
          for ($i = 0; $i < count($getAll); $i++) {         
              echo <<<HTML
            <div class="panel panel-default">
                <div class="panel-heading"><h4 class="panel-title">
                    <a data-toggle="collapse" data- 
 parent="#titleAccordion" href="#collapseF{$i}">{$getAll[$i]['title']}</a> 
</h4>
                </div>
                    <div id="collapseF{$i}" class="panel-collapse 
 collapse">
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table class="table table-condensed"><tbody>
                            <tr><td>Title:</td><td>{$getAll[$i]['title']} 
 </td></tr>
                            <tr><td>Units:</td><td>{$getAll[$i]['units']} 
  </td></tr>
                            <tr><td>Category:</td><td>{$getAll[$i] 
       ['category']}</td></tr>  
                            <tbody></table>      
                        </div>

                       <button type="button" class="btn btn-warning btn- 
      sm" data-toggle="modal" data-target="#titleEditModal" 
     onclick="editTitleModal('{$getAll[$i]['titleId']}')"><span 
     class="glyphicon glyphicon-edit" aria-hidden="true"></span> Edit 
      Title</button>

  </div>
             </div>  
            </div>
 HTML;
   }
   ?>

        

       <!--    Title Add Modal-->
           <div class="modal fade" id="facultyAddModal" role="dialog">
            <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 Title</h4>
            </div>
            <div class="modal-body">
             <div id="adminResult" class="hide" role="alert">
              <button type="button" class="close" data-dismiss="alert" 
      aria- 
            label="Close"><span aria-hidden="true">&times;</span></button>
             <div id="resultAdminContent"></div>
            </div>  
           <form class="cmxform" id="adminForm">
               <label for="Activity">ActivityAttended (required)</label>
                   <input class="form-control" id="adminTitle" 
      name="title" 
                     type="text" required>
                <br>
                     <label for="units">Units (required)</label>
                     <input class="form-control" id="adminUnits" type="number" 
               name="units" required>
            <br>
            <label for="Category">Category (Optional)</label>
            <input class="form-control" id="adminCategory" type="text" 
            name="category">
        <br>
            <?php echo 
             '<input type="hidden" id="addadminTypeId" 
            value="'.$typeId.'">';
            ?>
           <button class="btn btn-info btn-primary" 
               type="submit">Submit</button>
           <br>
           <br>
          </form>
          </div>
            </div>
          </div>
        </div>
 main.js
     function editTitleModalSubmit(titleId, title, units, category, 
         typeid) {   
      $.ajax({
            url: 'functions/administration-functions.php',
        type: 'POST',
       data: {"title": $('#editadminTitle').val(), "units": 
     $('#editadminUnits').val(), "category": 
     $('#editadminCategory').val(), "titleId":titleId, "typeId": 
     $('#editTypeId').val(), "switch":"edit"},
         dataType: "json",
       success: function (data) {
       $('#editadminTitle').val(data["title"]);
      $('#editadminUnits').val(data["units"]);
      $('#editadminCategory').val(data["category"]);
     $('#editTitleId').val(data["titleId"]);
      $('#editTypeId').val(data["typeId"]);
      }, error: function (error) {
       console.log(error);
      }
     });
  }


   function titles() {
     $.ajax({
        url: 'functions/administration-functions.php',
        type: 'POST',
        data: {"switch": "getAll"},
        dataType: "json",
        success: function (data) {
         $('#titleAccordion').empty();           
          $.each(data, function (i) {                
            $('#titleAccordion').append('\
                <div class="panel panel-default">\n\
                    <div class="panel-heading"><h4 class="panel-title">\n\
                        <a data-toggle="collapse" data- 
     parent="#titleAccordion" href="#collapseF' + i + '">' + data[i] 
        ["title"]  + ' ' + data[i]["units"] + ' (' + data[i]["category"] + 
      ') 
     </a></h4>\n\
                    </div>\n\
                    <div id="collapseF' + i + '" class="panel-collapse 
       collapse">\n\
                        <div class="panel-body">\n\
                            <div class="table-responsive">\n\
                                <table class="table table-condensed"> 
        <tbody>\n\
                                <tr><td>Title:</td><td>' + data[i] 
   ["title"] + '</td></tr>\n\
                                <tr><td>Units:</td><td>' + data[i] 
   ["units"] + '</td></tr>\n\
                                <tr><td>Category:</td><td>' + data[i] 
   ["category"] + '</td></tr>\n\
                                </td><td></td></tr>\n\
                                <tbody></table>\n\
                            </div>\n\
                            <button type="button" class="btn btn-warning 
       btn-sm" data-toggle="modal" data-target="#facultyEditModal" 
      onclick="editTitleModal(\'' + data[i]["titleId"] + '\')">Edit 
       Title</button>\n\
                        </div>\n\
                    </div>\n\
                </div>');
             });
            $('#titleAccordion').change();
        }, error: function (error) {
            console.log("Socrates Error - faculty.js 105: " + error);
          }
     });
 }



administration-functons


<?php

require_once './queries.php';

$title = filter_input(INPUT_POST, "title");
$units = filter_input(INPUT_POST, "units");
$category = filter_input(INPUT_POST, "category");
$typeId = filter_input(INPUT_POST, "typeId");
$titleId = filter_input(INPUT_POST, "titleId");
 $switch = filter_input(INPUT_POST, "switch");
   switch ($switch) {      
   case 'add';     
       echo Queries::addTitle($title, $units, $category, $typeId);  
       break;
   case 'get';
       echo Queries::getdata($titleId);
      break;
  case 'getAll';
      echo Queries::getAllTitle($typeId);
     break;
  case 'edit':
      echo Queries::editTitle($title, $units, $category, $typeId, 
   $titleId);      
   break;

}
  ?>

上面的代码未在模式中获取数据。但是,我可以看到在控制台中选择的每个标题的第一个标题的数据。

我希望通过选择“编辑”按钮可以进一步获取相应的数据。

0 个答案:

没有答案