Membuat tombol edit pada form yang diselenggarakan pada adminlte

Ini pertanyaan sangat bagus 👍

Dan jawabannya jelas & teknis, bukan karena “kodenya salah”, tapi karena LINGKUNGAN TEMPLATE-NYA BERBEDA.

Saya jelaskan penyebab PASTI kenapa:

> ✅ Di Spruha berhasil

❌ Di AdminLTE tidak jalan

---

🔥 PENYEBAB UTAMA (99% KASUS)

1️⃣ AdminLTE sudah memakai plugin yang MEMBLOKIR readonly

AdminLTE bukan sekadar Bootstrap, dia membawa:

AdminLTE JS

Plugin tambahan (icheck, overlayScrollbars, bs-custom-file-input, dll)

Kadang script auto-init form

Akibatnya:

readonly Anda ditimpa ulang

JS Anda jalan, tapi langsung dioverride

📌 Spruha tidak melakukan ini, makanya aman.

---

2️⃣ Di AdminLTE field-nya bukan input biasa

Banyak komponen AdminLTE pakai:

.custom-control

.form-control-sm

select2

input-group

data-widget

Contoh yang bikin gagal:

<input class="form-control" disabled>

❌ disabled tidak bisa diaktifkan via readonly

👉 Di Spruha: readonly

👉 Di AdminLTE: disabled

---

3️⃣ AdminLTE MEMUAT jQuery LEBIH DARI SATU KALI

Ini penyebab klasik AdminLTE.

Biasanya urutan ini SALAH:

<script src="jquery.min.js"></script>

<script src="adminlte.min.js"></script>

<script src="jquery.min.js"></script> ❌

Akibatnya:

Event click tidak nempel

Script Anda tidak pernah dieksekusi

👉 Spruha lebih rapi dalam urutan JS

---

4️⃣ Script Anda dieksekusi SEBELUM DOM SIAP

AdminLTE sering meletakkan JS di:

header

partial footer

Kalau kode Anda di atas:

$('#btnEdit').click(...)

❌ Tombolnya belum ada → tidak ter-bind

Spruha biasanya sudah pakai $(document).ready() dengan benar.

---

5️⃣ AdminLTE pakai event delegation

Beberapa halaman AdminLTE load via AJAX / PJAX / tabs

Kalau begitu:

$('#btnEdit').click(...)

❌ Tidak jalan

Harus:

$(document).on('click', '#btnEdit', function () {

---

✅ KODE YANG DIJAMIN JALAN DI ADMINLTE

Pakai VERSI AMAN ADMINLTE ini:

$(document).on('click', '#btnEdit', function () {

  const form = $('#formProfil');

  const btnSimpan = $('#btnSimpan');

  const editing = $(this).data('editing') || false;

  if (!editing) {

    form.find('input:not([type=hidden]), textarea')

        .prop('readonly', false)

        .prop('disabled', false)

        .removeClass('form-readonly');

    btnSimpan.prop('disabled', false);

    $(this)

      .data('editing', true)

      .removeClass('btn-outline-primary')

      .addClass('btn-outline-danger')

      .text('Batal');

  } else {

    form.find('input, textarea')

        .prop('readonly', true)

        .addClass('form-readonly');

    btnSimpan.prop('disabled', true);

    $(this)

      .data('editing', false)

      .removeClass('btn-outline-danger')

      .addClass('btn-outline-primary')

      .text('Edit');

  }

});

---

🧪 CARA MEMBUKTIKAN SENDIRI (DEBUG 30 DETIK)

Buka Console (F12) di AdminLTE:

1️⃣ Cek jQuery ganda

console.log($().jquery);

Kalau muncul lebih dari sekali, itu masalah.

---

2️⃣ Cek event jalan atau tidak

$('#btnEdit').length

0 → elemen tidak ada saat script jalan

---

3️⃣ Cek attribute

Klik Edit lalu:

$('input').attr('readonly')

$('input').prop('disabled')

---

🧠 KESIMPULAN RINGKAS

Faktor Spruha AdminLTE

Override JS ❌ ✅

Disabled field ❌ ✅

jQuery ganda ❌ ⚠️ sering

AJAX / dynamic DOM ❌ ✅

Safe selector optional WAJIB

---

🚀 REKOMENDASI FINAL

✔ Gunakan .prop() bukan .attr()

✔ Gunakan event delegation

✔ Jangan pakai disabled kecuali perlu

✔ Pastikan jQuery hanya 1x load

---

Kalau mau, kirim:

potongan HTML form AdminLTE

atau screenshot struktur <script>

Saya bisa debug tepat di titik error-nya tanpa tebakan.