Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

PHP

Posted by San Yuk Cheng
San Yuk Cheng
Courses Plus Student 1,486 Points

Integrating PHP with Javascript

Hi, I have 2 Javascripts I need to load, and so I used the PHP IF else statement. However, only the first Javascript (if )would load, but not the second one (else). It would be highly appreciated if anyone could help! Thanks!!!

<?php if($pageTitle="Menu") {?>

    <!-- jQuery library -->
    <script type="text/javascript" src = "js/jquery-1.4.min.js"></script>
    <script type="text/javascript" src = "js/jquery.easing-1.3.js"></script>

    <!-- iosSlider plugin -->
    <script src = "js/jquery.iosslider.min.js"></script>

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

            $('.iosSlider').iosSlider({
                scrollbar: true,
                snapToChildren: true,
                desktopClickDrag: true,
                scrollbarLocation: 'top',
                scrollbarMargin: '10px 10px 0 10px',
                scrollbarBorderRadius: '0',
                responsiveSlideWidth: true,
                navSlideSelector: $('.iosSliderButtons .button'),
                infiniteSlider: true,
                startAtSlide: '1',
                onSlideChange: slideContentChange,
                onSlideComplete: slideContentComplete,
                onSliderLoaded: slideContentLoaded
            });

            function slideContentChange(args) {

                /* indicator */
                $(args.sliderObject).parent().find('.iosSliderButtons .button').removeClass('selected');
                $(args.sliderObject).parent().find('.iosSliderButtons .button:eq(' + (args.currentSlideNumber - 1) + ')').addClass('selected');

            }

            function slideContentComplete(args) {

                if(!args.slideChanged) return false;

                /* animation */
                $(args.sliderObject).find('.text1, .text2').attr('style', '');

                $(args.currentSlideObject).children('.text1').animate({
                    right: '100px',
                    opacity: '1'
                }, 400, 'easeOutQuint');

                $(args.currentSlideObject).children('.text2').delay(200).animate({
                    right: '50px',
                    opacity: '1'
                }, 400, 'easeOutQuint');

            }

            function slideContentLoaded(args) {

                /* animation */
                $(args.sliderObject).find('.text1, .text2').attr('style', '');

                $(args.currentSlideObject).children('.text1').animate({
                    right: '100px',
                    opacity: '1'
                }, 400, 'easeOutQuint');

                $(args.currentSlideObject).children('.text2').delay(200).animate({
                    right: '50px',
                    opacity: '1'
                }, 400, 'easeOutQuint');

                /* indicator */
                $(args.sliderObject).parent().find('.iosSliderButtons .button').removeClass('selected');
                $(args.sliderObject).parent().find('.iosSliderButtons .button:eq(' + (args.currentSlideNumber - 1) + ')').addClass('selected');

            }

        });
    </script>
    <?php } 
    elseif{ ?> 


        <script type="text/javascript" src="js/jquery.pikachoose.min.js"></script>
        <script language="javascript">
        $(document).ready(function (){
            $("#pikame").PikaChoose();
        });
        </script>

        <?php } ?>

6 Answers

Andrew Whitfield
Andrew Whitfield
5,239 Points
Andrew Whitfield
Andrew Whitfield
5,239 Points

Hi, your code uses

