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

JavaScript

Posted by Derrick Mull
Derrick Mull
18,518 Points

Mobile Drop Down menu not functioning in PHP properly

So the mobile drop down was working perfectly in a separate project, but when I dropped it into a PHP project it just stopped behaving properly.

Now, everytime the link is chosen, it goes to the link, but the drop down doesn't stay on the current page, it jumps back to the first selection available. Making it impossible to actually go to that page.

Thinking that the PHP somewhere is interfering, but I'll be if I can't seem to diagnose the issue... Have some idea's, but... anyways, here's some code.

JS:

 var $select = $("<select></select>");
    $("#menu").append($select);

  $("#menu a").each(function(){
    var $anchor = $(this);
    var $option = $("<option></option>");
    if ($anchor.parent().hasClass('selected')) {
      $option.prop('selected', true);
    }
    $option.val($anchor.attr("href"));
    $option.text($anchor.text());
    $select.append($option);
  });


  $select.change(function(){
    window.location = $select.val();
  });

MENU:

<nav id="menu">

    <ul>
      <?php
          $full_name = $_SERVER['PHP_SELF'];
          $name_array = explode('/',$full_name);
          $count = count($name_array);
          $page_name = $name_array[$count-1];
      ?>

        <li class="<?php echo ($page_name=='index.php')?'active':'';?>"><a href="<?php echo BASE_URL; ?>">About</a></li>
        <li class="<?php echo ($page_name=='diamonds.php')?'active':'';?>"><a href="<?php echo BASE_URL; ?>partials/diamonds.php">Diamonds</a></li>

        <li class="<?php echo ($page_name=='jewelry.php')?'active':'';?>"><a href="<?php echo BASE_URL; ?>partials/jewelry.php">Jewelry</a></li>

        <li class="<?php echo ($page_name=='coin.php')?'active':'';?>"><a href="<?php echo BASE_URL; ?>partials/coin.php">Coin & Bullion</a></li>

        <li class="<?php echo ($page_name=='contact.php')?'active':'';?>"><a href="<?php echo BASE_URL; ?>partials/contact.php">Contact</a></li>


      </ul>

</nav>
Colin Marshall
Colin Marshall
32,861 Points

Can you post up the HTML of the nav from the working project, and also the HTML of the nav produced from the php by doing a view source? We should be able to identify differences between the two to pinpoint the problem.

Derrick Mull
Derrick Mull
18,518 Points

Here is the PHP render:

<!--  THIS HIDES IN MOBILE VIEW
<nav id="menu">
    <ul>   
        <li class="active"><a href="/testing/">About</a></li>
        <li class=""><a href="/testing/partials/diamonds.php">Diamonds</a></li>
        <li class=""><a href="/testing/partials/jewelry.php">Jewelry</a></li>
        <li class=""><a href="/testing/partials/coin.php">Coin &amp; Bullion</a></li>
        <li class=""><a href="/testing/partials/contact.php">Contact</a></li>
     </ul>
-->
<select>
  <option value="/testing/">About</option>
  <option value="/testing/partials/diamonds.php">Diamonds</option>
  <option value="/testing/partials/jewelry.php">Jewelry</option>
  <option value="/testing/partials/coin.php">Coin &amp; Bullion</option>
  <option value="/testing/partials/contact.php">Contact</option>
</select>
</nav>

The other was done in AngularJS... which i've left the project files on another PC, but it's was basically

<nav id="menu">
  <ul>
    <li >
      <a href="#/about">About</a>
    </li>
    <li>
      <a href="#/bullion">Bullion</a>
    </li>
    <li>
      <a href="#/numismatic">Rare Coin</a>
    </li>
     <li><a href="#/jewelry">Jewelry</a></li>
    <li>
      <a href="#/contact">Contact</a>
    </li>
  </ul>
</nav>
Colin Marshall
Colin Marshall
32,861 Points

Instead of dynamically generating the select menu with JavaScript, try to hard code it in there as HTML, and comment out the JavaScript that creates the select menu.

I think what might be happening is when you are generating the select menu, the first item gets selected when you run through the each loop, which is causing it to change the page. If it works as desired when you hard code in the HTML, you could try disabling the select menu to begin with, and then wrapping the select menu generation in a function, and enabling the select menu after it is all created. Like this:

 var $select = $("<select></select>");
 $("#menu").append($select);
$select.attr('disabled','true');

function generateSelectMenu() { 

  $("#menu a").each(function(){
    var $anchor = $(this);
    var $option = $("<option></option>");
    if ($anchor.parent().hasClass('selected')) {
      $option.prop('selected', true);
    }
    $option.val($anchor.attr("href"));
    $option.text($anchor.text());
    $select.append($option);
  });

$select.attr('disabled','false');
}

generateSelectMenu();

  $select.change(function(){
    window.location = $select.val();
  });

Here is the HTML to hard code in to your PHP:

<select>
  <option value="/testing/">About</option>
  <option value="/testing/partials/diamonds.php">Diamonds</option>
  <option value="/testing/partials/jewelry.php">Jewelry</option>
  <option value="/testing/partials/coin.php">Coin &amp; Bullion</option>
  <option value="/testing/partials/contact.php">Contact</option>
</select>