Laravel - Data tidak muncul di Modal

Jadi ceritanya mau menampilkan data di modal setelah klik tombol show, tapi data tidak muncul cuma modal dialog.

Di dd() datanya muncul.

Route::get('/dashboard/contacts/{id}', [DashboardContactUsController::class, 'show'])->name('contacts.show')->middleware('auth');
public function show($id)
    {
        $contact = ContactUs::find($id);
        return response()->json($contact);
    }
<a href="javascript:void(0)" id="viewMessage" data-url="{{ route('contacts.show', $contact->id) }}" data-bs-toggle="modal" data-bs-target="#viewModal" class="btn btn-info">Show</a>
<div class="modal fade" data-bs-backdrop="static" id="viewModal" tabindex="-1" aria-labelledby="viewModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewModalLabel">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <input type="text" id="id" name="id">
                <label for="name" id="name"></label>
                <label for="email" id="email"></label>
                <label for="message" id="message"></label>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function(){
    $('body').on('click', '#viewMessage', function(){
        var contactURL = $(this).data('url');
        $.get(contactURL, function(data){
            $('#viewModal').modal('show');
            $('#id').text(data.id);
            $('#name').text(data.name);
            $('#email').text(data.email);
            $('#message').text(data.message);
        })
    });
});
</script>
avatar taraniskai13
@taraniskai13

16 Kontribusi 15 Poin

Diperbarui 1 tahun yang lalu

Tanggapan

isi console.log(data) sudah benar? seperti apa isinya?

Ternyata kosong datanya.

2 Jawaban:

<div>Coba baris ini&nbsp;</div><pre><em>var</em> contactURL = $(<em>this</em>).data('url');</pre><div>diganti menjadi:</div><pre><em>var</em> contactURL = $(<em>this</em>).attr('data-url');</pre><div><br>Kemudian pastikan request ajaxnya sudah berhasil, kamu bisa cek di browser, inspect element -&gt; kemudian cek di tab network. Disana akan terlihat apakah ajax requestnya sudah berhasil atau belum. Alternatif lainnya, kamu bisa ikuti langkah dari mas @hilman, cek dulu value dari 'data' -nya dengan memanggil fungsi console seperti ini :<br><br></div><pre>$.get(contactURL, function(data){ console.log(data); $('#viewModal').modal('show'); $('#id').text(data.id); $('#name').text(data.name); $('#email').text(data.email); $('#message').text(data.message); });</pre><div><br><br>Semoga berhasil.</div><div><br><br></div>

avatar ahanafi
@ahanafi

815 Kontribusi 552 Poin

Dipost 1 tahun yang lalu

Tanggapan

Ok, ternyata kosong semua gan. Tes ajax nya kosong, console.log nya juga kosong.

berarti masalahnya ada disitu..

Jawaban Terpilih

<div>Data sudah muncul di modal, ternyata code ane yang salah.<br>Awalnya script ini ane taruh di contact-us.blade, diantara @push-@endpush, tapi di main.blade ane lupa pasang @stack.</div><pre>&lt;script <em>type</em>="text/javascript"&gt; $(document).ready(<em>function</em>(){ $('body').on('click', '#viewMessage', <em>function</em>(){ <em>var</em> contactURL = $(<em>this</em>).data('url'); $.get(contactURL, <em>function</em>(<em>data</em>){ $('#viewModal').modal('show'); $('#id').text(data.id); $('#name').text(data.name); $('#email').text(data.email); $('#message').text(data.message); }) }); }); &lt;/script&gt;</pre><div><br><br>Akhirnya script ane pindah ke main.blade dengan sedikit perubahan dari saran agan diatas.<br>Dari</div><pre><em>var</em> contactURL = $(<em>this</em>).data('url'); $.get(contactURL, <em>function</em>(<em>data</em>){ $('#viewModal').modal('show'); $('#id').text(data.id); $('#name').text(data.name); $('#email').text(data.email); $('#message').text(data.message); })</pre><div><br>Ke</div><pre><em>var</em> contactURL = $(<em>this</em>).attr('data-url');
$.get(contactURL, <em>function</em>(<em>data</em>){ $('#id').val(data.id); $('#name').val(data.name); $('#email').val(data.email); $('#message').val(data.message); })</pre><div><br><br><br><br><br><br><br><br></div>

avatar taraniskai13
@taraniskai13

16 Kontribusi 15 Poin

Dipost 1 tahun yang lalu

Login untuk ikut Jawaban