如何使用AJAX在Bootstrap Modal Body中加载MS-SQL数据?

I'm working on a php CRUD application. I'm done coding for the Add part of it and it's working properly. Now I'm stuck at getting the data from sql database into the edit modal to update it further

This particular page loads titles based on the selection of type we make from a dropdown. So it displays all the titles that belong to the same type(typeId). On clicking the particular title it displays the respective data. Then it has a edit button which is associated to a modal.

The modal is being displayed on pressing the edit button, but there's no data being fetched in it.

Here's what I've tried:

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">
\
                    <div class="panel-heading"><h4 class="panel-title">
\
                        <a data-toggle="collapse" data- 
     parent="#titleAccordion" href="#collapseF' + i + '">' + data[i] 
        ["title"]  + ' ' + data[i]["units"] + ' (' + data[i]["category"] + 
      ') 
     </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>' + data[i] 
   ["title"] + '</td></tr>
\
                                <tr><td>Units:</td><td>' + data[i] 
   ["units"] + '</td></tr>
\
                                <tr><td>Category:</td><td>' + data[i] 
   ["category"] + '</td></tr>
\
                                </td><td></td></tr>
\
                                <tbody></table>
\
                            </div>
\
                            <button type="button" class="btn btn-warning 
       btn-sm" data-toggle="modal" data-target="#facultyEditModal" 
      onclick="editTitleModal(\'' + data[i]["titleId"] + '\')">Edit 
       Title</button>
\
                        </div>
\
                    </div>
\
                </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;

}
  ?>

The above code isn't fetching the data in the modal. However I could see the data of the first title for every title I select in the console.

I'm expecting the respective data to be fetched on selecting the edit button to be made changes further.

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问