Uncaught SyntaxError: Unexpected token /

Question

I just moved a bunch of javascript from being inline, into a separate js file, to take advantage of caching files etc.

When I load my page that consumes the js file, I get the following error message:

Uncaught SyntaxError: Unexpected token /

The line number it's complaining about looks like this:

url:'<?php echo site_url('switches/showknownvins/'.$Name.'/'.$model.'/'.$fn);?>',

It's a part of an ajax call. The lines of code above and below look like this:

    $.ajax({
    url:'<?php echo site_url('switches/showknownvins/'.$Name.'/'.$model.'/'.$fn);?>',
    type:'POST',
    dataType:'json',
    success: function(returnDataFromController) {

I have a total of 203 lines of js code, starting with :

$(document).ready(function(){    

and ending with

 });

When I paste the code back into the PHP file, it works fine. I can't see where my error is.

Any suggestions?

Thanks

EDIT 1

If I rename my .js file to .php and include that, what's the impact? Will the web server still cache it ? That's really what I'm after. I'm trying to improve the speed of my web application because I have a lot of mobile users.

Answer 1

The JavaScript was inline because portions of it (notably here, the url value for the JavaScript AJAX call) was being set by PHP before being returned to the client. Hopefully you can see this from the paste of the problematic line in your question.

Of course, when that PHP code gets to the user's browser, the browser won't understand it -- it's PHP code. Either keep the code you had inline as it was, or do the much harder thing and set up your server to serve dynamic JS if/when a requested static JS file isn't found.

Answer 2

By default, filenames ending in .js are not run through the PHP processor.

You can either reconfigure your webserver to do this. Or rename your .js file to have a .php suffix.

Renaming it to .php should not affect caching, but you can send cache control headers to try to help the browser out.

Answer 3

With CodeIgniter you can serve JS through a controller like this:

Create a resources controller:

/codeigniter/2.1.4/yourAppName/controllers/resources.php

In resources.php put this:

class Resources extends CI_Controller
{
    public function js()
    {
        // JS call should look like the code below in your HTML
        // <script type="text/javascript" src="/resources/js/jsFileName.js"></script>
        // $this->uri->uri_string() should give the string "resources/js/jsFileName.js"
        if(is_file(APPPATH.'views/'.$this->uri->uri_string()))
        {
            header("Pragma: public");
            header("Cache-Control: maxage=604800"); // 1 week
            header('Expires: '.gmdate('D, d M Y H:i:s', (time()+604800)).' GMT'); // expire in 1 week
            header('Content-type: text/javascript');

            $this->load->view($this->uri->uri_string());
        }
    }
}

Create a JS view

/codeigniter/2.1.4/yourAppName/views/resources/js/jsFileName.js

In jsFileName.js you can now use the full CodeIgniter library and native PHP:

$(document).ready(function(){
    $.ajax({
        url:'<?php echo site_url('switches/showknownvins/'.$Name.'/'.$model.'/'.$fn);?>',
        type:'POST',
        dataType:'json',
        success: function(returnDataFromController){
        }
    });
});

It is worth noting that any autoloading that you declared in /config/autoload.php will be autoloaded upon every single JS call so depending on how heavy your APP is I would recommend forking a CI_Controller that only loads the bare necessities. Also if you are doing session stuff upon calling a JS file then things get REALLY ugly and unstable.