Dynamic jQuery code: is there any way to include it in a file?

Question

I have been developing and testing with inline jQuery. I am using CodeIgniter and 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(); ?>.

I have gotten the code working, but I want to put it in an external JS file for cleanliness. There seems to be no way I can think of to do this. 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?

Answer 1

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!