Level 53
Is this the correct aporoach?
Yes, it's totally valid approach.
Laravel Livewire framework uses the same approach: https://laravel-livewire.com
1 like
Mar 27, 2020
3
Level 1
Bootstrap Modal Open With Record Details
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-->
Level 1
Level 1
Hi! I finally got my code fixed and it's working, i'm sharing the solution:
Button Code (it's important to remove data-target property)
<button type="button"
class="btn btn-label-primary btn-lg btn-upper openBtn"
data-toggle="modal"
data-id = {!! $match->prop_id !!}>
{{ __('pages/processes/offerdemand.labels.matchs.index.button.viewproperty') }}
</button>
JS Code
$(document).ready(function () {
$('.openBtn').on('click', function () {
var prop_id = $(this).data('id');
console.log(prop_id);
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: 'GET',
url: '/property/details/' + prop_id,
dataType: 'HTML',
success: function (data) {
},
}).then(data => {
$('.modal-content').html(data);
$('#kt_modal_4_2').modal("show");
})
.catch(error => {
var xhr = $.ajax();
console.log(xhr);
console.log(error);
})
});
});
Controller Code
class PropertyController extends Controller
{
public function details($id)
{
$property = Property::with('attributes', 'addons', 'distributions', 'images', 'attributes_2', 'services')
->where('prop_id', $id)
->first();
// dd($property);
return view('pages.processes.offerdemand.matchs.propertymodal', compact('property'));
}
}
The view returned from Controller has it's first element <div class="modal-content"> which has modal HTML code.
Please or to participate in this conversation.