Building a responsive image gallery modal using AJAX in Laravel platform

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">&times;</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

Answer №1

One possible reason for the issue is that the bootstrap dependency was not added.

To resolve this, include the following line within the head tag:

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Additionally, it appears that a close tag </div> is missing for the modal class within a div.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can you target a specific data-target button while working with multiple Bootstrap collapse elements?

One challenge I'm facing is with the Bootstrap collapse elements on my website. I have several of them, each controlled by a read-more button that includes an icon to indicate the state of the collapse element. However, when I add a class to the butto ...

blurred image effect on bootstrap card hover

My attempt to create a blurred image effect on a bootstrap card hover is not working as expected. The blur effect works fine without the hover. Here is the code I have been using: .card-img { transition: all 1s ease; -webkit-filter: blur(0px); ...

Troubleshooting: Font-Face Won't Load on Any Browser

I'm completely new to using @font-face and I'm encountering some issues. Despite going through numerous posts and tutorials, I can't seem to get my fonts to load properly. I've tried activating and deactivating the font on the server, b ...

What are the problems with Internet Explorer in Selenium WebDriver?

Currently dealing with a mouse-over issue in IE while using webdriver code. The functionality works smoothly in Chrome and Firefox, however, the problem arises only in IE. How can I resolve this? Initially focusing on an element and then clicking on a li ...

Refresh your webpage automatically without the need to manually refresh after clicking a button using AJAX in HTML and PHP!

One issue I'm facing is that the page doesn't auto-refresh, although it loads when I manually refresh it. Below you can find my HTML and AJAX code along with its database details. The Trigger Button <?php $data = mysqli_ ...

When referencing an object in AngularJS that is defined within the $scope, it is important to

Imagine having a NameController implemented in AngularJS. You can define variables like so: this.name = 'Joe'; Alternatively, you could use: $scope.name = 'Joe'; I have a preference for accessing all variables using object notation: ...

Having trouble getting the jQuery on() method to work with the click event?

My jQuery code snippet is as follows: $(document).ready(function(){ $("div#overlay div#getFBid div#overlayClose").on("click", function(){ console.log("test") }); }); Additionally, here is the HTML code that is loaded using AJAX: <div ...

What is the best way to add additional buttons to my React App after the initial button has been clicked?

Currently, I am in the process of developing a CSV file loader that converts data into JSON format. The loader will consist of three buttons: 1. The first button allows me to select a file from my computer and load the CSV data for conversion to JSON. 2. ...

Troubleshooting: jQuery AJAX .done() function failing to execute

Currently, I have a piece of code that is being utilized to dynamically load HTML into a CodeIgniter view: $.ajax({ type:"POST", url: "Ajax/getHtml", data: { u : conten ...

Customizing MaterialUI styles in React: A step-by-step guide

When utilizing Material UI with React, I am facing difficulty styling the Outline Select component according to my preferences. How can I override the default styles effectively? Even after using withStyles, I am unable to achieve the desired appearance a ...

Is there a way to execute a function immediately after an element has completed rendering?

I am facing a challenge where I need to dynamically set the height of one element based on the height of another element. Initially, when the target element finishes rendering, it's 490px tall. However, when I try to retrieve the height of the other ...

Creating a randomly generated array within a Reactjs application

Every time a user clicks a button in reactjs, I want to create a random array of a specific size. The code for generating the array looks like this: const generateArray = (arraySize: number): number[] => { return [...Array(arraySize)].map(() => ~~( ...

Is it possible to set up a universal type definition in TypeScript version 2 and above?

I have a collection of straightforward .ts files, not part of any projects but standalone .ts scripts. They implement certain node.js features. Both TypeScript and node type definitions are set up through the following commands: npm install -g typescript ...

Creating a unique directive specifically designed to be used within an ng

I have a unique custom directive that I implemented in AngularJS. The directive is called within an ng-repeat loop, as shown below: The array of objects, selectedMealCalc.calculated_foods, is aliased as 'items' <!-- CUSTOM DIRECTIVE --&g ...

What is the best way to store the status of a Collapsible Panel in a session variable?

Although I have experience as an OOP programmer, I am relatively new to working with LAMP and Laravel. One issue I am facing is with a page that contains collapsible panels. Users may have a specific configuration of panels opened and collapsed, but when ...

"Enhancing security measures with multiple nonce for Content Security Policy

I am encountering an issue with my single page application, which is developed in .net core MVC 2.2. The application loads html sections on the fly. In the main document, I have added a Content Security Policy (CSP) policy with a dynamically generated hea ...

What are the steps to customize the index.html file within the build directory prior to serving it for each request using an Nginx server?

I need to make changes to the React index.html file on the server prior to delivering it to the browser upon request. My goal is to dynamically include open graph meta tags in the head based on the requested URL. Is there a way to accomplish this using N ...

Using Vue.js to bind labels and radio buttons in a form

My goal is to generate a dynamic list of form polls based on the data. However, using :for or v-bind:for does not result in any HTML markup appearing in the browser, causing the labels to not select the corresponding input when clicked. I have prepared a J ...

Enhance progress display for lengthy ajax operation

These are the current elements of my project: a Node.js function that conducts a lengthy (2-10 seconds) calculation (involving db + external API calls). I use async.auto() to manage the dependencies of my calls a visually appealing progress bar on the HT ...

Drag and Drop File Upload plugin

I need a comprehensive example with code for the Really simple jQuery Ajax File Upload plugin. Unfortunately, the download links don't provide the complete code and example. Can someone please direct me to where I can find this information? ...