js in external file does not work

[son]

In the head section I have the following script to change the main image on a product page as:

<script language="JavaScript">function preloader() {     // set image list	 images = new Array();     	 images[0]="products/main/1-1.jpg"     	 images[1]="products/main/1-2.jpg"     	 images[2]="products/main/1-3.jpg"     	 images[3]="products/main/1-4.jpg"	 images[4]="products/main/1-5.jpg"	 images[5]="products/main/1-6.jpg"    //Create a holder for the loaded images    imageObjects = new Array();    for(var i=0,l=images.length; i<=l; i++)      {        //Load the image        var imageObj = new Image();        imageObj.src=images[i];        //Place the loaded image in the holder        imageObjects[i] = imageObj;    }}window.onload = preloader;    </script><script type="text/javascript">if (document.images) {image0_src = '1-1.jpg';image1_src = '1-2.jpg';image2_src = '1-3.jpg';image3_src = '1-4.jpg';image4_src = '1-5.jpg';image5_src = '1-6.jpg';} else {image0 = '';image1 = '';image2 = '';image3 = '';image4 = '';image5 = '';document.rollimg = '';} var pic = "1-1.jpg";function change_image(val){document.rollimg.src = 'products/main/' + val;  pic = val;}</SCRIPT> <script type="text/javascript" src="assets/js/DOMhelp.js"></script><script type="text/javascript" src="assets/js/classChange.js"></script>

So far, so good. Now, almost being ready to go live I thought it might be better to move the code completely into external files and removed this code and moved it into a file called 'imgSwap.js' which is in same folder as other javascript files. The head has now only the following:

<script type="text/javascript" src="assets/js/imgSwap.js"></script><script type="text/javascript" src="assets/js/DOMhelp.js"></script><script type="text/javascript" src="assets/js/classChange.js"></script>

The script to change the image does not work now. Is there a specific way of having the relevant code in an external file?SonSon

[chibineku]

Notice that your inline JavaScript was split into two scripts. If you copied and pasted it with any opening or closing script tags, it won't work, as there shouldn't be any tags in a .js file.

[son]

Notice that your inline JavaScript was split into two scripts. If you copied and pasted it with any opening or closing script tags, it won't work, as there shouldn't be any tags in a .js file.

You got me there! This is right. But now I have got another problem. I need to use php to generate some content for js. Does this not work in external files? Having it working now 'statically' I replaced for example a file name which was '1-1.jpg' with '<?php echo $File1; ?>' (which worked when js was inline), but does not do it...Son

[thescientist]

depends. How are you getting the images from the DB?

[chibineku]

Obviously you can't use php in a .js file, so if you want to keep your JavaScript separate you need to put the script, including scipt tags, in a .php file and include it instead of the usual external javascript syntax.

[son]

Obviously you can't use php in a .js file, so if you want to keep your JavaScript separate you need to put the script, including scipt tags, in a .php file and include it instead of the usual external javascript syntax.

Will have a go. Many thanks for pointers:-)Son

[justsomeguy]

I've got a Javascript file which contains quite a bit of PHP. Most of my application uses ajax for everything, but it needs this information defined on startup before it sends out any ajax requests, so I link to this file as user-data.js.php, e.g. <script type="text/javascript" src="user-data.js.php">:

