+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Using CodeIgniter (https://forum.codeigniter.com/forumdisplay.php?fid=5)
+--- Forum: Model-View-Controller (https://forum.codeigniter.com/forumdisplay.php?fid=10)
+--- Thread: Header is loaded at the end (/showthread.php?tid=72054)
Header is loaded at the end - Datenshi - 10-30-2018
Hello,
recently I found a very weird issue when I load the header, the content and the footer from the controller. My code is this:
Code:
public function index( $item_index = NULL )
{
$data = array();
...
GET SOME DATA FROM THE MODEL
...
$this->load->view('layout/header.php',$data);
$this->load->view('bootstrap/main.php', $data);
$this->load->view('layout/footer.php', $data);
}The data from the model has no issue, is retrieved normally. But when I try to load the view, I get
ReferenceError: $ is not defined
basically because the jQuery script, and the whole header, is loaded at the very end of the page, after the footer.
Another strange thing is that this behavior happens in some environments. In this case, I found the issue when a put the code in a VM in AWS but also in a colleague local environment. But in my environment, with exactly the same code, it works perfectly.
I have tried everything, and the only solution is to copy the header and footer code directly into main.php and remove them from the controller.
Any other ideas?
Thanks a lot in advance.
RE: Header is loaded at the end - dave friend - 10-30-2018
As an experiment, remove or comment out all the JavaScript and see what happens. I suspect that it is the JavaScript, not $this->load-view() that is rearranging the DOM.
RE: Header is loaded at the end - php_rocs - 10-30-2018
@Datenshi,
Which view is giving the error? Can you post the code?
RE: Header is loaded at the end - Pertti - 10-31-2018
You should put all JS code that needs jQuery library in document ready section.
http://learn.jquery.com/using-jquery-core/document-ready/
RE: Header is loaded at the end - InsiteFX - 10-31-2018
There can be a number of reasons for this error one calling jQuery before it is loaded,
or if hosted by a CDN it may be blocked or down.
Fix:
Code:
// First try loading jQuery from Google's CDN
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
// Fall back to a local copy of jQuery if the CDN fails
<script>
window.jQuery || document.write('<script src="http://mysite.com/jquery.min.js"><\/script>'))
</script>Also load a local copy for a backup, change the path to point to jQuery.
RE: Header is loaded at the end - Datenshi - 10-31-2018
Hi guys,
finally I found the solution. I get the idea of remove the whole JavaScript code and ¨expand¨ it.
First I tried that, just remove the JavaScript, but I found that the issue was still there, the header was still loaded at the end of the source code. Then created a simple view (a div with a hello world as content), and it worked as expected, no issue with the header. Then I started adding back my html and php code until I found it reproduced again. A php call to retrieve a cookie with php $_COOKIE variable was the problem. I remove that and retrieve the information with an ajax call from the server and everything worked perfect.
Thanks for the ideas.
RE: Header is loaded at the end - garimapatil - 02-06-2019
In just about every case, it's best to place all your script references at the end of the page, just before </body>.
If you are unable to do so due to templating issues and whatnot, decorate your script tags with the defer attribute so that the browser knows to download your scripts after the HTML has been downloaded:
<script src="my.js" type="text/javascript" defer="defer"></script>
Edge cases
There are some edge cases, however, where you may experience page flickering or other artifacts during page load which can usually be solved by simply placing your jQuery script references in the <head> tag without the defer attribute. These cases include jQuery UI and other addons such as jCarousel or Treeview which modify the DOM as part of their functionality.