Having trouble loading CSS and JavaScript files in CodeIgniter version 3.0.4?

I am facing an issue with loading my CSS and JS files in the view file. I have already added them to the folder and set the base URL. These codes were working fine with a project I previously did on an older version of CodeIgniter. What could be causing this problem? Here is my view:

 <link href="<?php echo base_url()?>js/dataTables/dataTables.bootstrap.css" rel="stylesheet" />

    </br></br>
            <div class="panel panel-primary" style=" width: 1050px; border-radius: 0">
                    <div class="panel-heading" style="border-radius: 0 ">user List    <button  data-toggle="tooltip"   data-placement="bottom" title="Print Customer Order" style="border-radius: 0px;"type="button" class="btn btn-default" aria-label="Left Align">
                                        <a href="<?php echo base_url() . 'admin/printlist/'; ?>">
                                                   Print List
                                                      </a>
                                            </button> </div>
                    <div class="panel-body" style="border-radius: 0 ">  

                        <table id="myTable" class="table table-bordered" >  
                            <thead>  

                                <tr>  

                                     <th>Surname</th> 
                                    <th>Name </th>  
                                    <th>Age</th>  
                                    <th>School</th>  
                                   <th>Course</th>  
                                    <th>Email</th>  

                                </tr>  
                            </thead>  
                            <tbody>  


                               <?php foreach ($user as $users): ?>
                                    <tr>
                                        <td><?php echo $users->surname; ?></td>
                                        <td><?php echo $users->name; ?></td>
                                        <td><?php echo $users->age; ?></td>
                                        <td><?php echo $users->school; ?></td>
                                        <td><?php echo $users->course; ?></td>
                                        <td><?php echo $users->email; ?></td>

                                        </td>
                                    </tr>
                                <?php endforeach; ?>
                            </tbody>  
                        </table>  
                               </div>

                    </div>
                </div>
        </div>
    </div>

            <script src="<?php echo base_url() ?>js/dataTables/jquery.dataTables.js"></script>
            <script src="<?php echo base_url() ?>js/dataTables/dataTables.bootstrap.js"></script>
            <script>
                $(document).ready(function() {
                    $('#myTable').dataTable({
                        "aaSorting": [[0, "asc"]]
                    });
                });
            </script>

Answer №1

After conducting my research, I have discovered that the default location for CSS files in Codigniter is typically at the same level as the application. For example:

/css
/application

If you are experiencing issues with your CSS files, be sure to first check if they are in the correct location relative to your application. You may need to use some simple ../ before the file path to resolve any issues.

Additionally, it appears that your CSS file is currently located within a js folder (js/dataTables/). Could this be a simple oversight during a copy and paste process?

Answer №2

To include CSS and JS files in your project, make sure to place the folders at the root level of your application.

In my project, I organized the files by creating an 'assets' folder and placing the css and js folders within it. This setup has been functioning perfectly for me.

assets/js/custom-scripts.js">

Answer №3

It appears that an error has occurred. Please update the code from <?php echo base_url()?> to <?php echo base_url(); ?>

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

Utilizing scroll functionality within a DIV container

I have the following Javascript code that enables infinite scrolling on a webpage. Now, I am looking to implement this feature within a specific DIV element. How can I modify this code to achieve infinite scroll functionality inside a DIV? Any assistance ...

What is the process for importing Buffer into a Quasar app that is using Vite as the build tool

I'm having issues with integrating the eth-crypto module into my Quasar app that utilizes Vite. The errors I'm encountering are related to the absence of the Buffer object, which is expected since it's typically found in the front end. Is ...

Updating the title of a page on CoreUI's CBreadcrumbRouter dynamically

I'm currently developing a project with VueJS and the CoreUI admin template. Is there a way I can change the title of the current page as shown on the CBreadcrumbRouter? The GitHub documentation mentions that the script typically displays meta.label ...

Verify if there is a cookie available; then execute the load() function. If the cookie matches, it is necessary to

