2 months ago

Bootstrap Modal Open With Record Details

Posted 2 months ago by belipero

Hi! I have a view which has records for a model. Each reacord is reprsented in boxes and I have a button in each fo them for showing record details in a Boostrap Model.

I'm working with AJAX approach that I have read in some othe questions raised, I'm fetching the click event in JS code and I try to inject the view returned from Controller to the table view.

I'm trying to return the view from Controller for replacing the modal one and I can't make it work, modal is not opening.

Is this the correct aporoach? It's recommended to use View Composer?

Can anyone share his code for a similar exprience?


Controller code:

class PropertyController extends Controller
    public function details($id)
        $property = Property::where('prop_id', $id)->first();
        return view('pages.processes.offerdemand.matchs.propertymodal', compact('property'));

Button code:

<div class="kt-widget__footer">
	<button type="button"
			class="btn btn-label-primary btn-lg btn-upper openBtn"

AJAX code:


            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

            type: 'GET',
            url: '/property/details/KWS1389776',
            dataType: 'JSON',

            success: function (data) {
                // $('.modal-body').text(data.prop_title);
                // $('#kt_modal_4_2').modal("show");


        var xhr = $.ajax();


Modal Code

<div class="modal fade replace" id="kt_modal_4_2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Custom</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <div class="modal-body">
                    <div class="form-group">
                        <label for="recipient-name" class="form-control-label">Recipient:</label>
                        <input type="text" class="form-control" id="recipient-name">
                    <div class="form-group">
                        <label for="message-text" class="form-control-label">Message:</label>
                        <textarea class="form-control" id="message-text"></textarea>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Send message</button>

Please sign in or create an account to participate in this conversation.