CSS and JavaScript Both are not loading in mobile view using codeigniter?

Question

I am new to codeigniter but so for, I have used it well not until I have tried to view it on other devices.

This is the problem:

Web: Broswer View | Browser (Responsive Design View)

_htaccess:

RewriteEngine on
RewriteCond $1 !^(index\.php|assets|images|js|css|uploads|favicon.png)
RewriteCond %(REQUEST_FILENAME) !-f
RewriteCond %(REQUEST_FILENAME) !-d
RewriteRule ^(.*)$ ./index.php/$1 [L]

Page Controller:

<?php
    class Pages extends CI_controller{
        public function view($page = 'home'){
            if(!file_exists(APPPATH.'views/pages/'.$page.'.php')){
                show_404();
            }

            $data['title'] = ucfirst($page);

            $this->load->view('templates/header');
            $this->load->view('pages/'.$page, $data);
            $this->load->view('templates/footer');
        }

    }

Did You Add this line into your Header View ? You Can check in various browsers also. try remove your cdn and attach scripts and css via locally. — Pardeep, Feb 02 '18 at 05:08
set up base url like this will helps you https://stackoverflow.com/questions/38122186/set-up-the-base-url-in-codeigniter/38122321#38122321 — Abdulla Nilam, Feb 02 '18 at 05:09
Make sure you have set your base url correct in the config.php don't touch the htaccess inside application folder. — , Feb 02 '18 at 05:14
@DeadManAlive - Base url are all set up just like what you have on the link — Jeff Yan, Feb 02 '18 at 05:38
@Ayyappaamara - Local address. I have my laptop as a server (xampp) and I accessed the app via mobile thru wifi but it only shows the plain html page without styles. — Jeff Yan, Feb 02 '18 at 07:24

score 1 · Answer 1 · answered Feb 05 '18 at 01:48

After how many hours of research. I have finally found the answer. It is too simple that I even laugh of how stupid I am.

When I view the page source from my mobile device, it shows that the base_url of the headers are LOCALHOST which is why the device cannot find the css/js files from the mobile device. In order for the headers to work, you must change first the base_url to your device's IP ADDRESS. That should do the work.

Thanks everyone.

score 0 · Accepted Answer · answered Feb 02 '18 at 05:19

0

Make sure to add relative path of css and is not absolute path , if you are adding CDN path then make sure to allow xampp to access internet. I guess you have given path of local host or windows path but trying to access through IP in LAN that's why it is giving problem and solution is relative path.

answered Feb 02 '18 at 05:19

VIKAS ROY

80
1
13

I have set my assets (css, js and etc) locally for me to load directly from my computer the files without internet. Before I migrated my application to codeigniter, it was all working well also on mobile view and after I integrated my application to codeigniter, the mobile view messed up. It's like something is prohibiting the app to load those assets. – Jeff Yan Feb 02 '18 at 05:43
Can you please check the footer wether it is showing on you plain text htlm page or not by adding some extra data. I guess your header and footer file unable to load . Either it may be due to incorrect configured url or it may be not in the correct accessible directory. You should install some parser or debugging tool to find error log :) – VIKAS ROY Feb 02 '18 at 08:17
Sorry if I misunderstood your answer. I can't help but laugh of how stupid I am after I figured out the one that works. Thank you anyway. :) – Jeff Yan Feb 05 '18 at 01:50
I seen your answer and yes it happens when you try to access outside of localhost you should provide your server ip. And i am glade that you fix your problem :) welcome :) – VIKAS ROY Feb 08 '18 at 16:47

score 0 · Answer 3 · answered Oct 21 '20 at 03:04

0

I had the same problem and successfully fixed it. Just change base_url 'localhost' to device's IP ADDRESS just like the Jeff Yan said

answered Oct 21 '20 at 03:04

kasuta

1

CSS and JavaScript Both are not loading in mobile view using codeigniter?

3 Answers3