Document.write errors because of line break?

Question

            <?php  
              if ( is_home() ) {
            ?>
              <script type="text/javascript">
              if ($(window).width() < 768) {
                  document.write("<?php echo do_shortcode("[mobile-slider]"); ?>");
              } else {
                  document.write("<?php echo do_shortcode("[desktop-slider]"); ?>");
              }
              </script>

My homepage renders and displays "); } else { document.write(" then the homepage slider and then "); }. Any idea why?

JS error

SyntaxError: unterminated string literal

document.write("

HTML Output - Seems to be adding a line break which I think is breaking the script?

<script type="text/javascript">
if ($(window).width() < 768) {
document.write("
<!--slider-->

How can I get this to still run even though there is a line break after the document.write(" opening?

I have also tried the following however it still prints the } else { on screen.

<script type="text/javascript">
              if ($(window).width() < 768) {
                <?php echo do_shortcode("[mobile-slider]"); ?>
              } else {
                <?php echo do_shortcode("[desktop-slider]"); ?>
              }
</script>

Please do not use `document.write`. There are always better alternatives (almost). What are you trying to achieve? — plalx, Sep 30 '13 at 03:14
@plalx Thanks. Ok so I'm trying to determine if the browser width is less than 768px wide and if it is then display the slider for mobile devices and if it's not then display the desktop one. — DT.DTDG, Sep 30 '13 at 03:15
You should package your features using JS modules instead of using PHP, it would then be way easier and you wouldn't have to play with strings. What's the output of `do_shortcode("[mobile-slider]")`? — plalx, Sep 30 '13 at 03:21
I did indeed :) Thanks @plalx. Need it to be dynamic though. — DT.DTDG, Sep 30 '13 at 03:38

Sunil Kumar · Answer 1 · 2013-09-30T03:41:37.217

Here is the solution:

   <?php        
    $v1  = do_shortcode("[mobile-slider]");   
    $v2 = do_shortcode("[desktop-slider]");

    function do_shortcode($va){
    return "here i am:" . $va;
    }
    ?>



 <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script type="text/javascript">
                  if ($(window).width() < 768) {
                     $('body').html("<?php echo $v1; ?>");
                  } else {
                     $('body').html("<?php echo $v1; ?>");
                  }
    </script>

    </head>

    <body>

See the latest edit on my question. I've tried using that instead but still running into issues. — DT.DTDG, Sep 30 '13 at 03:19

score 0 · Answer 2 · answered Sep 30 '13 at 03:31

0

Ok so I've resolved this by doing the following.

Using JS, if the screen width is less than 768px I'll set a variable to 1. With PHP I'll check against that variable and echo accordingly.

answered Sep 30 '13 at 03:31

DT.DTDG

765
1
13
31

score 0 · Answer 3 · answered Sep 30 '13 at 03:33

0

It would be so much easier and cleaner not to rely on PHP at all to generate your slider.

Put a container element at the place you want the slider to appear in the page:

<div id="slider-ct"></div>

Then generate your slider using JavaScript (obvioulsy you could organize your code into modules, but that's just an example):

$(function () {
    var $sliderCt = $('#slider-ct');

    if ($(window).width() < 768) {
        $sliderCt.html('mobile slider');
        return;
    }

    $sliderCt.html('desktop slider');

});

answered Sep 30 '13 at 03:33

plalx

42,889
6
74
90

The issue is that the slider is dynamic. If I then add more images to the slider I'll have to update the output HTML each time. – DT.DTDG Sep 30 '13 at 03:36
@DT.DTDG, Not an issue, you can just encode the images array as JSON and output it in the document. Then you perform the same logic client-side that you were performing server-side to generate the slider ;) – plalx Sep 30 '13 at 03:41
@DT.DTDG Did you understand what I meant? – plalx Sep 30 '13 at 04:54

score -1 · Answer 4 · answered Sep 30 '13 at 03:16

-1

This line is why.

"<?php echo do_shortcode("[mobile-slider]"); ?>"

You need to either escape the interpreter, or you need to change your string concatentation to use ' in place of " somewhere.

answered Sep 30 '13 at 03:16

Ohgodwhy

49,779
11
80
110

thank you. I have updated my question as well without the use of `document.write` - maybe that will shed some light on this frustrating issue? – DT.DTDG Sep 30 '13 at 03:17
Also @Ohgodwhy I should mention that I have used single quotes in the shortcode and whilst it works I still have the "unterminated string literal" error and code displayed on the page. – DT.DTDG Sep 30 '13 at 03:21
Sure! ` //line break here
//line break here
– DT.DTDG Sep 30 '13 at 03:35

Document.write errors because of line break?

4 Answers4