<?php if($pageTitle='Menu') { ?>

That's 1 =.

Swap your code around to do this:

<?php if('Menu' == $pageTitle) { ?>

There are 2 reasons. If you are using a variable, you will make fewer mistakes if you put the variable on the right hand side of a double equals and also, it should be a comparison I believe? The = is making sure the IF is always true.

San Yuk Cheng
PLUS
San Yuk Cheng
Courses Plus Student 1,486 Points
San Yuk Cheng
San Yuk Cheng
Courses Plus Student 1,486 Points

Hmm.. I just switched swapped the code around, and fixed ==, but it's still not working.... Here's what it says on console.

Uncaught ReferenceError: jQuery is not defined Uncaught ReferenceError: $ is not defined event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

Riley Hilliard
PLUS
Riley Hilliard
Courses Plus Student 17,771 Points
Riley Hilliard
Riley Hilliard
Courses Plus Student 17,771 Points

Andrew Whitfield is part of the way there, but there is a little more to it.

He is correct that there needs to be 2 equals signs for it to evaluate it correctly like so:

             <?php if($pageTitle == 'Menu') { ?>

but you also are running a elseif statement with no if parameters to be evaluated 

    <?php } elseif { ?>

for this to be correct you need it to have a condition, or switch it to a standard 'else' statement like so:

    <?php } elseif ($another_condition == 'something_else'){ ?> 
         // Stuff 
    <?php } ?>

or

    <?php } else { ?> 
         // Stuff 
    <?php } ?>
Riley Hilliard
Riley Hilliard
Courses Plus Student 17,771 Points

Also I am not entirely sure what you are doing with your code, however I would guess that you want to load jQuery regardless of the other code. If that is the case (it looks like that is one of the issues you are having in your error code response to Andrew) declare jQuery before the php if statements: 

    <!-- jQuery library -->
    <script type="text/javascript" src = "js/jquery-1.4.min.js"></script>
    <script type="text/javascript" src = "js/jquery.easing-1.3.js"></script>
    <?php if($pageTitle == "Menu") {?>
        // Stuff if Page Title var is equal to menu
    <?php } else { ?> 
         // Other Stuff if page title var is not equal to menu
    <?php } ?>
San Yuk Cheng
PLUS
San Yuk Cheng
Courses Plus Student 1,486 Points
San Yuk Cheng
San Yuk Cheng
Courses Plus Student 1,486 Points

I have already tried your method, but it seems to be having the same problem... :(

<script type="text/javascript" src="js/jquery.pikachoose.min.js"></script> <?php if("Hunan Ranch: Menu"==$pageTitle) {?> <!-- jQuery library --> <script type="text/javascript" src = "../js/jquery-1.4.min.js"></script> <script type="text/javascript" src = "../js/jquery.easing-1.3.js"></script>

    <!-- iosSlider plugin -->
    <script src = "js/jquery.iosslider.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            $('.iosSlider').iosSlider({
                scrollbar: true,
                snapToChildren: true,
                desktopClickDrag: true,
                scrollbarLocation: 'top',
                scrollbarMargin: '10px 10px 0 10px',
                scrollbarBorderRadius: '0',
                responsiveSlideWidth: true,
                navSlideSelector: $('.iosSliderButtons .button'),
                infiniteSlider: true,
                startAtSlide: '1',
                onSlideChange: slideContentChange,
                onSlideComplete: slideContentComplete,
                onSliderLoaded: slideContentLoaded
            });

            function slideContentChange(args) {

                /* indicator */
                $(args.sliderObject).parent().find('.iosSliderButtons .button').removeClass('selected');
                $(args.sliderObject).parent().find('.iosSliderButtons .button:eq(' + (args.currentSlideNumber - 1) + ')').addClass('selected');

            }

            function slideContentComplete(args) {

                if(!args.slideChanged) return false;

                /* animation */
                $(args.sliderObject).find('.text1, .text2').attr('style', '');

                $(args.currentSlideObject).children('.text1').animate({
                    right: '100px',
                    opacity: '1'
                }, 400, 'easeOutQuint');

                $(args.currentSlideObject).children('.text2').delay(200).animate({
                    right: '50px',
                    opacity: '1'
                }, 400, 'easeOutQuint');

            }

            function slideContentLoaded(args) {

                /* animation */
                $(args.sliderObject).find('.text1, .text2').attr('style', '');

                $(args.currentSlideObject).children('.text1').animate({
                    right: '100px',
                    opacity: '1'
                }, 400, 'easeOutQuint');

                $(args.currentSlideObject).children('.text2').delay(200).animate({
                    right: '50px',
                    opacity: '1'
                }, 400, 'easeOutQuint');

                /* indicator */
                $(args.sliderObject).parent().find('.iosSliderButtons .button').removeClass('selected');
                $(args.sliderObject).parent().find('.iosSliderButtons .button:eq(' + (args.currentSlideNumber - 1) + ')').addClass('selected');

            }

        });
    </script>

    <?php } 
    elseif("Chinese Cuisine and Sushi"==$pageTitle){ ?> 



        <script language="javascript">
        $(document).ready(function (){
            $("#pikame").PikaChoose();
        });
        </script>

        <?php } ?>
Riley Hilliard
PLUS
Riley Hilliard
Courses Plus Student 17,771 Points
Riley Hilliard
Riley Hilliard
Courses Plus Student 17,771 Points

the next things to check are, are the page titles actually exactly what you are checking for? somewhere on your page write a 

<?php
            echo $pageTitle;
            // This will print the pageTitle variable to the page so you can be sure you are checking for the right condition
?>

if this condition is not exactly correct, it will not evaluate your if /ifelse properly. If that is still not working, then you likely have an issue with your JavaScript, not the PHP. also i was noticing your script format is a little strange. 

<script src  =  "js/jquery.iosslider.min.js"></script>
<!-- should be -->
<script src="js/jquery.iosslider.min.js"></script>

Make sure that your HTML format is correct.

If the issue is your javascript, you can check out what is happening in your browser console. Chrome has the chrome dev tools, and firefox has firebug. The console tab in both of these will give you an error code as to what is going on. Without a posting of the entire code of the page, I cannot help debug this further, but my guess is that is is either a var check issue, or a JavaScript issue.

Shawn Gregory
PLUS
Shawn Gregory
Courses Plus Student 40,672 Points
Shawn Gregory
Shawn Gregory
Courses Plus Student 40,672 Points

Hello,

I don't know if this will help or anything, but try to separate your code types by having your PHP in one file and JavaScript in other files and include them via the script tag using PHP.

if($pageTitle == "Hunan Ranch: Menu") {
   echo '<script src="js-file-1.js"></script>';
} else {
   echo '<script src="js-file-2.js"></script>';
}

The first file will have all the JavaScript that you have listed above if true and file 2 is for the other. Try it and see if separating the two languages will fix the problem.

Cheers!