changed to jquery, used bootstrap alerts

application/views/interface_assets/footer.php

@@ -542,17 +542,22 @@ $(document).ready(function() {
 </script>
 
 <script>
-document.getElementById('dxcc_select').addEventListener('change', function() {
-    var selectedOption = this.options[this.selectedIndex];
-    var isDeleted = selectedOption.textContent.includes("<?php echo lang('gen_hamradio_deleted_dxcc'); ?>");
-
-    if (isDeleted) {
-        this.style.border = '2px solid rgb(217, 83, 79)';
-        warningMessage.innerText = lang_station_location_dxcc_warning;
+function printWarning() {
+    if ($("#dxcc_select option:selected").text().includes("<?php echo lang('gen_hamradio_deleted_dxcc'); ?>")) {
+        $('#warningMessageDXCC').show();
+        $('#dxcc_select').css('border', '2px solid rgb(217, 83, 79)');
+        $('#warningMessageDXCC').text("<?php echo lang('station_location_dxcc_warning'); ?>");
     } else {
-        this.style.border = '';
-        warningMessage.innerText = "";
+        $('#dxcc_select').css('border', '');
+        $('#warningMessageDXCC').hide();
     }
+}
+$('#dxcc_select').ready(function() {
+    printWarning();
+});
+
+$('#dxcc_select').on('change', function() {
+    printWarning();
 });
 </script>
 

application/views/station_profile/create.php

@@ -46,10 +46,7 @@
 		    <small id="stationPowerInputHelp" class="form-text text-muted"><?php echo lang("station_location_power_hint"); ?></small>
 		  </div>
 			<!-- Loading Warning Text for Deleted DXCC -->
-			<script>
-				var lang_station_location_dxcc_warning = '<?php echo lang('station_location_dxcc_warning'); ?>';
-				var isDeleted = selectedOption.textContent.includes("<?php echo lang('gen_hamradio_deleted_dxcc'); ?>");
-			</script>
+
 		  <div class="form-group">
 		    <label for="stationDXCCInput"><?php echo lang("station_location_dxcc"); ?></label>
 				<?php if ($dxcc_list->num_rows() > 0) { ?>
@@ -62,7 +59,7 @@
 				</select>
 				<?php } ?>
 		    <small id="stationDXCCInputHelp" class="form-text text-muted"><?php echo lang("station_location_dxcc_hint"); ?></small>
-			<div id="warningMessage"> </div>
+			<div class="alert alert-danger" role="alert" id="warningMessageDXCC" style="display: none"> </div>
 		  </div>
 
 		  <div class="form-group">

application/views/station_profile/edit.php

@@ -65,10 +65,7 @@
 				<div class="card-header"><?php echo lang("general_word_location"); ?></div>
 				<div class="card-body">
 					<!-- Loading Warning Text for Deleted DXCC -->
-					<script>
-						var lang_station_location_dxcc_warning = '<?php echo lang('station_location_dxcc_warning'); ?>';
-						var isDeleted = selectedOption.textContent.includes("<?php echo lang('gen_hamradio_deleted_dxcc'); ?>");
-					</script>					
+										
 					<!-- DXCC -->
 					<div class="form-group">
 					    <label for="stationDXCCInput"><?php echo lang("station_location_dxcc"); ?></label>
@@ -88,7 +85,7 @@
 					        </select>
 					        <?php } ?>
 					    <small id="stationDXCCInputHelp" class="form-text text-muted"><?php echo lang("station_location_dxcc_hint"); ?></small>
-						<div id="warningMessage"></div>
+						<div class="alert alert-danger" role="alert" id="warningMessageDXCC" style="display: none"></div>
 					</div>
 
 					<!-- City -->

assets/css/general.css

@@ -537,8 +537,3 @@ div#station_logbooks_linked_table_paginate {
 #dx, #state, #gridsquare, #sota, #wwff, #pota {
     text-transform: uppercase;
 }
-
-#warningMessage {
-	color: white !Important;
-	background-color: rgb(217, 83, 79) !Important;
-}