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
Jake White
41,730 PointsWeird Issue with PHP
Im currently building a php e-commerce store similar to the php shirts commerce store. My store will offer still designs, print designs, and other graphics. On my homepage, I have a slider that features the 4 newest products in each category.
I had everything working fine until I did some refactoring and created the get_products_recent function(I renamed it though for my site). Since doing the refactoring, the slider has now broken.
Ive only done the coding for the stills and prints as of right now. The code for the stills works fine on its own and the code for the prints works fine on its own, but when they are put in the slider, it breaks.
Here is the code.
My get_recent_stills function:
function get_recent_stills(){
$recent = array();
$all = get_all_stills();
$total_products = count($all);
$position = 0;
foreach($all as $still) {
$position = $position + 1;
if ($position < 5) {
$recent[] = $still;
}
}
return $recent;
};
And the get_recent_prints function:
function get_recent_prints(){
$recent2 = array();
$allprint = get_all_prints();
$total_products2 = count($allprint);
$position = 0;
foreach($allprint as $print) {
$position = $position + 1;
if ($position < 5) {
$recent2[] = $print;
}
}
return $recent2;
};
The slider slides divs on click. Here are how the stills and prints are put into the slider:
<div class="slide">
<h2>Newest Stills</h2>
<?php include('inc/still.php');
$recent = get_recent_stills();?>
<ul class="newestProducts">
<?php
$list_view_html = "";
foreach($recent as $still) {
$list_view_html = $list_view_html . get_list_view_html($still);
}
echo $list_view_html;
?>
</ul>
</div>
<div class="slide">
<h2>Newest Prints</h2>
<?php include('inc/print.php');
$recent2 = get_recent_prints();?>
<ul class="newestProducts">
<?php
$list_view_html2 = "";
foreach($recent2 as $print) {
$list_view_html2 = $list_view_html2 . get_list_view_html2($print);
}
echo $list_view_html2;
?>
</ul>
</div>
Like I said though, if you do just the Newest Stills div or just the Newest Prints div, they work fine. But when put together it breaks the homepage.
Any help would be nice.
6 Answers
Jake White
41,730 PointsThanks for trying to help Randy Hoyt . I actually figured it out. It was the php files. In my still.php, print.php, and graphic.php I had the get_products_search() function. I needed to rename them as get_stills_search, get_prints_search, and get_graphic_search. Once I renamed them, my homepage was working fine again.
Randy Hoyt
Treehouse Guest TeacherIt sounds like the problem is in the HTML/JavaScript for the slider. Can you send a link to a public web address with this code?
As a general practice, I would recommend digging into the HTML that your PHP code outputs to see the problem there. Using your browser's developer tools, look in the JavaScript console: I suspect you might have a JavaScript error there. Take a look at the HTML when it was working and compare that to the HTML you have now; it can be very confusing to try to troubleshoot JavaScript interacting with HTML being dynamically generated by PHP all at once. Try to break it down into the pieces. I suspect the HTML is not correct, which is easier to see when you are looking at the final output than when you are looking at a PHP foreach loop.
Jake White
41,730 PointsHere is the javascript code for the slider
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 944;
var slides = $('.slide');
var numberOfSlides = slides.length;
// Remove scrollbar in JS
$('#slideshow').css('overflow', 'hidden');
// Wrap all .slides with #slideInner div
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'left',
'width' : slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Insert left and right arrow controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl">Move left</span>')
.append('<span class="control" id="rightControl">Move right</span>');
// Hide left arrow control on first load
manageControls(currentPosition);
// Create event listeners for .controls clicks
$('.control')
.bind('click', function(){
// Determine new position
currentPosition = ($(this).attr('id')=='rightControl')
? currentPosition+1 : currentPosition-1;
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
});
});
// manageControls: Hides and shows controls depending on currentPosition
function manageControls(position){
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() }
else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() }
else{ $('#rightControl').show() }
}
});
The html code is this
<div id="latest">
<div class="slidshowContainer">
<div class="container">
<div id="slideshow">
<div class="slide">
<h2>Newest Stills</h2>
<?php include('inc/still.php');
$recent = get_recent_stills();?>
<ul class="newestProducts">
<?php
$list_view_html = "";
foreach($recent as $still) {
$list_view_html = $list_view_html . get_list_view_html($still);
}
echo $list_view_html;
?>
</ul>
</div>
<div class="slide">
<?php include('inc/print.php'); ?>
<?php $recent2 = get_recent_prints(); ?>
<h2>Newest Prints</h2>
<ul class="newestProducts">
<?php
$list_view_html2 = "";
foreach($recent2 as $print) {
$list_view_html2 = $list_view_html2 . get_list_view_html2($print);
}
echo $list_view_html2;
?>
</ul>
</div>
<div class="slide">
<?php include('inc/graphic.php'); ?>
<?php $recent3 = get_recent_graphics(); ?>
<h2>Newest Graphics</h2>
<ul class="newestProducts">
<?php
$list_view_html3 = "";
foreach($recent3 as $print) {
$list_view_html3 = $list_view_html3 . get_list_view_html3($graphic);
}
echo $list_view_html3;
?>
</ul>
</div>
</div>
</div>
</div>
</div>
I used the developer tools to try to see whats happening and this is what it shows
<div class="slide">
<h2>Newest Stills</h2>
<ul class="newestProducts">
<li class='showcase'><a href="stillpage.php?id=ALightintheDarkness"><img src="Stills/Topics/ALightintheDarkness/AlightintheDarkness(16-9).jpg" alt="A Light in the Darkness"><p class="product_name">A Light in the Darkness</p></a></li><li class='showcase'><a href="stillpage.php?id=MensLeadership1"><img src="Stills/Special Days/Mens Leadership/leadership1(16-9).jpg" alt="Mens Leadership Night"><p class="product_name">Mens Leadership Night</p></a></li><li class='showcase'><a href="stillpage.php?id=WhatisBiblicalWorship"><img src="Stills/Sermons/Series/WhatisBiblicalWorship/WhatisBiblicalWorship(16-9).jpg" alt="What is Biblical Worship"><p class="product_name">What is Biblical Worship</p></a></li><li class='showcase'><a href="stillpage.php?id=Wheredoesyouridentity"><img src="Stills/Sermons/Series/Wheredoesyouridentity/Wheredoesyouridentity(16-9).jpg" alt="Where Does Your Identity Come From"><p class="product_name">Where Does Your Identity Come From</p></a></li>
</ul>
</div>
<div class="slide">
So the code shows the first set and then break as soon as the browser gets to
<?php include('inc/print.php'); ?>
If I remove the
<?php include('inc/print.php'); ?>
<?php $recent2 = get_recent_prints(); ?>
and the
<?php include('inc/graphic.php'); ?>
<?php $recent3 = get_recent_graphics(); ?>
the code reflects
<div class="slide">
<h2>Newest Prints</h2>
<ul class="newestProducts">
</ul>
</div>
<div class="slide">
<h2>Newest Graphics</h2>
<ul class="newestProducts">
</ul>
</div>
Im sorry that I cant link to a public web address. Im working on this in my localhost.
Randy Hoyt
Treehouse Guest TeacherIt's nearly impossible to scan through this much code someone else has written and identify the problem. It's the kind of problem that really has to be viewed in a browser. Is there any way you can post it somewhere or get at least the HTML/JavaScript it working on CodePen or something?
Jake White
41,730 PointsSorry about that Randy. I set up just the home page with issues by itself here http://www.teamalabaster.com/testing/
To see how it should be looking you can go here www.beta.teamalabaster.com
The beta.teamalabaster.com site is using the old code I had.
Jake White
41,730 PointsThe site site that is broken also won't show the images because I didn't upload the photos to that. It would have taken too long. So the broken image links aren't the problem. It's the slider itself
Randy Hoyt
Treehouse Guest TeacherCool. It looks like the page is missing the rhinoslider.css file. Can you upload that into the /testing/ folder?
Also, can you tell me which version of the PHP code you are using here? I see one unordered list tag with two list items in it. Is that correct?