How can I fix the issue of the modal content briefly appearing when I load my page? I am trying to create an image gallery where a modal opens when an image is clicked. Here is the code in my view.blade.php:
<script>
$(".li-img").click(function () {
$.ajax({
method: 'GET',
url: './comment?media_id=' + this.id,
success: function (data) {
/*$("#comments").html(data);**/
$("#getCodeModal").modal("toggle");
$("#getCode").html(data);
}
});
});
</script>
<body>
@foreach($array as $img)
<div class=" portfolio-container text-center">
<ul class="portfolio-list" style="margin:0 auto">
<li id = "{{$img['id']}}" class="li li-img" style="margin:0
auto">
<img id="{{$img['id']}}" src="{{$img['image']}}">
</li>
</ul>
</div>
@endforeach
<div class="modal fade" id="getCodeModal" tabindex="-1" role="dialog"
aria-
labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel"> API CODE </h4>
</div>
<div class="modal-body" id="getCode" style="overflow-x: scroll;">
//ajax success content here.
</div>
</div>
</div>
I also want to send JSON information from the Controller to the modal. Here is the code in my Controller:
public function comment(Request $request)
{
$media_id = $request->get('media_id');
if ($request->session()->has("access_token")) {
$access_token = $request->session()->get("access_token");
$client = new Client();
$res = $client->request('GET', 'https://api.instagram.com/v1/media/'
. $media_id . '/comments?access_token=' . $access_token);
/*echo /*$res->getBody();*/
} else {
echo "there is no access token in session";
}
}
I want to display the content of $res->getBody() in the modal in the view.blade.php file