Jquery - Modal Bootstrap Does Not Show

Kucen
November 7, 2023
59 views
1 vote
2 Answers

I have problem where the modal is not show when data is already save in the database. The data is save into database but the modal is not show when it was success. The data is from form pass into AJAX. If I did not input anything in form, the modalEmpty is show. The thing is it do not show the ModalSuccess.

This is new updated tambahnotisphp.php

NEW UPDATED tambahnotisphp.php

    <?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    /*include('connection.php');
    $conn=Connect();*/

    try {
        $conn = new PDO("mysql:host=localhost;dbname=mbjbnotis", "root", "");
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    } catch (PDOException $e) {
        echo "Connection failed: " . $e->getMessage();
        exit;
    }

    $idPengguna = "DI200017";

    $nomborFail = $_POST['nomborFail'];
    $ulasan = nl2br($_POST['ulasan']);
    $status1 = "BELUM SELESAI";

    $tarikhNotisKeluar = $_POST['tarikhNotisKeluar'];

    $futureDate30Days = date('Y-m-d', strtotime($tarikhNotisKeluar . ' +30 days'));
    $futureDate60Days = date('Y-m-d', strtotime($tarikhNotisKeluar . ' +60 days'));

    $query = "INSERT INTO notis(nomborFail, ulasan, tarikhNotisKeluar, tarikhNotis1, tarikhNotis2, status, idPengguna) 
              VALUES(:nomborFail, :ulasan, :tarikhNotisKeluar, :futureDate30Days, :futureDate60Days, :status1, :idPengguna)";

    $stmt = $conn->prepare($query);
    $stmt->bindParam(':nomborFail', $nomborFail);
    $stmt->bindParam(':ulasan', $ulasan);
    $stmt->bindParam(':tarikhNotisKeluar', $tarikhNotisKeluar);
    $stmt->bindParam(':futureDate30Days', $futureDate30Days);
    $stmt->bindParam(':futureDate60Days', $futureDate60Days);
    $stmt->bindParam(':status1', $status1);
    $stmt->bindParam(':idPengguna', $idPengguna);

    if ($stmt->execute()) {
        echo "success";
    } else {
        echo "error";
    }

    $conn = null; // Close the database connection
}
?>

Here i include all code from page tambahnotis.php

ALL CODE FROM tambahnotis.php

    <?php

session_start();

if(!isset($_SESSION['idPengguna']) && !isset($_SESSION['namaPengguna'])){
header("location: index.php"); 

}

?>
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>Sistem Notis MBJB</title>
    <!-- CSS files -->
    <link href="./dist/css/tabler.min.css?1684106062" rel="stylesheet"/>
    <link href="./dist/css/tabler-flags.min.css?1684106062" rel="stylesheet"/>
    <link href="./dist/css/tabler-payments.min.css?1684106062" rel="stylesheet"/>
    <link href="./dist/css/tabler-vendors.min.css?1684106062" rel="stylesheet"/>
    <link href="./dist/css/demo.min.css?1684106062" rel="stylesheet"/>
    <style>
      @import url('https://rsms.me/inter/inter.css');
      :root {
        --tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
      }
      body {
        font-feature-settings: "cv03", "cv04", "cv11";
      }
    </style>
      
    <!--<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>-->
    <script src="jquery3.7.1.js"></script>
    <!--<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>-->
  </head>
<script>
function checkUsername(nomborFail){

   //var usernameRegex = /^[a-zA-Z0-9]+$/;

   //if(usernameRegex.test(nomborFail)){
      document.getElementById('uname_response').innerHTML ="";

      if(nomborFail.length > 4){

         // AJAX request
         var xhttp = new XMLHttpRequest();
         xhttp.open("POST", "ajaxfile.php", true); 
         xhttp.setRequestHeader("Content-Type", "application/json");
         xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {

               // Response
               var response = this.responseText; 
               document.getElementById('uname_response').innerHTML = response;
            }
         };
         var data = {nomborFail: nomborFail};
         xhttp.send(JSON.stringify(data));
      }
   //}else{
      //document.getElementById('uname_response').innerHTML = "<span style='color: red;'>Sila isikan nombor fail.</span>";
   //}

}

