mixing PHP and HTML link not working correctly

user_10335144 0
Viewed 133

I have created a simple php file that looks to see what the value is for $thisPage=NameofCurrentPage, then based on that value, it should fill in a button link content that is relevant to that particular page.

For example, if the page is named Users the value will be $thisPage=Users

, then later on the User page, there is a button for Adding a new user.

It realizes that the endUser is currently on the Users page, and so the "Add New" button will auto fill in "Add new User" in the button title and link.

It does this for each page type the enduser is on, so that if the enduser clicks on the "Assets" page, it will change the "Add New" button to now say "Add Asset" and fill in the appropriate link for that button.

Now that you know what it is supposed to do, I will try and describe the problem.

It works perfectly, except for the first button in the series that I am trying to manipulate in this manner. The first button is not clickable or rather if clicked, or hovered, does nothing. the second button displays the correct name and link if hovered over and will take you to the relevant url if clicked on.

However, if I put a third button in front of the first button, the button that wasn't working before now works, and the one I just placed in the front doesn't work.

I cannot figure out what is causing the first button in the series to not work.

I am not sure if I can properly do a code snippet here since I am using php. Here is a link to an example of it working, except for the first button in the series, The first Button that doesn't work is named "Add Asset":

[https://aitenterprises.com/tracker/asset_items.php]

I will try to do a code snippet below so you can see at least what I have:

contents of /asset_items.php

<!DOCTYPE html>
<?php $thisPage="Assets"; ?>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>AIT Enterprises<?php if ($thisPage!="")
echo " | $thisPage"; ?></title>
<meta name="title" content="AIT Enterprises<?php
if ($thisPage!="") echo " | $thisPage"; ?>" />
<meta name="keywords" 
content="<?php if ($thisPage!="")
echo "$thisPage, "; ?>
AIT Enterprises, asset tracker, assets,
inventory, inventory reports" />
    <meta name="description" content="Asset Tracking system created by AIT Enterprises">
    <meta name="author" content="Joe Sanders">
    <link rel="icon" href="favicon.ico">

 <!-- Bootstrap core CSS -->
 <link href="dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" integrity="sha384-pjaaA8dDz/5BgdFUPX6M/9SUZv4d12SUPF0axWc+VRZkx5xU3daN+lYb49+Ax+Tl" crossorigin="anonymous"></script>   




  <!-- JQUERY -->
  <script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>


<!--  BOOTSTRAP SELECT -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />




    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="dashboard.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
<script>
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
</script>

<style>

    <!-- ********************************HEADER STYLES START******************************** -->
    <?php include 'styles.php';?>
    <!-- ********************************HEADER STYLES END******************************** -->
</style>

<script type="text/javascript">  
        $(window).on('load', function () {  
  
            $('.selectpicker').selectpicker({
             
            });  
  
            // $('.selectpicker').selectpicker('hide');  
        });  
    </script> 





  </head>

    <body>


    <!-- ********************************TOP NAV BAR******************************** -->
    <?php include 'topnav.php';?>
    <!-- ********************************TOP NAV BAR******************************** -->



<!-- ********************************LEFT-NAVBAR SIDE OF PAGE MENU******************************** -->
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            <?php include 'menu.php';?>
          </ul>
        </div><br></div></div>
<!-- ********************************LEFT-NAVBAR SIDE OF PAGE MENU******************************** -->

<!-- ****************BEGINNING OF DATA OUTPUT AREA*********************** -->
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
 <table class="table1">
<tr><td class="td1">
<h3>ASSETS</h3>
</td></tr></table>
</div>


    <!-- ********************************PAGE FILTER BUTTONS NAVIGATION/OPTIONS START******************************** -->
    <?php include 'page_filter_buttons_nav.php';?>
    <!-- ********************************PAGE FILTER BUTTONS NAVIGATION/OPTIONS STOP******************************** -->


<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">

<br>
          <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>Asset ID</th>
                  <th>Description</th>
                  <th>Status</th>
                  <th>Category</th>
                  <th>Assigned To</th>
                  <th></th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><a href="#">W801182XFYN</a></td>
                  <td>Student Chromebook</td>
                  <td>Available</td>
                  <td>Asus Chromebook</td>
                  <td>Jacquiline Newberry</td>
                  <td><a href="#"><button class="button button2">Long Term Assignment</button></a></td>
                  <td><a href="#">View</a> | <a href="#">Delete</a></td>
                </tr>
                <tr>
                  <td><a href="#">W801165CFYN</a></td>
                  <td>Student Macbook</td>
                  <td>Checked Out</td>
                  <td>Student Macbook</td>
                  <td>Saidi Whiteside</td>
                  <td><a href="#"><button class="button button2">Long Term Assignment</button></a></td>
                  <td><a href="#">View</a> | <a href="#">Delete</a></td>
                </tr>
                <tr>
                  <td><a href="#">HPAS1212</a></td>
                  <td>Student Chromebook</td>
                  <td>Available</td>
                  <td>Student Chromebook</td>
                  <td>&nbsp;</td>
                  <td><a href="#"><button class="button button2">Long Term Assignment</button></a></td>
                  <td><a href="#">View</a> | <a href="#">Delete</a></td>
                </tr>
                
              </tbody>
            </table>
          </div>


</div>
<!-- ****************END of DATA OUTPUT AREA***************************** -->
</div>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="dist/js/bootstrap.min.js"></script>
    <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
    <script src="assets/js/vendor/holder.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

Contents of styles.php

.text-muted {
    font-size: small;
}
.text-bold {
font-weight: bold;
    font-size: small;
}
.button {
    background-color: #008CBA; /* Light Blue */
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 11px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
    padding: 6px 10px;
}
.button2 {
    background-color: #008CBA; /* Light Blue */
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 11px;
    margin: 8px 2px;
    cursor: pointer;
    border-radius: 4px;
    padding: 6px 10px;
}
.button2:hover {
    background-color: #008CBA;
    
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 30px 0 rgba(0,0,0,0.19);
    padding: 6px 10px;
} /* Blue */
.button3 {background-color: #f44336;} /* Red */ 
.button4 {background-color: #e7e7e7; color: black;} /* Gray */ 
.button5 {background-color: #555555;} /* Black */
.button6 {
    font-size: 12px;
    padding: 8px 8px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    background-color: #D35324;
    color: white;
    padding: 6px 10px;
}
.button6:hover {background-color: #037BA2;
color: white;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 30px 0 rgba(0,0,0,0.19);
}
.button7 {
    font-size: 12px;
    padding: 8px 8px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    background-color: #008CBA;
    color: white;
}
.button7:hover {background-color: #008CBA;
color: white;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 30px 0 rgba(0,0,0,0.19);
}


td { text-align: left;
     valign="middle";
}
i {
  border: solid white;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 2px;
}

.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
.dropbtn {
    background-color: #008CBA;
    color: white;
    padding: 12px;
    font-size: 12px;
    border: none;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 120px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: #037BA2;
    padding: 6px 6px;
    text-align: center;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #037BA2;
color: white;

}

.dropdown:hover .dropdown-content {display: block; padding-top:3px;
right: 0;
}

.dropdown:hover .dropbtn {background-color: #037BA2;}
input[id=Search], select {
    
    padding: 8px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[value=Apply] {
    font-size: 12px;
    padding: 8px 8px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    background-color: #D35324;
    color: white;
}
input[value=Reset] {
    font-size: 12px;
    padding: 8px 8px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    background-color: #D35324;
    color: white;
}

input[value=Apply]:hover {
    background-color: #C44E22;
}
input[value=Reset]:hover {
    background-color: #C44E22;
}
table.table1, th.th1, td.td1 {
    width: 100%;
    color: white;
    font-size: 16px;
    padding-left: 10px;
    background-color: #008CBA;
    
}
.tooltip {
    
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 220px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 50%;
    margin-left: -60px;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
.glyphicon.glyphicon-info-sign{
    font-size: 25px;
    top: 5px;
}

.selectpicker {
    
    width: auto !important;
    height: 37px;
    background-color: #008CBA !important;
    border-style: solid;
    border-left-width: 3px;
    border-top: none;
    border-bottom: none;
    border-right: none;
    color: black;
    font-size: 14px;
    font-weight: 200;
    padding-left: 6px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
a.nounderline:link {
    color: #FFFFFF;
    text-decoration: none;
}
a.nounderline:visited {
    color: #FFFFFF;
    text-decoration: none;
}
a.nounderline:hover {
    color: #FFFFFF;
    text-decoration: none;
}
a.nounderline:active {
    color: #FFFFFF;
    text-decoration: none;
}

Contents of topnav.php

<nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="asset_items.php">Dashboard</a></li>
            <li><a href="#">Configurations</a></li>
            <li><a href="account_settings.php">Account</a></li>
            <li><a href="help.php">Help</a></li>
          </ul>
          <form class="navbar-form navbar-right">
            <input type="text" class="form-control" placeholder="Search...">
          </form>
        </div>
      </div>
    </nav>

Contents of menu.php

<li<?php if ($thisPage=="Assets") echo " class=\"active\""; ?>><a href="asset_items.php">Assets <span class="sr-only">(current)</span></a></li>
            <li<?php if ($thisPage=="Categories") echo " class=\"active\""; ?>><a href="asset_categories.php">Asset Categories <span class="sr-only">(current)</span></a></li>
            <li<?php if ($thisPage=="Users") echo " class=\"active\""; ?>><a href="user_items.php">Users <span class="sr-only">(current)</span></a></li>
            <li<?php if ($thisPage=="Calendar") echo " class=\"active\""; ?>><a href="calendar.php">Calendar <span class="sr-only">(current)</span></a></li>
            <li<?php if ($thisPage=="Reports") echo " class=\"active\""; ?>><a href="reports.php">Reports <span class="sr-only">(current)</span></a></li>

Contents of page_filter_buttons_nav.php

<div class="col-md-14 col-md-offset-2"><br>
<div class="col-md-8">

<form action="#">
    <a href="#" data-toggle="tooltip" title="To search multiple records with different values, use the pipe symbol with no spaces. Example: To search all records with the word 'Asus' or 'Chromebook,' use 'Asus|Chromebook'" data-placement="bottom" ><span class="glyphicon glyphicon-info-sign" ></span></a>

    <input type="text" id="Search" name="Search" placeholder="Search">

    <label for="filters"></label>
    <select id="filters" name="filters">
      <option value="ALL">Search all fields</option>
      <option value="assetid">Asset ID</option>
      <option value="status">Status</option>
      <option value="category">Category</option>
      <option value="seralnumber">Serial Number</option>
      <option value="assignedto">Assigned To</option>
      <option value="model">Model</option>
      <option value="manufacturer">Manufacturer</option>
    </select>
 
    <button class="button button6"> Apply </button>
    <button class="button button6"> Reset </button>
</div>
  </form>
</div>

<div class="col-md-5>






<?php echo '<a class="nounderline" href="' ?>
<?php if ($thisPage =='Categories') {
    echo 'add_category.php">';
} elseif ($thisPage =='Users') {
    echo 'add_user.php">';
} elseif ($thisPage =='Assets') {
    echo 'add_asset.php">';
} else {
    echo "Oops, thats an error";
}
?>
<button class="button button2"><span class="glyphicon glyphicon-plus"></span>

<?php if ($thisPage =='Categories') {
    echo '&nbsp; Add Category';
} elseif ($thisPage =='Users') {
    echo '&nbsp; Add User';
} elseif ($thisPage =='Assets') {
    echo '&nbsp; Add Asset';
} else {
    echo "Oops, thats an error";
}
?>

</button></a>



<a class="nounderline" href="
<?php if ($thisPage =='Categories') {
    echo 'import_categories.php">';
} elseif ($thisPage =='Users') {
    echo 'import_users.php">';
} elseif ($thisPage =='Assets') {
    echo 'import_assets.php">';
} else {
    echo "Oops, thats an error";
}
?>
<button class="button button2"><span class="glyphicon glyphicon-sort"></span>

<?php if ($thisPage =='Categories') {
    echo '&nbsp; Import Asset Categories';
} elseif ($thisPage =='Users') {
    echo '&nbsp; Import Users';
} elseif ($thisPage =='Assets') {
    echo '&nbsp; Import Assets';
} else {
    echo "Oops, thats an error";
}
?>

</button></a>


     
     <div class="dropdown"> <a ><button class="button button2">Report &nbsp;<i class="arrow down"></i></button></a>
     <div class="dropdown-content">
     <a href="generatecsv.php">Generate CSV</a>
     </div>
    </div>
  </div></div>
<div class="col-md-14 col-md-offset-2"><br>
<div class="col-md-3">

<select class="selectpicker" data-style="btn-info" multiple data-max-options="4" data-actions-box="true" title="Status Filter">
    
    <optgroup label="Select options below">
      <option>Active</option>
      <option>Inactive</option>
      <option>Leave</option>
      <option>No Status</option>
    </optgroup>
  </select>
</div>
</div>
<select class="selectpicker" data-style="btn-info" title="Results Displayed">
    
    <optgroup label="Select options below">
      <option>30</option>
      <option>50</option>
      <option>100</option>
      <option>All</option>
    </optgroup>
  </select>

So, if you can offer me advice on how to fix this, I would be very grateful.

Thanks in advance!

bootstrap-4 css html php jquery
0 Answers
Related