Dynamic jquery code - any way to include it in a file?

Question

So i have been developing and testing with jquery inline. I am using CodeIgniter - the below refers to my views.

I have <script="text/javascript">JQUERY CODE</script> at the top of my page. Some of my code is dynamic in that it uses PHP vars. E.G when making an ajax call, the URL is preceeded by <?php echo base_url();?>

So now I have gotten the code working, I want to put it in an external JS file for cleanliness - thinking about this, there is seemingly no way. Am I correct?

One aspect of my site is google maps. I use them all over the place. Again, parts of the code are dynamic, from PHP. Same question.

As a slight change - with the maps, i have many pages with many slightly different maps on them. Is there anyway to efficiently reuse map code, or am i going to have to have some duplicate code?

Thanks

Answer 1

Well, do the same as you would do inside the page directly. Rename the .js file to a .php script, and include the same PHP code as you would before, in the .php file. Then, in the HTML file, use filename.php (not .js). The web server will invoke PHP on the script and send the browser the resulting JavaScript.

Answer 2

So are your customizations mostly just parameter replacements for things like google maps? If so, why not just have a function call that take a JSON object as a parameter. Have your backend serve some JSON data via an AJAX request, pass the data to the function, and you're done. Less JS code to download, and a much cleaner setup.

// site.js
function displayMap(params) {
  // code to display google map using values from params
  // for instance:
  var lat = params.lat;
  var long = params.long;
}  

To use this, do something like this:

$.get('ajax/mapdata.json?id=5', function(data) {
  displayMap(data);
  alert('Load was performed.');
});

Output JSON from your app by creating something like this:

{
  lat: 232
  long: 123
}

Hope that helps!

Answer 3

You can create a block of JSON data in your main page:

<script>
  var pageData = {
    something: 'whatever',
    somethingElse: [ 33.20, 19.02 ],
    moreStuff: false
  };
</script>

and then just reference the variable "pageData" from your script.