</script>
  <body>
    <!--<script src="./dist/js/demo-theme.min.js?1684106062"></script>-->
    <div class="page">
      <!-- Navbar -->
      <header class="navbar navbar-expand-md d-print-none" >
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
            <a href="./aHome.php">
              <img src="./logo/logo.png" width="110" height="32" alt="MBJB" class="navbar-brand-image">
            </a>
          </h1>
          <div class="navbar-nav flex-row order-md-last">
            <div class="nav-item dropdown">
              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
                <span class="avatar avatar-sm">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M12 10m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855" /></svg>
                  </span>
                <div class="d-none d-xl-block ps-2">
                  <div><?php echo $_SESSION['namaPengguna']; ?></div>
                  <div class="mt-1 small text-muted"><?php echo $_SESSION['aksesPengguna']; ?></div>
                </div>
              </a>
              <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                <a href="./profil.php" class="dropdown-item">Profil</a>
                <div class="dropdown-divider"></div>
                <a href="./logout.php" class="dropdown-item">Log Keluar</a>
              </div>
            </div>
          </div>
        </div>
      </header>
      <header class="navbar-expand-md">
        <div class="collapse navbar-collapse" id="navbar-menu">
          <div class="navbar">
            <div class="container-xl">
              <ul class="navbar-nav">
                <li class="nav-item">
                  <a class="nav-link" href="./aHome.php" >
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
                    </span>
                    <span class="nav-link-title">
                      Laman Utama
                    </span>
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="./tambahnotis.php" >
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 11l3 3l8 -8" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
                    </span>
                    <span class="nav-link-title">
                      Tambah Notis
                    </span>
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="./semua.php" >
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 11l3 3l8 -8" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
                    </span>
                    <span class="nav-link-title">
                      Semua
                    </span>
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="./hampir.php" >
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 11l3 3l8 -8" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
                    </span>
                    <span class="nav-link-title">
                      Hampir
                    </span>
                  </a>
                </li>
                
                <li class="nav-item">
                  <a class="nav-link" href="./notis1.php" >
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 11l3 3l8 -8" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
                    </span>
                    <span class="nav-link-title">
                      Notis 1
                    </span>
                  </a>
                </li>
                
                <li class="nav-item">
                  <a class="nav-link" href="./notis2.php" >
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 11l3 3l8 -8" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
                    </span>
                    <span class="nav-link-title">
                      Notis 2
                    </span>
                  </a>
                </li>
                  
                <li class="nav-item">
                  <a class="nav-link" href="./notis3.php" >
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 11l3 3l8 -8" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
                    </span>
                    <span class="nav-link-title">
                      Notis 3
                    </span>
                  </a>
                </li>
                  
                <li class="nav-item">
                  <a class="nav-link" href="./notis4.php" >
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 11l3 3l8 -8" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
                    </span>
                    <span class="nav-link-title">
                      Notis 4
                    </span>
                  </a>
                </li>
                  
                <li class="nav-item">
                  <a class="nav-link" href="./notis5.php" >
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 11l3 3l8 -8" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
                    </span>
                    <span class="nav-link-title">
                      Notis 5
                    </span>
                  </a>
                </li>
                  
                <li class="nav-item">
                  <a class="nav-link" href="./selesai.php" >
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 11l3 3l8 -8" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
                    </span>
                    <span class="nav-link-title">
                        Selesai
                    </span>
                  </a>
                </li>
                
                
                <li class="nav-item">
                  <a class="nav-link" href="./pengguna.php" >
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M12 10m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855" /></svg>
                    </span>
                    <span class="nav-link-title">
                      Pengguna
                    </span>
                  </a>
                </li>
                
              </ul>
            </div>
          </div>
        </div>
      </header>
      <div class="page-wrapper">
        <!-- Page header -->
        <div class="page-header d-print-none">
          <div class="container-xl">
            <div class="row g-2 align-items-center">
              <div class="col">
                <h2 class="page-title">
                  Borang Tambah Notis
                </h2>
              </div>
            </div>
          </div>
        </div>
        <!-- Page body -->
        <div class="page-body">
          <div class="container-xl">
            <!-- Content here -->
            <div class="row row-cards">
                  <div class="col-md-3 col-xl-3">
                      
                  </div>
                  <div class="col-md-6 col-xl-6">
                      <div class="row row-cards">
                          <div class="col-12">
                            <form class="card">
                              <div class="card-body">
                                <div class="mb-3">
                                  <div class="form-label required">Nombor Fail</div>
                                  <input type="text" class="form-control" name="nomborFail" id="nomborFail" required="" onkeyup="checkUsername(this.value);">
                                  <div id="uname_response" ></div>
                                </div>
                                <div class="mb-3">
                                  <div class="form-label required">Ulasan</div>
                                  <textarea class="form-control" name="ulasan" id="ulasan" rows="4" cols="50" required=""></textarea>
                                </div>
                                <div class="mb-3">
                                  <div class="form-label required">Tarikh Notis Siasatan Dikeluarkan</div>
                                  <input type="date" class="form-control" name="tarikhNotisKeluar" id="tarikhNotisKeluar" required="">
                                </div>
                                
                                <div class="card-footer">
                                  <div class="row align-items-center">
                                    <div class="col"></div>
                                    <div class="col-auto">
                                      <button class="btn btn-primary" id="btnTambahNotis" type="submit" name="submit">Tambah Notis</button>
                                    </div>
                                  </div>
                                </div>
                              </div>
                          </form>
                          </div>
                      </div>
                  </div>
                  <div class="col-md-3 col-xl-3">
                      
                  </div>
              </div>
          </div>
        </div>
        <footer class="footer footer-transparent d-print-none">
          <div class="container-xl">
            <div class="row text-center align-items-center flex-row-reverse">
              <div class="col-lg-auto ms-lg-auto">
                
              </div>
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
                    Copyright &copy; 2023
                    <a href="https://www.mbjb.gov.my/" class="link-secondary">MBJB</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
                      v1.0.0-beta19
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </footer>
      </div>
    </div>

    <div class="modal modal-blur fade" id="modalSuccess" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <div class="modal-title">Berjaya</div>
            <div>Notis Siasatan berjaya ditambah</div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-success" data-bs-dismiss="modal">Okay</button>
          </div>
        </div>
      </div>
    </div>
      
    <div class="modal modal-blur fade" id="modalError" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <div class="modal-title">Tidak Berjaya</div>
            <div>Notis Siasatan tidak berjaya ditambah</div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-success" data-bs-dismiss="modal">Okay</button>
          </div>
        </div>
      </div>
    </div>
      
    <div class="modal modal-blur fade" id="modalEmpty" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <div class="modal-title">Kosong</div>
            <div>Isikan semua butiran</div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-success" data-bs-dismiss="modal">Okay</button>
          </div>
        </div>
      </div>
    </div>
      
    <div class="modal modal-blur fade" id="modalSimpanData" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <div class="modal-title">Simpan Data?</div>
            <div>Adakah anda ingin menyimpan data ini?</div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-link link-secondary me-auto" data-bs-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-green" id="simpanData">Simpan</button>
          </div>
        </div>
      </div>
    </div>
    
    <script>
        $(document).ready(function() {
            $("#btnTambahNotis").click(function() {
                var nomborFail = $("#nomborFail").val();
                var ulasan = $("#ulasan").val();
                var tarikhNotisKeluar = $("#tarikhNotisKeluar").val();
                // Check if the form fields are not empty
                if (nomborFail.trim() === "" || ulasan.trim() === "" || tarikhNotisKeluar.trim() === "") {
                    // Display an error message or alert
                    $('#modalEmpty').modal('show');
                    return;
                }
                // Make an AJAX request to your server to delete data from the database
                // Upon successful deletion, show a success modal
                // Otherwise, show an error modal
                $.ajax({
                    type: "POST",
                    url: "tambahnotisphp.php", // Replace with your server-side script URL
                    data: { nomborFail: nomborFail, ulasan: ulasan, tarikhNotisKeluar: tarikhNotisKeluar },
                    success: function(response) {
                        console.log("AJAX Request Successful");
                        console.log(response); // Add this line to log the response
                        if (response.trim() === "success") {
                            $('#modalSuccess').modal('show');
                        } else {
                            $('#modalError').modal('show');
                        }
                    },
                    error: function () {
                        console.log("AJAX Request Failed");
                    }
                });
            });
        });
    </script>

    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="./dist/js/tabler.min.js?1684106062" defer></script>
    <!--<script src="./dist/js/demo.min.js?1684106062" defer></script>-->
      
    
  </body>
</html>

Answers

- IsmaelMartinezCisternas
- November 6, 2023 at 3:02 pm
- 0 votes
0
Try sending a JSON formatted response from tamabahnotisphp.php.
I’m pretty sure that the request can’t process a plain-text response.

Login or Signup to reply.

- Vel
- November 7, 2023 at 9:09 am
- 0 votes
0
Change button type submit to button in modal button
```
<button class="btn btn-primary" id="btnTambahNotis" type="button" name="submit"> Tambah Notis </button>
```
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

Jquery – Modal Bootstrap Does Not Show

Answers