Skip to main content
2 of 3
added 42 characters in body
ILS
  • 73
  • 4

Navigation script and template

Overview:

I'm using the following page template and scripts for navigation. I use a single page that loads menus and context content, and then use ajax or GET variable to load main-div's content, by passing $p variable to a php switch. Browser history is handled whith pushState function.

Main page:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div id="main-div"> 
<?php

if (isset($_GET['p'])) {
    $p = $_GET['p'];
    
} else {
    $p = "main";
}


require_once("assets/switch.php");

?>
    </div>

    <script>      
    // Define state on first load
    function defineState() {
            "use strict";
            window.history.replaceState("<?php echo $p ?>", "", "");
        }   
    window.onload = defineState;
    
    
    function navegacion(dashboard, history) {
        
       "use strict";
       var urlPath = dashboard;
       var xmlhttp;
       var ActiveXObject;
        
       if (window.XMLHttpRequest) {
           // code for IE7+, Firefox, Chrome, Opera, Safari
           xmlhttp = new XMLHttpRequest();
       } else {
           // code for IE6, IE5
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
       }
       xmlhttp.onreadystatechange = function() {
           if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
                
                window.scrollTo(0, 0);
                
                //document.title = "TITLE";
                
                document.getElementById("main-div").innerHTML = xmlhttp.responseText;
                
                if(history !== 1) {
                    window.history.pushState(dashboard, "", "index.php?p="+urlPath);
                }
                        
           }
       };
       xmlhttp.open("POST","assets/ajaxapi.php", true);
       xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
       xmlhttp.send("dashboard="+dashboard);
    
    }
    
    // Allows for back and forward browswe buttons
    
    window.onpopstate = function(e){
    "use strict";
    if(e.state){
        navegacion(e.state, 1);
    }
    };  
    
    
    </script>
    
  </body>
</html>

ajaxapi.php:

<?php
if (isset($_POST['dashboard'])) {
    $p = $_POST['dashboard'];
    
} else {
    $p = NULL;
}

require_once("./switch.php");

Could there be any performance or error issues with this code, or how could this script be enhanced?

Thanks.

ILS
  • 73
  • 4