Welcome Guest, Not a member yet? Register   Sign In
Header is loaded at the end
#1

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.
Reply
#2

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.
Reply
#3

@Datenshi,

Which view is giving the error? Can you post the code?
Reply
#4

You should put all JS code that needs jQuery library in document ready section.

http://learn.jquery.com/using-jquery-cor...ent-ready/
Reply
#5

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.
What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )
Reply
#6

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. Wink
Reply
#7

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.
Reply




Theme © iAndrew 2016 - Forum software by © MyBB