Dynamic javascript that is echoed by php doesn't work

Question

I'm echoing a javascript snippet with php. the problem is that when I load that snippet dynamically, it doesn't work. but when I put generated javascript right in the place and comment the php, it works.

CODE :

 <script type="text/javascript">
        $(document).ready(function(){
            $.supersized({

                // Functionality
                slideshow               :   1,          // Slideshow on/off
                autoplay                :   1,          // Slideshow starts playing automatically
                start_slide             :   1,          // Start slide (0 is random)
                stop_loop               :   0,          // Pauses slideshow on last slide
                random                  :   0,          // Randomize slide order (Ignores start slide)
                slide_interval          :   5000,       // Length between transitions
                transition              :   2,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                transition_speed        :   600,        // Speed of transition
                new_window              :   1,          // Image links open in new window/tab
                pause_hover             :   0,          // Pause slideshow on hover
                keyboard_nav            :   1,          // Keyboard navigation on/off
                performance             :   1,          // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
                image_protect           :   1,          // Disables image dragging and right click with Javascript

                // Size & Position
                min_width               :   0,          // Min width allowed (in pixels)
                min_height              :   0,          // Min height allowed (in pixels)
                vertical_center         :   1,          // Vertically center background
                horizontal_center       :   1,          // Horizontally center background
                fit_always              :   0,          // Image will never exceed browser width or height (Ignores min. dimensions)
                fit_portrait            :   1,          // Portrait images will not exceed browser height
                fit_landscape           :   0,          // Landscape images will not exceed browser width

                // Components
                slide_links             :   'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
                thumb_links             :   0,          // Individual thumb links for each slide
                thumbnail_navigation    :   0,          // Thumbnail navigation
                slides                  :   [           // Slideshow Images
                    <?php
                        $loop = new WP_Query('post_type=slide');
                        if($loop->have_posts()):while($loop->have_posts()):$loop->the_post();
                    ?>
                    {
                        image : '<?php the_field('slide_pic'); ?>',
                        title : '<h2><?php the_content(); ?></h2>',
                        thumb : '',
                        url : ''
                    },

                    <?php endwhile;endif;wp_reset_query(); ?>
                ],

                // Theme Options
                progress_bar            :   0,          // Timer for each slide
                mouse_scrub             :   0

            });
        });
    </script>

Generated javascript:

<script type="text/javascript">
        $(document).load(function(){
            $.supersized({

                // Functionality
                slideshow               :   1,          // Slideshow on/off
                autoplay                :   1,          // Slideshow starts playing automatically
                start_slide             :   1,          // Start slide (0 is random)
                stop_loop               :   0,          // Pauses slideshow on last slide
                random                  :   0,          // Randomize slide order (Ignores start slide)
                slide_interval          :   5000,       // Length between transitions
                transition              :   2,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                transition_speed        :   600,        // Speed of transition
                new_window              :   1,          // Image links open in new window/tab
                pause_hover             :   0,          // Pause slideshow on hover
                keyboard_nav            :   1,          // Keyboard navigation on/off
                performance             :   1,          // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
                image_protect           :   1,          // Disables image dragging and right click with Javascript

                // Size & Position
                min_width               :   0,          // Min width allowed (in pixels)
                min_height              :   0,          // Min height allowed (in pixels)
                vertical_center         :   1,          // Vertically center background
                horizontal_center       :   1,          // Horizontally center background
                fit_always              :   0,          // Image will never exceed browser width or height (Ignores min. dimensions)
                fit_portrait            :   1,          // Portrait images will not exceed browser height
                fit_landscape           :   0,          // Landscape images will not exceed browser width

                // Components
                slide_links             :   'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
                thumb_links             :   0,          // Individual thumb links for each slide
                thumbnail_navigation    :   0,          // Thumbnail navigation
                slides                  :   [           // Slideshow Images
                                        {
                        image : 'http://mahpari.dev/wp-content/uploads/2014/07/image4.jpg',
                        title : '<h2><p>شعار مورد نظر 2</p>
</h2>',
                        thumb : '',
                        url : ''
                    },

                                        {
                        image : 'http://mahpari.dev/wp-content/uploads/2014/07/image1.jpg',
                        title : '<h2><p>شعار مورد نظر 1</p>
</h2>',
                        thumb : '',
                        url : ''
                    },

                                    ],

                // Theme Options
                progress_bar            :   0,          // Timer for each slide
                mouse_scrub             :   0

            });
        });
    </script>

Any ideas?

You're directly dumping text from PHP into a Javascript context, which means you HAVE to make sure you're generating syntactically correct JS code. You should ALWAYS be using json_encode() to do that, so you don't introduce any JS syntax errors and kill the entire code block. — Marc B
– Marc B, Commented Jul 24, 2014 at 19:24
Also, those special characters need to be encoded or Javascript isn't going to like it. Nor does it like multi-line strings. — Chris Baker
– Chris Baker, Commented Jul 24, 2014 at 19:28
@MarcB, why should I use json encode? can you put your snippet of code? — Ramin Omrani
– Ramin Omrani, Commented Jul 24, 2014 at 19:31

idmean · Accepted Answer · 2014-07-24 19:28:51Z

2

The problem seems to be the line breaks. This will produce an error. (SyntaxError: Unexpected EOF)

title : '<h2><p>شعار مورد نظر 2</p>
</h2>',

It should be better like that:

title : '<h2><p>شعار مورد نظر 2</p>\n</h2>',

answered Jul 24, 2014 at 19:28

idmean

15k9 gold badges63 silver badges90 bronze badges

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

2 Comments

Ramin Omrani Over a year ago

if I delete title data, it again doesn't show the image I want to show in slider

idmean Over a year ago

Open your console. Are there any errors? (BTW You shouldn't delete the title but escape the line break.)

Marc B · Accepted Answer · 2014-07-24 19:25:54Z

0

Here, at the end of your "while" loop:

       url : ''
    },   // <--dangling comma
        ],

Internet Explorer is particular harsh on those and will puke with a syntax error.

answered Jul 24, 2014 at 19:25

Marc B

362k44 gold badges433 silver badges508 bronze badges

2 Comments

Ramin Omrani Over a year ago

I've tried this solution but it doesn't work. would you place your json_encode version?

Ramin Omrani Over a year ago

you were right. change your answer to get a tick. :) json version

Collectives™ on Stack Overflow

Dynamic javascript that is echoed by php doesn't work

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related