<?phprequire_once 'global.init.php';header("Cache-Control: no-cache, must-revalidate");header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");?>App.lms.getuser = function(){  var udata = new Object;<?php$email_req = !$opts->get_opt('email_optional');if ($sess->userid > 0){  $sess->set_user($sess->userid);}echo "  udata.id = {$sess->userid};\n";echo "  udata.fullname = \"{$sess->fullname}\";\n";echo "  udata.username = \"{$sess->username}\";\n";echo "  udata.fname = \"{$sess->userdata['fname']}\";\n";echo "  udata.lname = \"{$sess->userdata['lname']}\";\n";echo "  udata.email = \"{$sess->userdata['email']}\";\n";echo "  udata.main_admin = {$sess->main_admin};\n";echo "  udata.sub_admin = {$sess->sub_admin};\n";echo "  udata.ug_admin = {$sess->ug_admin};\n";echo "  udata.inst = {$sess->userdata['instructor']};\n";# Check for UG stylesif ($sess->ug_admin){  $db->sql('SELECT ugid FROM usergroup_admins WHERE uid=%d');  $db->add_param($sess->userid, false);}else{  $db->sql('SELECT ugid FROM usergroup_users WHERE uid=%d UNION SELECT ugid FROM autoassigned_users WHERE uid=%d');  $db->add_param($sess->userid, false);  $db->add_param($sess->userid, false);}$result = $db->select();$ug_list = array();foreach ($result as $r){  $ug_list[] = $r['ugid'];  $ug_list = array_merge($ug_list, find_usergroup_parents($r['ugid']));}$ug_list = array_unique($ug_list);if (count($ug_list) > 0){  $banner = get_ug_banner($ug_list);  if ($banner['id'] != 0 && file_exists($config['lms_root'] . $config['ug_css_rel'] . $config['ds'] . 'ug' . $banner['id'] . '.css'))	echo "  udata.custom_style = \"custom/ug{$banner['id']}.css\";\n";}for ($i = 1; $i <= 30; $i++){  echo "  udata.field{$i} = \"{$sess->userdata['field' . $i]}\";\n";}if ($sess->get_val('skip_validation') == 'true'){  $invalid_fields = false;  $sess->set_val('skip_validation', 'false');  echo "  udata.last_pw_change = 0;\n";}else{  // determine if password change is needed  if ($sess->userdata['pw_last_change'] == 0)	echo "  udata.last_pw_change = -1;\n";  else  {	$days = floor((time() - $sess->userdata['pw_last_change']) / 86400);	echo "  udata.last_pw_change = {$days};\n";  }  $invalid_fields =	($email_req && !validate_email($sess->userdata['email'])) ||	$sess->userdata['fname'] == '' ||	$sess->userdata['lname'] == '';  $ufields = $uf->get_fields();  foreach ($ufields as $ufield)  {	// validate user fields	if ($ufield->shown)	{	  if (!$ufield->allow_blank && $sess->userdata[$ufield->id] == '')	  {		$invalid_fields = true;		echo "//{$ufield->id} is invalid\n";		break;	  }	  if ($sess->userdata[$ufield->id] != '')	  {		if ($ufield->minlen > 0 && strlen($sess->userdata[$ufield->id]) < $ufield->minlen)		{		  $invalid_fields = true;		  echo "//{$ufield->id} is invalid\n";		  break;		}		if ($ufield->maxlen > 0 && strlen($sess->userdata[$ufield->id]) > $ufield->maxlen)		{		  $invalid_fields = true;		  echo "//{$ufield->id} is invalid\n";		  break;		}  		if ($ufield->validation_rule != '' && preg_match('/' . str_replace('/', '\/', $ufield->validation_rule) . '/', $sess->userdata[$ufield->id]) === 0)		{		  $invalid_fields = true;		  echo "//{$ufield->id} is invalid\n";		  break;		}	  }	}  }}echo "  udata.invalid_fields = " . ($invalid_fields ? "true" : "false") . ";\n";?>  this.userdata = udata;}

The output of that file looks something like this:

App.lms.getuser = function(){  var udata = new Object;  udata.id = 3576;  udata.fullname = "John Test Account";  udata.username = "johntest1";  udata.fname = "John";  udata.lname = "Test Account";  udata.email = "test@test.com";  udata.main_admin = 0;  udata.sub_admin = 0;  udata.ug_admin = 0;  udata.inst = 0;  udata.custom_style = "custom/ug1206.css";  udata.field1 = "js@domain.com";  udata.field2 = "";  udata.field3 = "Training and Development";  udata.field4 = "Corporate Bldg A - Phx";  udata.field5 = "";  udata.field6 = "test account";  udata.field7 = "EESurvey";  udata.field8 = "";  udata.field9 = "";  udata.field10 = "";  udata.field11 = "";  udata.field12 = "30600";  udata.field13 = "20000";  udata.field14 = "";  udata.field15 = "rs";  udata.field16 = "";  udata.field17 = "";  udata.field18 = "";  udata.field19 = "";  udata.field20 = "";  udata.field21 = "";  udata.field22 = "";  udata.field23 = "";  udata.field24 = "";  udata.field25 = "2012";  udata.field26 = "";  udata.field27 = "";  udata.field28 = "";  udata.field29 = "";  udata.field30 = "";  udata.last_pw_change = -1;  udata.invalid_fields = false;  this.userdata = udata;}

[chibineku]

Sweet, I didn't know you could do that

[Ingolme]

You can use PHP in any kind of file: HTML, XML, javascript, CSS, image files...You just need to send the correct headers and embed the .php file like you would any other file.

[son]

You can use PHP in any kind of file: HTML, XML, javascript, CSS, image files...You just need to send the correct headers and embed the .php file like you would any other file.

Thanks everyone! Great news...Son