Utilizing AJAX to transfer information into a modal window in CodeIgniter

I find it a little embarrassing to admit, but a few months ago I had asked the same question. Unfortunately, I failed to implement it with codeigniter back then.

If you're curious, you can check out my old question.

My current challenge involves updating selected data via modal bootstrap. However, before that can happen, the selected data must be passed into the modal bootstrap by an id, which is where I seem to be stuck at the moment.

UPDATE

I have made some improvements to my rather terrible code since my last attempt, but I still require some assistance.

This is how my view looks like:

<tbody id="showdata">
        <?php foreach ($fo as $f) { ?>
            <tr>
                <td><?php echo $f->siteid ?></td>
                <td><?php echo $f->sitename ?></td>
                <td><?php echo $f->witel ?></td>
                <td><?php echo $f->addr ?></td>
                <td><?php echo $f->lat ?></td>
                <td><?php echo $f->longi ?></td>
                <td><a href="javascript:;" class="btn btn-info item-detail" data="<?php echo $f->siteid ?>">Details</a></td>
            </tr>
<?php } ?>

Here's the js function I'm using:

$('#showdata').on('click', '.item-detail', function(){
    var siteid = $(this).attr('data');
    $('#myModal').modal('show');
    $('#home').find('h3').text('Data Teknisi');

    $.ajax({
        type: 'ajax',
        method: 'get',
        url: '<?php echo base_url() ?>admin/getById',
        data: {siteid: siteid},
        async: false,
        dataType: 'json',
        success: function(data){
            $('input[name=siteid]').val(data.siteid);
            $('input[name=sitename]').val(data.sitename);
        },
        error: function(){
            alert('Could not display data');
        }           
    });
});

And this is my controller:

 function getById(){
    $result = $this->artikel->getById();
    echo json_encode($result);
}

Additionally, here's the model:

 public function getById(){
    $siteid = $this->input->get('siteid');
    $this->db->where('siteid', $siteid);
    $query = $this->db->get('datek');
    if($query->num_rows() > 0){
        return $query->row();
    }else {
        return false;
    }
}

While working on this, I encountered some errors in the console browser such as:
" Failed to load resource: the server responded with a status of 404 (Not Found)send @ jquery-1.12.3.js:10261",

or even this one:
"jquery-1.12.3.js:10261 GET http://localhost/ci/admin/getById?siteid=BPP194 404 (Not Found)send @ jquery-1.12.3.js:10261ajax @ jquery-1.12.3.js:9750(anonymous function) @ admin:576dispatch @ jquery-1.12.3.js:5226elemData.handle @ jquery-1.12.3.js:4878"

Answer №1

Apologies everyone, I realize now that the issue was due to my oversight in updating the base url in config.php.
Thank you for pointing it out.

Your feedback is much appreciated.

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

Adding text to several elements by class in Vue.js

Although I am aware that directly modifying the dom in vue.js is not recommended, I find that the alternatives would result in much messier and harder to maintain code. The Challenge Currently, with the use of vue-i18n, I need to dynamically move the curr ...

Issue with displaying current date and time dynamically (JavaScript/JQuery)

In order to create a real-time chat using websockets, I want to show the time of a message posted in this format: "% sec/min/hour/day now". After conducting some research, I came across two functions that I have modified : // Get the TimeStamp va ...

Dividing internal CRUD/admin panel from the live application

Currently developing a moderately complex react app with redux. We have a production version that meets our requirements and now we are working on an administrative area for a local version of the application. This local version will only have basic CRUD f ...

Unable to resolve Uncaught TypeError: Null property reading not possible

Although I am hesitant to seek help here, solving this seemingly simple error has proved to be quite challenging. No matter what solution I attempt, the error persists. I am currently developing an application on Google Sheets that allows users to track t ...

Evaluation of Library (VueJS) - Displaying various components in an individual test case

Just starting out with testing and have a simple question: I am working on testing a checkbox component. I understand the basics, but how can I render multiple components within one it block? Here is my current code. I am stuck on the second test where I ...

