[SOLVED] Insert javascript file dynamically

dfwcomputer · February 3, 2009

I am currently using a content managment system in which I want to modify.The mods will include a number of javascript files, So I would like to add them dynamically (Isuppose that is the right word)

I'll give you an example of what I have come up with...

In my header.php file I would have the following

if (defined('JS_HEAD')) {
	$JSHead = 'includes/' . JS_HEAD;
	if (file_exists($JSHead)) {
		echo '<script type="text/javascript" language="javascript" src="' . $JSHead . '"></script>', "\n";
	}
}

and then when a particular module needs a javascript file inserted in the header file I could just call

define('JS_HEAD', 'myfile.js')

Is this the best way to go about it?

Or does anyone have another solution.

DeanWhitehouse · February 3, 2009

That would limit you to one file, if you want to use more than one file just make it an array and a for (or foreach) loop

dfwcomputer · February 3, 2009

ok, so if i added the following,

module1

define('JS_HEAD', 'module1.js')

module2

define('JS_HEAD', 'module2.js')

it would only load one file?

DeanWhitehouse · February 3, 2009

Yes

dfwcomputer · February 3, 2009

Am i even close lol

if (defined('JS_HEAD')) {
$JSHead = JS_HEAD;
$JSFile = array($JSHead);
var_dump($JSFile);
foreach ($JSFile as $jsArray) {
		if (file_exists($jsArray)) {
		echo '<script type="text/javascript" language="javascript" src="' . $jsArray . '"></script>'. "\n";
		}
	}
}

gevans · February 3, 2009

Why not add you'r 'modules' into an array and loop that;

<?php
$JSmodules = array('module1.js','module2.js');
foreach($JSmodules as $JSmodule){
if(file_exists($JSmodule)) echo '<script type="text/javascript" language="javascript" src="' . $JSModule . '"></script>'. "\n";
}
?>

dfwcomputer · February 3, 2009

I just need a way to set the js file in the top of the module and have it automatically load in the header.As there could be 50 different modules and for example 12 of them may need a particular javascript file.But this javascript file is only needed whilst viewing the module.

gevans · February 3, 2009

I'm not sure I understand what you're trying to reach rather than including all of the javascript files available from a list (array)

dfwcomputer · February 3, 2009

I'm not sure I understand what you're trying to reach rather than including all of the javascript files available from a list (array)

yes thats correct but I dont want to have to update the header file everytime with

$JSmodules = array('module1.js','module2.js','module3.js');

I would just like to define the file when I build the module e.g.

define('JS_HEAD', 'module1.js')

Then the header file would take all the defined files and insert them.

gevans · February 3, 2009

like this....

$JSmodules[] = 'a_new_module.js';

that adds another module to the array

dfwcomputer · February 3, 2009

arrrrgh ok, Thankyou much appreciated.

dfwcomputer · February 3, 2009

mmmm ok I have this in the header file

$JSmodules = array();
foreach($JSmodules as $JSmodule){
	if (file_exists($JSmodule)) {
		echo '<script type="text/javascript" language="javascript" src="' . $JSModule . '"></script>'. "\n";
	}
}

and I have this in the top of my module

$JSmodules[] = 'includes/module2.js';

but it does not display it in the source code.

If i change

$JSmodules = array();

To

$JSmodules = array('includes/module2.js');

it display this in the source code

<script type="text/javascript" language="javascript" src=""></script>

any ideas on why it wont work

gevans · February 3, 2009

When you say;

and I have this in the top of my module
$JSmodules[] = 'includes/module2.js';
but it does not display it in the source code.

Do you mean you're putting the relevant link at the top of the page you're trying to include?

dfwcomputer · February 3, 2009

Do you mean you're putting the relevant link at the top of the page you're trying to include?

I think I understand what your saying and yes.

here is a complete test page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<?php
$JSmodules = array();
   foreach($JSmodules as $JSmodule){
      if (file_exists($JSmodule)) {
         echo '<script type="text/javascript" language="javascript" src="' . $JSModule . '"></script>'. "\n";
      }
   }
?>
</head>

<body>

<?php
$JSmodules[] = 'includes/module2.js';
?>
</body>
</html>

DeanWhitehouse · February 3, 2009

You need to add it to the array before doing the loop.

dfwcomputer · February 3, 2009

Then I guess it wont work?

as it will be defined in the module to keep core modifications to a minimum.

DeanWhitehouse · February 3, 2009

Huh? Just put the list of JS files at the top of the page, you seem to be making this more complicated than it is

gevans · February 3, 2009

Are you always going to want to include all the javascript files?

dfwcomputer · February 3, 2009

Are you always going to want to include all the javascript files?

some files yes, but I will just add them to the core.But some modules will need a js file of there own and it will only need to be loaded when that module is active.Thats why I would like to define it some how in the module file that this particular file is needed and it will be automatically loaded in the header file.Im sure there would be an easy solution as I doubt I would be the first one to come up against this issue.

trq · February 3, 2009

If I'm understanding you, you want a method enabling you to add js files to your html <head> after the fact?

This is one reasonablky simple method:

Your going to need to put your entire output into a buffer, then replace a placeholder with your calls to the js files.

I'll try and keep this simple and hope you get the idea.

header.php

<?php ob_start(); ?>
<html>
  <head>
  </head>
  <body>

footer.php

  </body>
</html>
<?php
$output = ob_get_contents();
if (isset($js) && is_array($js)) {
  $replace = "<head>\n";
  foreach ($js as $jsscript) {
    $replace .= "    <script type=\"text/javascript\" src=\"/js/$jsscript\"></script>\n";
  }
  $output = str_replace('<head>', $replace, $output);
} 
echo $output;
ob_end_flush();
?>

main.php

<?php

  include 'header.php';

  // here is the guts of your application doign whatever it does.

  // load some js libs into an array.
  $js = array('foo.js','bar.js','bob.js');

  // carry on with application.

  include 'footer.php'

?>

This would produce the following output:

<html>
  <head>
    <script type="text/javascript" src="/js/foo.js"></script>
    <script type="text/javascript" src="/js/bar.js"></script>
    <script type="text/javascript" src="/js/bob.js"></script>
  </head>
  <body>
  </body>
</html>

Hope it helps.

dfwcomputer · February 3, 2009

argh thats it, thankyou very much

Sign In

[SOLVED] Insert javascript file dynamically

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information