Cara Memanggil Struktur HTML Dengan Ajax Javascript Part1

Haloo teman-teman Dumet School. Kembali lagi dengan saya di Kursus Web Design. Nah kali ini saya akan membahas tentang Cara Memanggil Struktur HTML Dengan Ajax Javascript Part1. Dimana pada kasus ini saya akan membuat sebuah modal dimana form inputnya terpisah dengan file modalnya.

Cara Memanggil Struktur HTML Dengan Ajax Javascript Part1 langkah pertama kita buat terlebih dahulu struktur htmlnya seperti pada script berikut ini.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>MODALS</title>
	<link rel="stylesheet" href="assets/bootstrap.min.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
  <style>
  	body, .navbar-brand, h1, h2, h3, h4, h5, .btn, .nav-link {
  		font-family: 'Sawarabi Gothic', sans-serif !important;
  	}

  	.btn {font-weight: normal}
  	.hide {display: none}
  	.nav-link {font-size: 16px !important}
  	.navbar-brand {text-transform: none;}
  </style>
</head>
<body>
  <div class="container">
    <div class="row">
      <a href="app/form.php" class="float-right btn btn-info btn-post btn-sm my-5">Create Post</a>
    </div>
  </div>

  <div class="modal fade" id="news-modal">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Add News</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <div class="alert alert-success" id="alert-input" style="padding: 5px; display: none;"></div>
      <div class="modal-body">
        <!-- MODAL BODY -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal" id="btn-close">Close</button>
        <button type="button" class="btn btn-primary btn-sm" id="btn-save">Save changes</button>
      </div>
    </div>
  </div>
</div>
<script src="assets/jquery.min.js"></script>
<script src="assets/bootstrap.min.js"></script>
</body>
</html>

Jika teman-teman buka di browser masing-masing maka tampilannya akan seperti pada gambar di bawah ini. Yang terlihat hanyalah tombol create.

Nah kemudian jika sudah maka kita buat script untuk memunculkan modal terlebih dahulu dan menutupnya. Dan berikut adalah scriptnya.

// MODALS
    let modals = document.getElementById("news-modal");
    let create = document.querySelector(".btn-post");
    let modalbody = document.querySelector(".modal-body");
    let close = document.querySelector("#btn-close");
    let closeicon = document.querySelector(".close");
    // open
    create.onclick = function(e) {
      e.preventDefault();
      modals.classList.remove("fade");
      modals.style.display = "block";
      modals.style.background = "rgba(0,0,0,0.5)";
      let link = create.href;
      app.modal(link, modalbody);
    }
    // close
    close.onclick = function(){
      modals.style.display = "none";
      modalbody.innerHTML = '';
    }
    closeicon.onclick = function(){
      modals.style.display = "none";
      modalbody.innerHTML = '';
    }

Nah jika sudah maka tampilannya akan seperti pada gambar di bawah ini. Dimana ketika saya klik tombol create maka modal akan muncul dan modal yang tampil masih kosong dan tidak ada form input. Dibagian part 2 saya akan membahas tentang cara menggabungkan struktur html modal dengan form inputnya menggunakan ajax javascript.

Demikian artikel tentang Cara Memanggil Struktur HTML Dengan Ajax Javascript Part1. Pembahasan akan saya lanjutkan di bagian kedua. Selamat mencoba dan semoga bermanfaat.

Cara Memanggil Struktur HTML Dengan Ajax Javascript Part1

Kategori