I am trying to pass my variables from my main page to external JS file. Please see my code.

Main page:

<script type="text/javaScript">
$(document).ready(function(){

var add_project_link="<?= base_url().'add_project/show_form'; ?>";
var add_agent_link="<?= base_url().'agent/add_agent';?>";
});

</script>

External JS

 $(document).ready(function(){
    alert(add_project_link);
    alert(add_agent_link);
  });

I got:

uncaught referenceError add_project_link is not defined.

I thought the external JS would catch the variable declared in main page. Any thoughts? Thanks a lot!

I am trying to pass my variables from my main page to external JS file. Please see my code.

Main page:

<script type="text/javaScript">
$(document).ready(function(){

var add_project_link="<?= base_url().'add_project/show_form'; ?>";
var add_agent_link="<?= base_url().'agent/add_agent';?>";
});

</script>

External JS

 $(document).ready(function(){
    alert(add_project_link);
    alert(add_agent_link);
  });

I got:

uncaught referenceError add_project_link is not defined.

I thought the external JS would catch the variable declared in main page. Any thoughts? Thanks a lot!

• php
• javascript
• jquery
• codeigniter
• parameters

• Don't define your JavaScript variables inside jQuery's $(document).ready(function(){ }); on the main page. The entire point is to define them BEFORE you call jQuery's external file. Look at my answer. – hohner Commented Mar 7, 2012 at 10:43

6 Answers 6

Before you call your external JavaScript file, define your variables using PHP:

<script type="text/javascript">
   var site_url = '<?php echo site_url(); ?>';
   var current_url = '<?php echo current_url(); ?>';
</script>
<script type="text/javascript" src="file.js"></script>

In your external file.js you can now use site_url as a variable.

Take your php generated variables out of document ready. They are not accessible anyhwere else in your code due to closure of the ready event function they are in

What I would do is to store those variables to something easily called by JS later.

<input type="hidden" id="hidden_var" value="<?= base_url().'add_project/show_form'; ?>" />

var add_project_link = $('#hidden_var').val();

You just write in the head tag

<script type="text/javaScript">    
var add_project_link="<?= base_url().'add_project/show_form'; ?>";
var add_agent_link="<?= base_url().'agent/add_agent';?>";
</script>

Then load your External JS after the script above

best way is to to store those path in some tags like

<span id="site_url" style="display:none;"><?php echo site_url(); ?></span>
<span id="current_url" style="display:none;"><?php echo current_url(); ?></span>

then you can access this this using jquery like

$('#site_url').html();
$('#current_url').html()

the simplest thing to do is to bring the script into a script tag on the php page

you can go down the URL string variable route, but it's unnecessary I think