загрузочный модал не показывал - PullRequest
Новая
       11

загрузочный модал не показывал

0 голосов
/ 28 августа 2018

Я создал код ajax для отображения деталей, используя загрузочную модальную версию 3.3.7 (относится к <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">), и она отлично работает.

, но когда я хочу реализовать это с помощью начальной загрузки 4, у меня возникает проблема, при которой при нажатии кнопки «процесс» ответ отсутствует, и модальное окно не появляется. 

<div class="container">
    <h2> Proses Penerimaan Siswa Baru </h2>
    <table id="tablee" class="display nowrap" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th> ID PSB </th>
                <th> Nama </th>
                <th> Sekolah Asal </th>
                <th> Kelas </th>
                <th> Tahun Pelajaran </th>
                <th> Action </th>
            </tr>
        </thead>
        <tbody>
            <?php
                $sql="SELECT * FROM psbsmp";
                $resultset=mysqli_query($connection,$sql) or die(mysqli_error());
                while ($rows=mysqli_fetch_array($resultset)){
                ?>
                <tr id="<?php echo $rows['id']; ?>">
                <td data-target="idpsb"><?php echo $rows["idpsb"]; ?></td>
                <td data-target="nama"><?php echo $rows["nama"]; ?></td>
                <td> <?php echo $rows["sekolahasal"]; ?></td>
                <td> <?php echo $rows["kelas"]; ?></td>
                <td> <?php echo $rows["tahunmasuk"]; ?></td>
                <td><a href="#" data-role="update" data-id="<?php echo $rows['id'] ;?>">Process</a></td>
                </tr>
                <?php
                }
                ?>
        </tbody>
    </table>

и это код для модальных: 

<div id="myModal" class="modal fade" 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">PROSES PENERIMAAN {Data Calon Siswa}</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                <div class="row">
                    <div class="col-6 col-sm-6 col-md-6">
                        <div class="form-group">
                            <label class="control-label">ID PSB</label>
                            <input class="form-control" type="text" id="idpsb" name="idpsb" disabled>

                        </div> 
                    </div>  
                    <div class="col-6 col-sm-6 col-md-6">   
                        <div class="form-group">
                            <label class="control-label"> ID SISWA </label>
                            <input class="form-control" type="text" id="idsiswa" name="idsiswa" >
                        </div>
                    </div>  
                  </div>
                <div class="row">
                    <div class="col-8 col-sm-8 col-md-8">
                        <div class="form-group">
                            <label class="control-label">NAMA</label>
                            <input class="form-control" type="text" id="nama" name="nama" disabled>
                        </div>
                    </div>
                    <div class="col-4 col-sm-4 col-md-4 ">
                        <div class="form-group">
                            <label class="control-label">NISN</label>
                            <input class="form-control" type="text" id="nisn" name="nisn">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <label class="control-label">BEASISWA</label>
                            <input class="form-control" type="text" id="beasiswa" name="beasiswa">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <label class="control-label">PENERIMAAN</label>
                            <select class="form-control" name="keterangan" id="keterangan">
                            <option value="0"> Please Select </option>
                            <option value="lulus"> Lulus</option>
                            <option value="lulus bersyarat"> Lulus Bersyarat</option>
                            <option value="tidak lulus"> Tidak Lulus</option>
                            </select>
                        </div>
                        <input type="hidden" id="userId" class="form-control">
                    </div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
                <a href="#" id="save" class="btn btn-primary pull-right">Process</a>
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
            </div>

        </div>

    </div>

Код Ajax 

 $(document).ready(function(){
    //  append values in input fields
      $(document).on('click','a[data-role=update]',function(){
            var id  = $(this).data('id');
            var idpsb  = $('#'+id).children('td[data-target=idpsb]').text();
            var nama  = $('#'+id).children('td[data-target=nama]').text();

            $('#idpsb').val(idpsb);
            $('#nama').val(nama);

            $('#userId').val(id);
            $('#myModal').modal('toggle');
      });

      // now create event to get data from fields and update in database 

       $('#save').click(function(){
          var id  = $('#userId').val(); 
         var idpsb =  $('#idpsb').val();
          var nama =  $('#nama').val();


          $.ajax({
              url      : 'connection.php',
              method   : 'post', 
              data     : {idpsb : idpsb , nama : nama , id : id},
              success  : function(response){
                            // now update user record in table 
                             $('#'+id).children('td[data-target=idpsb]').text(idpsb);
                             $('#'+id).children('td[data-target=nama]').text(nama);

                             $('#myModal').modal('toggle'); 

                         }
          });
       });
  });

это относится к функции кнопки, которую я использую, это <a></a> элемент?

Ответы [ 2 ]

0 голосов
/ 28 августа 2018 
use css to display modal in your javascript


          $.ajax({
              url      : 'connection.php',
              method   : 'post', 
              data     : {idpsb : idpsb , nama : nama , id : id},
              success  : function(response){
                            // now update user record in table 
                             $('#'+id).children('td[data-target=idpsb]').text(idpsb);
                             $('#'+id).children('td[data-target=nama]').text(nama);

                             $('#myModal').css('display','block');

                         }
          });
0 голосов
/ 28 августа 2018

Вот простой пример работы модального режима, проверьте ссылки загрузчика 4 в вашем приложении и html-контент для модального 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
...