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

5 Kontribusi 5 Poin


Jawaban Terpilih

Data sudah muncul di modal, ternyata code ane yang salah.
Awalnya script ini ane taruh di contact-us.blade, diantara @[email protected], tapi di main.blade ane lupa pasang @stack.
<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>


Akhirnya script ane pindah ke main.blade dengan sedikit perubahan dari saran agan diatas.
Dari
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);
        })

Ke
var contactURL = $(this).attr('data-url');    
$.get(contactURL, function(data){
                $('#id').val(data.id);
                $('#name').val(data.name);
                $('#email').val(data.email);
                $('#message').val(data.message);
            })








avatar taraniskai13

@taraniskai13

5 Kontribusi 5 Poin

Jawaban

Coba baris iniΒ 
var contactURL = $(this).data('url');
diganti menjadi:
var contactURL = $(this).attr('data-url');

Kemudian pastikan request ajaxnya sudah berhasil, kamu bisa cek di browser, inspect element -> 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 :

$.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);
});


Semoga berhasil.

avatar ahanafi

@ahanafi

803 Kontribusi 534 Poin

  • Ok, ternyata kosong semua gan. Tes ajax nya kosong, console.log nya juga kosong. - @taraniskai13
  • berarti masalahnya ada disitu.. - @ahanafi


Data sudah muncul di modal, ternyata code ane yang salah.
Awalnya script ini ane taruh di contact-us.blade, diantara @[email protected], tapi di main.blade ane lupa pasang @stack.
<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>


Akhirnya script ane pindah ke main.blade dengan sedikit perubahan dari saran agan diatas.
Dari
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);
        })

Ke
var contactURL = $(this).attr('data-url');    
$.get(contactURL, function(data){
                $('#id').val(data.id);
                $('#name').val(data.name);
                $('#email').val(data.email);
                $('#message').val(data.message);
            })








avatar taraniskai13

@taraniskai13

5 Kontribusi 5 Poin


Login untuk gabung berdiskusi