how to convert jquery ajax if else statement to switch statement

Question

i write a jquery ajax script to load pages dynamically by ajax without reloading the page. below is my navigation menu that has 5 links in it.

 <nav>
 <ul id='menu' class="menu-items">
 <li><a href="#Browse_Page1" class="albums active" id="page1-link"><i class="arcd-archive"></i></br>Browse</a></li>
 <li><a href="#Top_albums_Page1" class="pages" id="page2-link"><i class="arcd-music97"></i></br>Top albums</a></li>
 <li><a href="#Top_artists_Page1" class="albums" id="page3-link"><i class="arcd-microphone52"></i></br>Top artists</a></li>
 <li><a href="#Top_lists_Page1" class="pages" id="page4-link"><i class="arcd-numbered8"></i></br>Top lists</a></li>
 <li><a href="#Charts_Page1" class="pages" id="page4-link"><i class="arcd-rising9"></i></br>Charts</a></li>
 </ul>
 </nav>

and this is the jquery ajax that loads first two pages of the navigation menu "#Browse_Page1" "#Top_albums_Page1" respectively.

 <script>
 $(function() {
 $('header nav a').on('click', function() {
 var linkClicked = $(this).attr('href');
 if(linkClicked.indexOf('Browse_Page') == true)
 {
     var $Browse_PageRoot = linkClicked.replace('#Browse_Page', '');
     if (!$(this).hasClass("active")) {
 $("header nav a").removeClass("active");
 $(this).addClass("active");}
 $('#loading').css('visibility','visible');
     $.ajax({
        type: "POST",
        url: "load.php",
        data: 'Browse_Page='+$Browse_PageRoot,

        dataType: "html",
        success: function(msg){

            if(parseInt(msg)!=0)
            {
                $('#main-content').html(msg);
                $('#loading').css('visibility','hidden');
                $('#main-content section').hide().fadeIn();
            }
        }

      });
     }
    else
    {
   var $Top_albums_PageRoot = linkClicked.replace('#Top_albums_Page',  ''); 
     if (!$(this).hasClass("active")) {
    $("header nav a").removeClass("active");
    $(this).addClass("active");} 
    $('#loading').css('visibility','visible');      
     $.ajax({
            type: "POST",
            url: "load2.php",
            data: 'Top_albums_Page='+$Top_albums_PageRoot,

            dataType: "html",
            success: function(msg){

                if(parseInt(msg)!=0)
                {
                    $('#main-content').html(msg);
                    $('#loading').css('visibility','hidden');
                    $('#main-content section').hide().fadeIn();
                }
            }            
          });
       }

     });

   });
  </script>

finally these are two php files that used by above jquery ajax function "load.php" and "load2.php"

  <!--load.php-->
  <?php
  if(!$_POST['Browse_Page']) ;
  $page = (int)$_POST['Browse_Page'];
  if(file_exists('Browse/Browse_Page'.$page.'.html'))
  echo file_get_contents('Browse/Browse_Page'.$page.'.html');
  else echo 'There is no such page!';
  ?>

  <!--load2.php-->
  <?php
  if(!$_POST['Top_albums_Page']) die("0");
  $page = (int)$_POST['Top_albums_Page'];
  if(file_exists('Top-albums/Top_albums_Page'.$page.'.html'))
  echo file_get_contents('Top-albums/Top_albums_Page'.$page.'.html');
  else echo 'There is no such page!';
  ?>

and my site folders structure as follows.

• Browse
• Top-albums
• Top-artists
• Top-lists
• Charts

so my problem is that as i said above jquery ajax function loads two different pages from two different directories and it works fine but i have 5 page links in nav menu and all pages are in different directories, 5 different directories! but this function only supports two directories. i tried it to add more if else statements to full fill my desire but it didn't work. since i am new to jquery maybe i am doing it wrongly! or is there any way to convert it to switch statement? any help will greatly appreciated. thanks

Answer 1

That's actually quite horrible, you should strive to send data that can be easily read and figured out on the serverside, without the need to repeat the code for each dataset.

In other words, rewrite the javascript to something like this

$(function () {
    $('header nav a').on('click', function () {
        var linkClicked = $(this).attr('href');
        var data = {
            page      : linkClicked.replace(/\D/g, ''),
            directory : linkClicked.replace(/(_Page(.*)|#)/g,'')
        }

        $("header nav a").removeClass("active");
        $(this).addClass("active");
        $('#loading').css('visibility', 'visible');

        $.post('load.php', data, function(msg) {
            $('#main-content').html(msg);
            $('#loading').css('visibility', 'hidden');
            $('#main-content section').hide().fadeIn();
        }, 'html');
    });
});

Now you're sending data that looks something like

{
    page      : "1",
    directory : "Browse"
}

And on the serverside, you'd do the switching to get the content in one single PHP file

<?php

    $page = filter_var( $_POST['page'], FILTER_VALIDATE_INT);
    $dir  = filter_var( $_POST['directory'], FILTER_SANITIZE_STRING);

    if ( $page !== false && $dir !== false ) {

        $link = $dir . '/' . $dir . '_Page' . $page . '.html';

        if ( file_exists( $link ) ) {
            echo file_get_contents( $link );
        } else {
            echo 'There is no such page!';
        }
    }
?>