CODEWITHSUNDEEP
javascriptphpwordpressweb
Sander
Sander

Reputation: 13

Javascript from PHP (wordpress)

I created a new WordPress theme. When I moved it into an IIS webserver it fails.

Here's my code:

<?php get_header(); ?>
<h2><?php the_title();?></h2>
<div class="infoBox" id="infoTxt">
    <?php
        if(get_the_title() == 'Home'){
        $page = get_page_by_title( get_the_title());
        $Pagecontent = apply_filters('the_content', $page->post_content); 
        $ContentArray = explode(";",$Pagecontent);
        echo $ContentArray[count($ContentArray) -1];    
        <script type="text/javascript">
            var info = <?php echo json_encode($ContentArray) ?>;
            document.getElementById('infoTxt').innerHTML = info[1];
            setInterval(function()
            {
                var i = Math.round((Math.random()) * info.length);
                if (i == info.length) --i;
                   document.getElementById('infoTxt').innerHTML = info[i];
            }, 5 * 1000); 
            </script>               
<?php
    }
    else{
        $page = get_page_by_title( get_the_title());
        $content = apply_filters('the_content',            $page->post_content); 
            $InfoboxStr = substr($content, 0, strpos($content, '@:'));
        echo $InfoboxStr;       
    }

?>
</div><!--End InfoTxt-->
<div id="Flagbox">
<ul style="list-style-type:none;">
    <li><a href="www.google.dk"><img class="flagContainer" alt="English" src="<?php bloginfo('stylesheet_directory'); ?>/img/GbFlag.png""/></a></li>
    <li><a href="www.google.dk"><img class="flagContainer" alt="Deutsch" src="<?php bloginfo('stylesheet_directory'); ?>/img/GmFlag.png""/></a></li>
    <li><a href="www.google.dk"><img class="flagContainer" alt="French" src="<?php bloginfo('stylesheet_directory'); ?>/img/FrFlag.png""/></a></li>
</ul>
</div> <!-- end Flag Box-->
<div style="margin-bottom:25%;">
</div>
<?php get_footer(); ?>

It is because of the JavaScript but I have some problem fixing this, I have first of all tried to echo the JavaScript, but I then got a problem with the first line of the script which is: var info = <?php echo json_encode($ContentArray) ?>;

When I ex. tried to 

Echo 'var info = ' + echo json_encode($ContentArray) ?> + ";"

I just gets an http 500-error. Do any of you have an idea of what I can try to fix my problem

Upvotes: 1

Views: 99

Answers (2)

Marcin
Marcin

Reputation: 1494

If you want to use the <Script> tag, you need to close the php tag, in here:

echo $ContentArray[count($ContentArray) -1];    
        <script type="text/javascript">

So it should look like that:

?>
<script>
[..]
</script>
<?php

The best practice it that you should place the JS either in at the top or bottom of your file or in another file.

Upvotes: 1

Poiz
Poiz

Reputation: 7617

The Problem is that you did not close the PHP Tags before entering the <Script> Block... In other words; you were still in PHP Mode when you wrote your Javascript as if you were writing it on a normal HTML Document. Sure you can output Javascript via PHP but then, you may have to build that up.

Here you go with something that might assist:::

<?php get_header(); ?>
    <h2><?php the_title();?></h2>
    <div class="infoBox" id="infoTxt">
        <?php
            if(get_the_title() == 'Home'){
                $page           = get_page_by_title( get_the_title());
                $Pagecontent    = apply_filters('the_content', $page->post_content);
                $ContentArray   = explode(";",$Pagecontent);
                echo $ContentArray[count($ContentArray) -1]; 
        ?>

        <script type="text/javascript">
            var info    = <?php echo json_encode($ContentArray) ?>;
            document.getElementById('infoTxt').innerHTML = info[1];
            setInterval(function() {
                var i = Math.round((Math.random()) * info.length);
                if (i == info.length){ --i;  } 
                document.getElementById('infoTxt').innerHTML = info[i];
                }, 5 * 1000);
        </script>
        <?php
        }else{
            $page = get_page_by_title( get_the_title());
            $content = apply_filters('the_content',            $page->post_content);
            $InfoboxStr = substr($content, 0, strpos($content, '@:'));
            echo $InfoboxStr;
        }   
        ?>
        </div><!--End InfoTxt-->
        <div id="Flagbox">
            <ul style="list-style-type:none;">
            <li><a href="www.google.dk"><img class="flagContainer" alt="English" src="<?php bloginfo('stylesheet_directory'); ?>/img/GbFlag.png""/></a></li>
        <li><a href="www.google.dk"><img class="flagContainer" alt="Deutsch" src="<?php bloginfo('stylesheet_directory'); ?>/img/GmFlag.png""/></a></li>
        <li><a href="www.google.dk"><img class="flagContainer" alt="French" src="<?php bloginfo('stylesheet_directory'); ?>/img/FrFlag.png""/></a></li>
        </ul>
        </div> <!-- end Flag Box-->
        <div style="margin-bottom:25%;">
            </div>
    <?php get_footer(); ?>

Upvotes: 0

Related Questions