Display JSON information within a Bootstrap modal

Hi there! I'm just starting to learn about ajax, json, and modals. I have some data displayed in the console that I want to show in a modal pop-up. Specifically, when I click on the view request button for each employee, I should see their individual details from the console.

All the JavaScript functions are correctly fetching and displaying the necessary data. Here's an overview of the script:


    <script>
    $(function(){
        var BASE_URL = "http://localhost/employeemgt/index.php/";

        $('#pedingLeaveRequest').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            var current_leave_id = button.data('id');
            var modal = $(this);

            modal.find('input[name="current_leave_id"]').val(current_leave_id); 
        });     

        //approve button
        $('#approvebtn').click(function(){              
            var id = $('input[name="current_leave_id"]').val();
            $.post(BASE_URL +  'admin/AdminDashboardController/approveLeave', 

                {'id': id}, 
                function(result){
                    console.log(result);
                if(result.error){                       
                    alert('try again');
                }else{
                    alert('Leave has been approved!');
                }
            });              
        });

       //disapprove button
        $('#declinebtn').click(function(){              
            var id = $('input[name="current_leave_id"]').val();
            $.post(BASE_URL +  'admin/AdminDashboardController/disapproveLeave', 

                {'id': id}, 
                function(result){
                    console.log(result);
                if(result.error){                       
                    alert('try again');
                }else{
                    alert('Leave has been disapproved!');
                }
            });              
        });
    });

$("#showleave").on('click','button',function(event){
var BASE_URL = "http://localhost/employeemgt/index.php/";
    var leave_id = $(this).val();
    var response;
    $.ajax({
        type: 'POST',
        dataType: "JSON",
        data:{leave_id:leave_id},
        url: BASE_URL + 'admin/AdminDashboardController/viewRequest',   

    success:function(data){                 
        console.log(data);
        $('#pendingLeaveRequest #leave_details').html(data);       
        $('#pendingLeaveRequest').modal('show');
   },
   error:function(error){
        alert(error);
    }});
});

</script>

<view>

