Pass Parameters from Serverside to Javascript via HTML file

Question

How do I pass parameters from a HTML file to a external Javascript file if these parameters are provided to the HTML by the server side (Codeigniter controller)?

In other words, I have parameters that I want to pass from the serverside PHP/Codeigniter to the Javascript file.

PHP/Codeigniter Serverside Code

function view($id) {

    $data['id'] = $id;    // this is the variable I want to pass to Javascript

    $this->load->view('index', $data);

}

HTML

<html>
    <head>
        <script type="text/javascript" src="./js/targetfile.js"></script>
    </head>
    <body>
        <?php echo $id; ?> //this is how I can retrieve the variable from serverside
...

Javascript (targetfile.js)

var id = id_from_serverside;  // This is where I want the serverside $id to go

Additional Info:

The variable $id is grabbed off the url, so for http://www.domain.com/view/1234, serverside variable $id will be set the value 1234. This 1234 value will then have to be passed to the javascript file (which does an AJAX call back to the serverside to retrieve data from the database)

Mottie · Accepted Answer · 2011-12-24 17:30:54Z

3

You should be able to just do this:

<script type="text/javascript>
var id = <?php echo $id; ?> //this is how I can retrieve the variable from serverside
</script>
<script type="text/javascript" src="./js/targetfile.js"></script>

answered Dec 24, 2011 at 17:30

Mottie

86.7k30 gold badges132 silver badges248 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ayman Safadi · Accepted Answer · 2011-12-24 17:35:53Z

1

How about this:

HTML

<html>
    <head>
        <script type="text/javascript" src="./js/targetfile.js"></script>
    </head>
    <body>
        <input type="hidden" id="my_id" value="<?= $id ?>" />
...

JavaScript

var id = $('#my_id').val();

Try this:

PHP/Codeigniter Serverside Code

function view($id) {
    echo $id;
}

JavaScript

$.get('/mycontroller/view', function(data) {
    alert(data);
}, 'html');

Skip the <html><head>... stuff. Just print the data you need. Then get the data via AJAX.

edited Dec 24, 2011 at 17:35

answered Dec 24, 2011 at 17:18

Ayman Safadi

11.6k1 gold badge30 silver badges42 bronze badges

3 Comments

Nyxynyx Over a year ago

Thanks for the response! I am not sure if using AJAX will work in my case. The variable $id is grabbed off the url, so for http://www.domain.com/view/1234, serverside variable $id will be set the value 1234. This 1234 value will then have to be passed to the javascript file (which does an AJAX back to the serverside to retrieve data from the database)

Nyxynyx Over a year ago

This is an interesting way to accomplish the task :)

mickmackusa Over a year ago

Passing a value from php to js does not require the overhead of ajax -- so it is not ideal for this task. Generating extra DOM elements to port the data from server-side to client-side will needlessly bloat the script. I don't recommend either of the above techniques.

c69 · Accepted Answer · 2011-12-24 18:28:19Z

1

You can send parameters as JSON objects:

<?php 
    $object = array("foo" => "bar", 12 => true); 
    $encoded_object = json_encode($object); 
    echo '<script>var _page_params = '.$encoded_object.';</script>';
?>

will output something like this*:

<script>var _page_params = {"foo": "bar", "12": "true"};</script>

disclaimer: Don't have PHP on this machine, so there might be typos ;)

answered Dec 24, 2011 at 18:28

c69

21.8k8 gold badges56 silver badges83 bronze badges

1 Comment

Nyxynyx Over a year ago

Great! Although I am sending only 1 variable now, now I know how to send an array over :)

Collectives™ on Stack Overflow

Pass Parameters from Serverside to Javascript via HTML file

3 Answers 3

Comments

HTML

JavaScript

PHP/Codeigniter Serverside Code

JavaScript

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

HTML

JavaScript

PHP/Codeigniter Serverside Code

JavaScript

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related