Writing JS in PHP with document.write

Question

This is failing but i dont know how to make it work.

I have a php array:

$swipe_list = array('customers.html', 'index.html', 'atr_backplane.html');

This is to know which pages have carousels and need touch support.

so i check the page in php and if its listed the JS will check its a touch device and write the addional js mobile file.

is it because the server script trys ti run before the js can detect at the client side??

<?php
if(in_array($selected, $swipe_list)){ ?>
<script type="text/javascript">

function isTouchDevice(){ document.write('<script type="text/javascript" src="js/jquery.mobile.custom.min.js"></script>')
}

</script>            
<?php }?>
<?php if(!in_array($selected, $exclude_list)){       
print '<script type="text/javascript" src="js/camera.js"></script>';
}
?>

You should never generate JS from PHP, one runs on the server and the other runs on the client. Separate the concerns, have PHP create a JSON object that is used by the JS to minimize coupling... It will really simplify debugging and maintenance of your code — Ruan Mendes, Jul 04 '13 at 15:45

score 1 · Answer 1 · answered Jul 04 '13 at 15:42

your problem resides here, i think :

function isTouchDevice(){ document.write('<script type="text/javascript" src="js/jquery.mobile.custom.min.js"></script>')
}

There are a number of reasons why this line does nothing.

First, the function isTouchDevice is defined, and then never called (at least not in your example)

Second, writing text to the document after it has loaded isn't a viable way to load external scripts.

From what i gather, you want to do this: (it is also fine to use php's print or echo functions to print the script tag to the document if you don't like this route)

<?php
if(in_array($selected, $swipe_list))
{ 
?>

   <script type="text/javascript" src="js/jquery.mobile.custom.min.js"></script>

<?php 
}

if(!in_array($selected, $exclude_list))
{

?> 

   <script type="text/javascript" src="js/camera.js"></script>

<?php
}
?>

score 1 · Accepted Answer · answered Jul 04 '13 at 15:42

1

When you use document.write after the page has loaded, all kinds of bad things can happen. I don't remember the exact reason why, but I know it breaks the DOM somehow.

The best thing would be to include the script dynamically without breaking the DOM using something like this instead:

function isTouchDevice(){
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'js/jquery.mobile.custom.min.js';
    document.getElementsByTagName('head')[0].appendChild(script);
}

This creates the script element and appends it to the head of the document.

answered Jul 04 '13 at 15:42

Aaron Cunnington

1,631
2
15
23

But this would still include on every touch device the jquery.mobile.custom.min.js for every page and ignore the php array? I dont want to include the file unless its being utilsed by a touch device for a page that has elements where its required - saving overhead – Razzor Jul 04 '13 at 15:51
In that case, you could take the code outside of the function and wrap it with your PHP `in_array` code. You may actually need to wait for the document to load fully before you can add the script to the head, so perhaps put this code at the end of the file, or wrap it inside `window.onload = function() { ... }` at any point in the document. – Aaron Cunnington Jul 04 '13 at 15:55

score 0 · Answer 3 · answered Jul 04 '13 at 15:42

Not sure if your problem is with the inclusion of the js files, but I think if you just remove document.write and include your scripts then it should work:

    <?php
if(in_array($selected, $swipe_list)){ ?>

  <script type="text/javascript" src="js/jquery.mobile.custom.min.js"></script>
<?php
} 

if(!in_array($selected, $exclude_list)){       
?>
   <script type="text/javascript" src="js/camera.js"></script>
<?php
}
?>

try it out :)

Writing JS in PHP with document.write

3 Answers3