<div id="showleave">
<h4 class="mb-4">Pending Requests</h4>;
<?php
foreach ($leave as $row) {  
if($row->status != "1")
{                          
echo '
<ul class="list-unstyled">
<li class="media border-bottom border-top py-3">
<img class="mr-3" src="http://via.placeholder.com/64x64" alt="Generic placeholder image"></div>
<p>;

</p>

<controller>

public function viewRequest()
{
$leave_id = $this->input->post('leave_id');     
$data = $this->Admin_Model->viewRequest($leave_id);
echo json_encode($data);
}

Answer №1

Incorporate the following code into your ViewRequest function and delete my previous code snippets.

  $("#showleave").on('click','button',function(event){
    var BASE_URL = "http://localhost/employeemgt/index.php/";
        var leave_id = $(this).val();
        var response;
        $.ajax({
            type: 'POST',
            dataType: "JSON",
            data:{leave_id:leave_id},
            url: BASE_URL + 'admin/AdminDashboardController/viewRequest',   

        success:function(data){                 
            console.log(data);
            $('#pendingLeaveRequest #leave_details').html(data);       
            $('#pendingLeaveRequest').modal('show');
       },
       error:function(error){
            alert(error);
        }});
    });

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

Preventing Flash of Unstyled Content in ElectronJS Browser Windows

Upon creating a new BrowserWindow and utilizing loadURL to incorporate an html file within the renderer, there is a brief instance where unstyled content is displayed for approximately half a second before the css is loaded. window.loadURL('file://&a ...

The appearance of SVG markers varies depending on the screen they are viewed on

Latest Update: I have finally figured out the screen issue. The device pixel ratio is to blame. Icons appear smaller on devices with lower window.devicePixelRatio. One solution I found is to adjust the icon size based on window.devicePixelRatio, like this ...

"Error handling in React AJAX post requests is not triggering the success or error methods as expected

Within my React Component, there is an AJAX POST request that successfully creates a new entry in the database (status 201 returned). However, I am facing an issue where the success and error methods are not being triggered. $.ajax({ url: &apo ...

What is the best way to connect my products on an ecommerce site with hundreds of images?

Despite thoroughly searching the internet, I have been unable to find a solution to my dilemma. I am creating a platform that showcases a lengthy list of products on the website. Additionally, I have a database of pictures stored locally that need to be ...

What is the method for retrieving the status of an xmlHttpRequest?

I'm curious about how to verify the status of an xmlHttp request once it has been sent. Can someone explain the process to me? Thank you. function sendRequest(){ //retrieve access token var accessToken = 'xxx'; //get user_id ...

There seems to be an issue with the border displaying correctly within the div element

I am currently working on developing a tag input system, but I am encountering some CSS issues. What I am aiming for is to have a green border that surrounds and contains the 2 divs inside it, however, this is not happening as expected. You can see the fi ...

Understanding how to open a PNG file in the client-side browser and transform it using PNGJS in React

Utilizing React JS for my application development is a current focus of mine. I have a solid understanding of how to import images within the client/browser folder structure. For example: import maze_text from '../../mazes/images/maze_text.png&apos ...

Could you please explain the specific distinctions between pipe and map within Angular 7?

After extensive research, I'm still struggling to understand the distinction between pipe and map in Angular 7. Should we always include a pipe in Service.ts file in Angular 7? Appreciate any clarification on this matter. ...

"Double the Data: A D3.js JSON Tale of Two Creators

I found inspiration from this example: http://bl.ocks.org/mbostock/1062288 to create a collapsible Force Layout. One challenge I'm facing is how to display a graph where a single node is connected to two parent nodes. father father | | ...

implementation of an Ajax countdown timer on an ASP.NET webpage

My website has a timeout of 5 minutes. I want to display the countdown in minutes and seconds, like this: 4 minutes and 10 seconds remaining I attempted to use the code below to accomplish this: <asp:Timer ID="Timer1" runat="server" ...

`The steps to retrieve XML response data from an API request`

When using axios to make an API request, how can I receive data in XML format? For example: axios.get(/* URL */).then(response => {/* How do I retrieve the XML data? */}).catch(err => {/* result */}); ...

Creating a Modal Popup with Bootstrap 5 in Asp.net using C#

Despite trying everything, I was unable to achieve success. <script type="text/javascript"> function openModal() { var myModal = new bootstrap.Modal(document.getElementById('KullaniciAramaSonuc'), {}); myModal.show(); ...

Transitioning code from gatsby to nextjs has caused an issue with the aws-sdk integration

I have successfully integrated the aws-sdk with Gatsby by using a .env file to upload a file to an S3 bucket. Now, I am in the process of migrating this functionality to Next.js, but I'm encountering an error in Next.js. Uncaught (in promise) Credent ...

Give drawn elements a touch of fuzziness and experiment with the color of the fragment shader

I am currently experimenting with creating an animated gradient effect by blending three separate blobs together in a melting-like fashion, with each blob moving independently. The desired result can be seen in the image provided below. So far, I have bee ...

Convert JSON date formats into ZonedDateTime objects using the objectMapper library

Context The JSON data below is received from Kafka: { "markdownPercentage": 20, "currency": "SEK", "startDate": "2019-07-25" } I have the following POJO generated from JSON schema (I am unable to modify the shared POJO) public cl ...

What is the best way to convert JSON into an Angular 7 object?

My challenge involves consuming a web API that provides the following data: { "FileStatuses": { "FileStatus": [ { "accessTime": 0, "blockSize": 0, "childrenNum": 13, "fileId": 16396, ...

Using Vue's v-bind directive with a single set of curly braces expression

Currently, I am delving into the world of Vue.js to broaden my knowledge and gain practical experience. While following a tutorial, I encountered an interesting scenario involving the addition of a class to a span element based on a condition within a v-f ...

What is the best way to store settings values permanently during the installation process in a react-native application?

I am looking for a way to save the settings of my app only during installation, rather than every time the app is opened, in order to prevent the options from resetting. I have tried searching on YouTube but most tutorials cover only user login persistence ...

Loading images in advance using JavaScript

I have been searching through multiple forums and cannot seem to figure out the issue. The problem I am encountering is related to a website where there are three images with a hover effect. When the page first loads, there is a delay in loading the backgr ...

How can I create a consistent copy button function for an HTML table that works the same across different browsers like Firefox and Chrome?

I am encountering an issue where copying the second row of an HTML table to paste it in an Excel file works perfectly in Firefox, but not in Chrome. When pasting in Chrome, the cells do not match and only the HTML inside the table cells is retained. I am u ...