$(document).ready(function() { var hrefs = { "en": ["includes/test1.html", "includes/test2.html"], "es": ["includes/test3.html", "includes/test4.html"] } $(function() { var cookie = Cookies.get('langCookie'); if (cookie) { ...

Fluid Grid design showcasing a gap on the right side

After working on the Skeleton Framework and making adjustments to the grid design, I am facing a small gap issue on the right side. Despite things slowly falling into place, this minor gap is causing confusion. Please refer to the image below for clarifica ...

Saving an array within the Yii framework

The view contains the following form: <form method="POST" action="<?php echo Yii::$app->request->baseUrl;?>/telephone/addnow/" role="form" enctype="multipart/form-data"> <label>Upload your photo:</label><input type="fi ...

I'm having trouble grasping the sequence of events in this async example

Currently, I'm delving into the world of JavaScript and Node.js, but I find myself facing challenges with asynchronous execution. I have a piece of code that may not be following best practices, but I am eager to understand why the file remains open w ...

What is the proper way to utilize the "Long" type when declaring a schema in MongoDB?

Forgive my ignorance, but I am trying to achieve something like this: var mongoose = require('mongoose'); var Long = require("long"); var UserSchema = new mongoose.Schema({ id: Long(), name: String, completed: Long(), ...

What is the best way to determine if a JSON response value contains a hyphen '-' in Java Script?

When I receive a JSON response, I sometimes encounter values with hyphens. In JavaScript, the hyphen '-' is treated as a subtraction operator. JSON books": { "red": "2008-17801", "blue": "TERTERIAN-HAYK" } After obtaining these values, I store ...

Inquiry to an outside domain

I need to send a request to an external domain, ensuring that the parameter is correctly sent to a PHP file on the external server. However, I'm facing an issue where "request.responseText" always returns empty. Any assistance in this matter would be ...

Adding up rows and columns using HTML

I've designed an HTML table to function as a spreadsheet, with the goal of being able to total up rows and display the sum in a cell labeled "Total." The same calculation should be applied to columns as well, with totals displayed in the last column c ...

In the template, I utilize both vue-router and jQuery. However, there seems to be an issue with $(document).ready() not functioning

Looking for guidance on using jQuery in Vue. I've noticed that when I refresh the page, $(document).ready() function is triggered. However, when I use vue-router to switch pages, $(document).ready() does not seem to work. <template> <div ...

The express-unless plugin in Node.js allows you to exclude specific paths from the middleware.auth

I need help implementing express-unless to exclude a /health path from using middleware.auth. Unfortunately, I am facing syntax issues and unable to test this locally. Using localSite == true is not compatible with my environment. The error logs are shown ...

Customizing the Slider Range with HTML DOM Style's BackgroundImage Attribute

I have a slider range that I'd like to modify using JavaScript. Specifically, I want to change its background-image property. To achieve this, I attempted the following script: document.getElementById("range").style.backgroundImage = "linear-gradient ...

The creation of an indexedDB database and the addition of content encountered an error while trying to perform a 'transaction' on the IDBDatabase

I am relatively new to using IndexedDB and have successfully created a database. However, I am encountering an error when trying to add content to it. The specific error message reads: Uncaught NotFoundError: Failed to execute 'transaction' on ...

Is it possible in HTML to create an "intelligent" overflow effect where text is truncated and replaced with an ellipsis "..." followed by a link to view the full content?

I have a <div> that has a limited size, and I am looking for a way to display multiline text in it. If the text exceeds the available space, I would like to add "..." at the end along with a link to view the full content on another page. Is there a ...

React - Implementing toggling of a field within a Component Slot

I find myself in a peculiar situation. I am working on a component that contains a slot. Within this slot, there needs to be an input field for a name. Initially, the input field should be disabled until a web request is made within the component. Upon com ...

What is the best way to generate a "JSON diff" that can be displayed in the JavaScript console?

When working on my Angular project, I frequently encounter the need to compare JSONs in my Karma/Jasmine tests. It would be incredibly useful to have a console output showing what has been added and removed when comparing two structures. For example, ident ...

Featherlight is experiencing issues with running Ajax requests

I'm currently working on integrating an ajax photo uploading script into a Featherlight lightbox, but I'm running into issues! If anyone could help me figure out what's going wrong, that would be greatly appreciated. I've already includ ...

Tips for achieving JSON formatting with JavaScript or jQuery

To achieve the desired output format, I am required to transform the provided input json. input json: [ { "key a": "value alpha" "key b": "value beta" "key c": "value gamma& ...