Switching from Dom to Jquery

Seeking assistance to convert DOM values into Jquery equivalent. For instance, how can I translate the DOM code: var x = document.querySelector('#x'); into Jquery format? Any suggestions? Additionally, looking for guidance on transforming even ...

Retrieve events triggered by each element

Currently, my research centers around digital marketing and user experience. In order to gather the necessary data for this study, I must collect event logs from all components within a UI to create datasets on usability patterns. In a web interface, such ...

Differences in font size of Text Sprites between ThreeJS's WebGL renderer and Canvas renderer

I am currently working with Three JS to develop a 3D graph and I am facing an issue with displaying units of the graph as THREE.SPRITE. To create a SPRITE, I first generate a canvas element and add text to it. Then I proceed to create a THREE.Texture using ...

Error message indicating that the preflight request failed access control check in Angular 5 with JWT OAuth integration

After spending hours reading through several posts, I have yet to find a solution to a very common problem. It seems that in order for my JavaScript code to access the resource, the server must include the Access-Control-Allow-Origin header in the response ...

Retrieve data using ajax within an mvc framework

I am facing an issue where I am unable to receive the data sent with AJAX jQuery to a .NET server as a parameter, modify it in memory, and then convert it to JSON. Any assistance in resolving this problem would be greatly appreciated. JAVASCRIPT document ...

Issue with Angular cookies not being able to remove the cookie within a Chrome extension

I am currently developing a Chrome extension that includes login and logout features. After a successful login, the server sends a token that I need to store in a cookie. The process looks like this: function success(response) { if(response.data & ...

Is JSON required to transmit an object using socket.io?

I have an object on the frontend that I want to broadcast to all connected clients. Can I send it as is, in its original form? Or do I always have to convert it into a JSON string before sending? Here is my object: var myBox = { x: 400, ...

Updating FieldArray elements with Redux store variable can be done by following these steps:

I'm currently utilizing redux-form with a FieldArray. By default, the array contains 1 element that is populated from JSON. The FieldArray component allows me to add up to 3 elements. In the code below, the 'elementList' property is sourced ...

I never rely on the browser back button, I prefer to remain on the same page

Being new to Angular, I have come across the following code snippet: HTML template: <a href="" ng-click="goToCategories();">See categories</a> JS File: $scope.goToCategories= function () { CategoriesService.getCateg ...

What is the best way to dissect emails using Haraka?

After delving into the haraka project (at ), I managed to successfully install it on my linux machine. Now, I'm interested in finding a comprehensive tutorial on parsing email meta headers and content body using haraka. Despite searching through their ...

Clicking on an element in Reactjs will result in the value being

I currently have a variable called id with a value assigned to it. My goal is to make this id equal to null when the user clicks on the ClearIcon, so that it doesn't match location.id const [getId, setId] = useState(id) const resetId = () => ...

Transforming a canvas element into an image sans the use of toDataURL or toBlob

Recently, I developed a small tool which involves adding a canvas element to the DOM. Strangely, when trying to use toBlob or toDataURL, I encountered an issue with the canvas being tainted and received the error message (specifically in chromium): Uncaugh ...

Organize based on 2 factors, with emphasis on 1

Looking for a way to sort a list of posts by two variables - date (created) and score (score>). The main goal is to prioritize the sorting based on the score, so that the highest scoring posts appear first.</p> <p>To clarify, the desired so ...

The use of set.has in filtering does not produce the desired outcome

I am attempting to use Set.has to filter an array in the following way: const input = [ { nick: 'Some name', x: 19, y: 24, grp: 4, id: '19340' }, { nick: 'Some name', x: 20, y: 27, grp: 11, id: '19343' }, { ...

Unusual Login Problem Involving Ajax, jQuery, and PHP

My login header has two dynamic links: login/register and profile/logout. I previously used a PHP class function to check if the user was logged in and display the appropriate links, which worked well. Recently, I switched to an Ajax login to avoid page ...