jQuery in CodeIgniter, inside the view or in external js file?

Question

I'm developing web application using CodeIgniter. All this time, I put the custom js code to do fancy stuffs inside the view file. By doing this, I can use site_url() and base_url() function provided by CodeIgniter.

Today I want to separate all custom js code from view file into an external js file. Then it hit me, I cannot use site_url() and base_url() in the external js file. So, I had to move the js code back into view file.

I want to ask opinion, example, and best practice for this kind of problems. Do you put the custom js code inside the view, or in external js file? If you put it in external file, how do you get around the needs for site_url() and base_url() (beside of course put the absolute url that I want to avoid).

Answer 1

I typically keep mine in an external file, but place a single line within my template (view) that declares a javascript variable called "baseurl" that can later be used by my external javascript.

<script type="text/javascript">
  var baseurl = "<?php print base_url(); ?>";
</script>
<script type="text/javascript" src="/js/scripts.js"></script>

Now my scripts.js file has access to the base_url() value via its own baseurl variable.

Answer 2

Donny, if you start passing through every URL separately you will just be giving yourself a ball-ache. Why not just pass through base_url() and contcat the controller/method on the end?

You lose the ability to swap around index_page and url_suffix settings but they shouldnt really change all that often anyway.

Answer 3

I would do it in a different way - js should be external, obviously, but why not take full advantage of the fact that you have an MVC framework that's perfectly suited to handle all of your javascript magic?

Here's my recipe for Javscript (and CSS) goodness with CI:

1. Grab a copy of Minify - if you don't know it already, your life will be better. Not in a "Love at first sight / I just discovered jQuery / xkcd / unit testing" kind of way, but at least in a "Dude, prepared statements eradicate SQL injection" kind of way.

2. Second, create a CI controller that encapsulates Minify (shouldn't be too hard, just remember to set the correct HTTP header and pass the parameters on)

3. Optionally activate caching to make everything run blazingly fast (Minify has caching built in, but if you're already caching your CI content, you might as well use the same method here.

4. Optionally define some groups for Minify, to make script loading even nicer

5. Optionally add the baseurl and siteurl variables (and whatever other values you may need) to the javascript output

6. And presto, you should now be able to load your scripts by calling the Minify-wrapper:

   <script type="text/javascript" src="/min/g=js"></script>

It's crazy fast, it's gzipped, takes just one request rather than many, it gives you full CI control over your scripts, and it even makes your source code cleaner.

---

Oh, and if you want to be extra nice to your source-code-peeping visitors, you could automatically add something like this to the output:

// Javascript compressed using Minify by Ryan Grove and Steve Clay
// (http://code.google.com/p/minify/)
// Human-readable source files:

// http://www.yourdomain.com/js/core_functions.js
// http://www.yourdomain.com/js/interface.js
// http://www.yourdomain.com/js/newsticker.js
// http://www.yourdomain.com/js/more_magic.js

(...)

At least that's what I do.