Я создал простой php-файл, который ищет значение для $thisPage=NameofCurrentPage, а затем на основе этого значения должен заполнить содержимое ссылки кнопки, относящейся к этой конкретной странице.
Например, если страница называется «Пользователи», значение будет $thisPage=Users
, далее на странице пользователя есть кнопка для добавления нового пользователя.
Он понимает, что конечный пользователь в данный момент находится на странице «Пользователи», и поэтому кнопка «Добавить нового» автоматически заполнит «Добавить нового пользователя» в заголовке и ссылке кнопки.
Это делается для каждого типа страницы, на котором включен конечный пользователь, поэтому, если конечный пользователь нажимает на страницу «Активы», он изменит кнопку «Добавить новый», чтобы теперь сказать «Добавить актив», и заполнит соответствующую ссылку. для этой кнопки.
Теперь, когда вы знаете, что он должен делать, я попытаюсь описать проблему.
Работает отлично, за исключением первой кнопки в серии, которой я пытаюсь манипулировать таким образом. Первая кнопка не активна, точнее, если она нажата или зависла, она ничего не делает. вторая кнопка отображает правильное имя и ссылку при наведении курсора и приведет вас к соответствующему URL-адресу, если нажать на него.
Однако, если я помещу третью кнопку перед первой кнопкой, кнопка, которая раньше не работала, теперь работает, а та, которую я только что поместил вперед, не будет работать.
Я не могу понять, из-за чего не работает первая кнопка в серии.
Я не уверен, что могу правильно сделать фрагмент кода, поскольку я использую php. Вот ссылка на пример его работы, за исключением первой кнопки в серии. Первая неработающая кнопка называется «Добавить актив»:
[https://aitenterprises.com/tracker/asset_items.php]
Я постараюсь сделать фрагмент кода ниже, чтобы вы могли увидеть хотя бы то, что у меня есть:
содержимое /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> </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>
Содержимое 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;
}
Содержимое 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>
Содержимое 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>
Содержимое страницы_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 ' Add Category';
} elseif ($thisPage =='Users') {
echo ' Add User';
} elseif ($thisPage =='Assets') {
echo ' 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 ' Import Asset Categories';
} elseif ($thisPage =='Users') {
echo ' Import Users';
} elseif ($thisPage =='Assets') {
echo ' Import Assets';
} else {
echo "Oops, thats an error";
}
?>
</button></a>
<div class="dropdown"> <a ><button class="button button2">Report <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>
Так что, если вы можете дать мне совет, как это исправить, я был бы очень признателен.
Заранее спасибо!