HTML Compliance - Dashboard

HTML compliance (aside from the active widgets).

Rename duplicate id's.
Fix available widgets collapsible section href with id.
Where obsolete replace name attribute with id.

1 files changed, 10 insertions, 10 deletions

diff --git a/src/usr/local/www/index.php b/src/usr/local/www/index.php
index d44b8f6..350ddb7 100644
--- a/src/usr/local/www/index.php
+++ b/src/usr/local/www/index.php
@@ -312,19 +312,19 @@ pfSense_handle_custom_code("/usr/local/pkg/dashboard/pre_dashboard");
 <div class="panel panel-default" id="widget-available">
 	<div class="panel-heading"><?=gettext("Available Widgets"); ?>
 		<span class="widget-heading-icon">
-			<a data-toggle="collapse" href="#widget-available .panel-body" name="widgets-available">
+			<a data-toggle="collapse" href="#widget-available_panel-body" id="widgets-available">
 				<i class="fa fa-plus-circle"></i>
 			</a>
 		</span>
 	</div>
-	<div class="panel-body collapse out">
+	<div id="widget-available_panel-body" class="panel-body collapse out">
 		<div class="content">
 			<div class="row">
 <?php
 foreach ($widgets as $widgetname => $widgetconfig):
 	if ($widgetconfig['display'] == 'none'):
 ?>
-		<div class="col-sm-3"><a href="#" name="btnadd-<?=$widgetname?>"><i class="fa fa-plus"></i> <?=$widgetconfig['name']?></a></div>
+		<div class="col-sm-3"><a href="#" id="btnadd-<?=$widgetname?>"><i class="fa fa-plus"></i> <?=$widgetconfig['name']?></a></div>
 	<?php endif; ?>
 <?php endforeach; ?>
 			</div>
@@ -355,7 +355,7 @@ foreach ($widgets as $widgetname => $widgetconfig):
 </div>
 
 <div class="hidden" id="widgetSequence">
-	<form action="/" method="post" id="widgetSequence" name="widgetForm">
+	<form action="/" method="post" id="widgetSequence_Form" name="widgetForm">
 		<input type="hidden" name="sequence" value="" />
 
 		<button type="submit" id="btnstore" class="btn btn-primary">Store widget configuration</button>
@@ -403,10 +403,10 @@ foreach ($widgets as $widgetname => $widgetconfig)
 			<div class="panel-heading">
 				<?=$wtitle?>
 				<span class="widget-heading-icon">
-					<a data-toggle="collapse" href="#widget-<?=$widgetname?> .panel-footer" class="config hidden">
+					<a data-toggle="collapse" href="#widget-<?=$widgetname?>_panel-footer" class="config hidden">
 						<i class="fa fa-wrench"></i>
 					</a>
-					<a data-toggle="collapse" href="#widget-<?=$widgetname?> .panel-body">
+					<a data-toggle="collapse" href="#widget-<?=$widgetname?>_panel-body">
 						<!--  actual icon is determined in css based on state of body -->
 						<i class="fa fa-plus-circle"></i>
 					</a>
@@ -415,7 +415,7 @@ foreach ($widgets as $widgetname => $widgetconfig)
 					</a>
 				</span>
 			</div>
-			<div class="panel-body collapse<?=($widgetconfig['display']=='close' ? '' : ' in')?>">
+			<div id="widget-<?=$widgetname?>_panel-body" class="panel-body collapse<?=($widgetconfig['display']=='close' ? '' : ' in')?>">
 				<?php include('/usr/local/www/widgets/widgets/'. $widgetname.'.widget.php'); ?>
 			</div>
 		</div>
@@ -449,7 +449,7 @@ function updateWidgets(newWidget)
 		sequence += newWidget + ':' + 'col2:open';
 
 	$('#widgetSequence').removeClass('hidden');
-	$('input[name=sequence]', $('#widgetSequence')).val(sequence);
+	$('input[name=sequence]', $('#widgetSequence_Form')).val(sequence);
 }
 
 events.push(function() {
@@ -471,9 +471,9 @@ events.push(function() {
 	});
 
 	// On clicking a widget to install . .
-	$('[name^=btnadd-]').click(function(event) {
+	$('[id^=btnadd-]').click(function(event) {
 		// Add the widget name to the list of displayed widgets
-		updateWidgets(this.name.replace('btnadd-', ''));
+		updateWidgets(this.id.replace('btnadd-', ''));
 
 		// We don't want to see the "Store" button because we are doing that automatically
 		$('#btnstore').hide();