I finished a course on how to create a youtube clone course from Udemy. Everything went fine, except for a few lousy bugs that are seriously annoying me for the last 3 days. the one in question is the bootstrap tabs that are being used for the user profile info page,(youtube's user channel page). The profile info page has a bootstrap tab section for loading video's uploaded by the user, and their personal information, like how many views in total etc...
I've been using bootrap for awhile now, and everything works fine, never had any problems copying code from their site, or stackoverflow as well. I would consider myself very confident in copy and paste programming for the last 25 years. So, what's happening is, as soon as I copied over the bootstrap javascript code snippet, then ran it to see if it was ok, it didn't work, this with no code attached to it at all, so I knew something was up. However, I pasted all the Udemy's Instructor code in for the tab section, and it never worked. Thanks to StackOverflow, I managed to get it functioning properly. So far I got all the videos to load from tab1, and the info from tab2. However, when clicking back 2 tab1, it loads the users info again. I've combed through everything I can get my hands on from here, and bootstrap, and nothing is working. So I included the 2 public functions that handle the tabs and loading of the content here. I need a fresh pair of eyes on these two functions, because I can't figured it out, I know that it may be something simple, or it may be something buggy with bootstrap 5. I'm not sure which at this point...
public function createTabsSection() {
return "<ul class='nav nav-tabs' id='profileTabs' role='tablist'>
<li class='nav-item' role='presentation'>
<a class='nav-link show active' id='videos-tab' data-bs-toggle='tab'
data-bs-target='#video' role='tab' aria-controls='videos' aria-selected='true'>VIDEOS</a>
</li>
<li class='nav-item' role='presentation'>
<a class='nav-link' id='about-tab' data-bs-toggle='tab' data-bs-target='#about' role='tab'
aria-controls='about' aria-selected='false'>ABOUT</a>
</li>
</ul>";
}
public function createContentSection() {
$videos = $this->profileData->getUsersVideos();
if(sizeof($videos) > 0) {
$videoGrid = new VideoGrid($this->con, $this->userLoggedInObj);
$videoGridHtml = $videoGrid->create($videos, null, false);
}
else {
$videoGridHtml = "<span>This user has no videos</span>";
}
$aboutSection = $this->createAboutSection();
return "<div class='tab-content channelContent'>
<div class='tab-pane fade in show active' id='videos' role='tabpanel' aria-labelledby='videos-tab'>
$videoGridHtml
</div>
<div class='tab-pane fade in' id='about' role='tabpanel' aria-labelledby='about-tab'>
$aboutSection
</div>
</div>";
}