belipero
2 months ago
488
3
General

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?

Regards

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"
			data-toggle="modal"
			data-target="#kt_modal_4_2">
			Open
	</button>
</div>

AJAX code:

$('.openBtn').on('click',function(){
         $('.replace').empty();

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

        $.ajax({
            type: 'GET',
            url: '/property/details/KWS1389776',
            dataType: 'JSON',

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


            },
        })

        var xhr = $.ajax();
        console.log(xhr);

});

Modal Code

<!--begin::Modal-->
<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">
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="recipient-name" class="form-control-label">Recipient:</label>
                        <input type="text" class="form-control" id="recipient-name">
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="form-control-label">Message:</label>
                        <textarea class="form-control" id="message-text"></textarea>
                    </div>
                </form>
            </div>
            <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>
            </div>
        </div>
    </div>
</div>
<!--end::Modal-->

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