Separate Javascript file from View

Question

I am using Codeigniter and want to separate the JavaScript from the view files, but many of the JavaScript functions need data from controller (it depended on values from controllers)

ex:

controller :

function show_post() {
    $data['data'] = $this -> get_data();                 //some data
    $data['random_key'] = $this -> generate_random();    //returns a random value
    $this -> load -> view('posts', $data);
}

and in view I have a js function:

<script>
    function get_random() {
        return "<?= $random_key; ?>";
    }
</script>

How can I save this javascript snippets to some other file say posts.js? If I did something like this then I cannot use php variables inside the script.

What is the best way to achieve this in terms of Performance and Maintenance?

Some other ways I do not want to follow :

Save the JS file as a PHP file and then pass the values to that file
Declare all those variable in the view file globally

If it's not sensitive data I would just output the variable to the DOM as a data-id="id" attribute to it's corresponding html element, and then use javascript to interact with it from there. If it doesn't have a corresponding element, then chuck it in a hidden input box. Much cleaner. — Jeemusu
– Jeemusu, Commented Jan 31, 2013 at 6:17
i am not interested to change variables into html elements,it makes the DOM dirty. — Red
– Red, Commented Jan 31, 2013 at 7:55
I personally find your current approach of injecting php into javascript a lot dirtier than my alternative, or the alternative or doing a simple AJAX call. It sounds like your looking for a solution that doesn't exist outside of changing your framework/programming language all together. — Jeemusu
– Jeemusu, Commented Jan 31, 2013 at 8:01
@Jeemusu Thanks for your last words ,actually the idea is about to extend one framework ,so i cannot say how users will program and i need to provide the better way.Your methods will work in some areas (ex.binding a selectBox) and will not work for grouped items (A PHP OBJECT converted to Javascript Object) , the best way is use js object rather than converting to html elements. — Red
– Red, Commented Jan 31, 2013 at 8:38

Sudhir Bastakoti · Accepted Answer · 2013-01-31 05:11:03Z

1

you could pass the value as parameter to your js function, like post.js

function get_random( param ) {
    //use param here
}
//OR
function get_random( ) {
    //get arguments like
   var firstArg = arguments[0]; 
}

view.php

//include post.js file
//call the js function passing php variable as parameter, like
get_random("<?php echo $random_key; ?>");

did you mean something like this

answered Jan 31, 2013 at 5:11

Sudhir Bastakoti

100k15 gold badges163 silver badges169 bronze badges

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

1 Comment

Red Over a year ago

If i integrated my js into another file , then for some reasons i cannot call like this.what will happen if i need the data in some events ?

sandip · Accepted Answer · 2013-01-31 05:17:30Z

1

One way to do it by using hidden fields, in your case store them in hidden field like:

<input type="hidden" value="<?php echo $random_key;?>" id="randomkey">

and access them in js by using ID like:

$("#randomkey").val();

In this way you can use controller paramter in your js.

Help it will help you!

answered Jan 31, 2013 at 5:17

sandip

3,3095 gold badges35 silver badges55 bronze badges

3 Comments

Red Over a year ago

Question is just an example , i cannot use this method in large methods.How can i store an array like this ?

Jeemusu Over a year ago

@red If you don't like hiding the data in your DOM for later manipulation, it sounds like AJAX is your only option.

Red Over a year ago

@sandip it will make another call ,this is worst than passing vars to php file (actually i need all these data in view file too and i do not want to create another call for JS)

Jitesh Tukadiya · Accepted Answer · 2013-01-31 07:15:34Z

-1

the simplest method is that , define php variables as js variable in your view file

<script type="text/javascript">
    var random_key = <?= $random_key; ?>;
</script>

then you can use that variable in your example.js file

answered Jan 31, 2013 at 7:15

Jitesh Tukadiya

1,3791 gold badge11 silver badges25 bronze badges

Collectives™ on Stack Overflow

Separate Javascript file from View

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related