Tag: html

Web Redirection Based on Typed URL

I have no idea why I am so pleased with this simple HTML code, but I am! My current project is to move all of our Tableau servers to different servers running a newer version of Windows. When I first got involved with the project, it seemed rather difficult (there was talk of manually recreating all of the permissions on each item!!) … but, some review of the vendors documentation let me to believe one could build a same-version server elsewhere (newer Windows, out in magic cloudy land, but the same Tableau version), back up the data from the old server, restore it to the new one, and be done. It’s not quite that simple — I had to clear out the SAML config & manually reconfigure it so the right elements get added into the Java keystore, access to the local Postgresql database needed to be manually configured, a whole bunch of database drivers needed to be installed, and the Windows registry of ODBC connections needed to be exported/imported. But the whole process was a lot easier than what I was first presented.

Upgrading the first production server was mostly seamless — except users appear to have had the server’s actual name. Instead of accessing https://tableau.example.com, they were typing abcwxy129.example.com. And passing that link around as “the link” to their dashboard. And, upon stopping the Tableau services on the old server … those links started to fail. Now, I could have just CNAMED abcwxy129 over to tableau and left it at that. But letting users continue to do the wrong thing always seems to come back and haunt you (if nothing else, the OS folks own the namespace of servers & are allowed to re-use or delete those hostnames at will). So I wanted something that would take whatever https://tableau.example.com/#/site/DepartMent/workbooks/3851/Views kind of URL a user provided and give them the right address. And, since this was Windows, to do so with IIS without the hassle of integrating PHP or building a C# project. Basically, I wanted to do it within basic HTML. Which meant JavaScript.

And I did it — using such a basic IIS installation that the file is named something like iisstart.htm so I didn’t have to change the default page name. I also redirected 404 to / so any path under the old server’s name will return the redirection landing page. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>This Tableau server has moved</title>
		
		<style type="text/css">
			<!--
			body {
				color:#000000;
				background-color:#eeeeee;
				margin:0;
			}
			-->
		</style>
	</head>
	<body>
		<P><ul>
		<h2>The Tableau server has moved. </h2>
		<P>The location you accessed, <span style="white-space: nowrap" id="oldurl"></span>, is no longer available.<br><br> Please update your link to use <span style="white-space: nowrap"  id="newurl"></span></p>
		</ul></P>
	
		<script>
			let strOldURL = window.location.href;

			let strNewURL = strOldURL.replace(/hostname.example.com/i,"tableau.example.com");
			strNewURL = strNewURL.replace(/otherhostname.example.com/i,"tableau.example.com");

			document.getElementById("oldurl").innerHTML = window.location.href;
			document.getElementById("newurl").innerHTML = "<a href=" + strNewURL + ">" + strNewURL + "</a>";
		</script>
	
	</body>
</html>

JQuery – Finding a set of checkboxes

A corollary to my JavaScript modifying checkbox values when the box is checked or unchecked … I needed a way to reset the form (in my form, the default is for the boxes to be checked and the value to be 1). The following code identifies all checkboxes with a particular class, checks them, and sets the value to 1. 

/**
 * This function checks off each checkbox of the input class
 *
 * @param {string} strCheckboxClass     Name of class identifying in-scope checkboxes
 * @return {null} 
 *
 * @example
 *
 *     checkAllDatabases ('MyBoxes');
 */
 function checkAllDatabases(strCheckboxClass){
    arrayCheckboxes = $('.'+strCheckboxClass);
    for(i = 0; i < arrayCheckboxes.length; i++) {
        $( '#'+arrayCheckboxes[i].name).prop( "checked", true );
        $( '#'+arrayCheckboxes[i].name).val(1);
    } 
}

Changing checkbox value when (un)checked

This bit of code handles another rather esoteric scenario — I have a generic “go to this URL and download the resultant Excel file” JavaScript function. This is because I write a lot of reporting tools and didn’t want to write a lot of code for each new tool. The template is an input form with a submit button that calls the generic function. Params for the elements on the form from which values are read, the URL to call to generate the report, and the POST elements into which each corresponding form value is inserted gets stuffed. Works great for text inputs. Works fine for drop-downs. But the value of a checkbox is really a combination of the potential value (from the value tag) and the checked state. That is — my Button 1 has a potential value of 1, but if the box is checked or not is really important.

Instead of attempting to determine the type of element in each form input so I can evaluate the checked condition, I decided to just change the value when the checkbox state is changed. Now Button 1 has a potential value of 0 when unchecked and a potential value of 1 when checked. I don’t need to know if the box is checked because the value answers that question. So passing along button1’s value to my URL lets the target site know if I want whatever Button 1 represents. (In this case, users are able to select from a list of seven data sources — smaller numbers of data sources reduce the query time but also fail to provide the most robust report).

The JavaScript to handle changing the checkbox value when the checked state changes:

$("#button1").change(function () {
    if ($("#button1").is(':checked')) {
        $("#button1").val(1);
    }
    else{
        $("#button1").val(0);
    }
});

$("#button2").change(function () {
    if ($("#button2").is(':checked')) {
        $("#button2").val(1);
    }
    else{
        $("#button2").val(0);
    }
});

The HTML defining these two checkboxes:

<input type="checkbox" id="button1" name="button1" value="1" checked><label for="ngmss">Thing 1</label>
<input type="checkbox" id="button2" name="button2" value="1" checked><label for="ngmss">Thing 2</label>

HTML Checkbox Adding and Removing Table Row

Here’s the JavaScript code I ended up using to add and remove rows from a table based on a checkbox selection (and only allowing one checkbox per group to be selected). The biggest change is that I added a name and ID to my TR for easier identification. 

$(document).on("change", "input[type='checkbox']", function () {
    var $objCheckbox = $(this);
    if ($objCheckbox.is(":checked")) {			// When checked, deactivate other checkboxes and add to sets to create table
        var objCheckboxGroup = "input:checkbox[tableselector='" + $objCheckbox.attr("tableselector") + "']";

        $(objCheckboxGroup).prop("disabled", true);
        $objCheckbox.prop("disabled", false);		// Allow checked box to be unchecked

        addSetToCreatingTable($objCheckbox.attr("setname"), $objCheckbox.attr("settype"), $objCheckbox.attr("goodcircuits") + "|" + $objCheckbox.attr("value"), $objCheckbox.attr("tableselector"));

    }
    else {							// When unchecked, active checkboxes and remove from sets to create table
        var objCheckboxGroup = "input:checkbox[name='" + $objCheckbox.attr("name") + "']";
        $(objCheckboxGroup).prop("disabled", false);	

        $("#" + $objCheckbox.attr('tableselector')).each(function(){ $(this).remove();})
}
});

HTML Checkboxes To Add and Remove Values from Table

I am creating a web form where the user input sometimes cannot be resolved to a unique value. In those cases, I present the user a set of checkboxes with the options (yes, a radio button makes more sense because you can only select one. But I hate that radio buttons change selection when you hit an arrow key.).

When a selection is made, I need to (1) deactivate the checkboxes for the other options when a checkbox in the group is selected and (2) add information to a data table that is used in subsequent activities.

When a selection is cleared, I need to (1) activate the checkboxes within the group and (2) remove the right row from the data table.

Below is the HTML code that achieves this. Now I just need to map this test page into the actual web code. There’s a post with the actual code I ended up using in production too.

<html>
<head><title>Adding And Removing From Table</title></head>
<body>

<div name="divCircuitClarifications" id="divCircuitClarifications">
  <h3>My-Sample-Circuit-A</h3>
    <input type="checkbox" value="123" tableselector="SampleCircuitA" name="SampleCircuitA[]" /><label>123</label>
    <input type="checkbox" value="234" tableselector="SampleCircuitA" name="SampleCircuitA[]" /><label>234</label>
    <input type="checkbox" value="345" tableselector="SampleCircuitA" name="SampleCircuitA[]" /><label>345</label>
<P>
  <h3>My-Sample-Circuit-B</h3>
    <input type="checkbox" value="abc" tableselector="SampleCircuitB" name="SampleCircuitB[]" /><label>abc</label>
    <input type="checkbox" value="bcd" tableselector="SampleCircuitB" name="SampleCircuitB[]" /><label>bcd</label>
    <input type="checkbox" value="cde" tableselector="SampleCircuitB" name="SampleCircuitB[]" /><label>cde</label>
<P>
  <h3>My-Sample-Circuit-C</h3>
    <input type="checkbox" value="Cabc" tableselector="SampleCircuitC" name="SampleCircuitC[]" /><label>abc</label>
    <input type="checkbox" value="Cbcd" tableselector="SampleCircuitC" name="SampleCircuitC[]" /><label>bcd</label>
    <input type="checkbox" value="Ccde" tableselector="SampleCircuitC" name="SampleCircuitC[]" /><label>cde</label>
<P>
</div>

<div id="divResultTable" name="divResultTable">
<table border="1" padding="1" name="tableSetsToCreate" id="tableSetsToCreate">
	<thead><tr><th>ECCKT</th><th>Circuit ID</th></tr></thead>
	<tbody></tbody>
</table>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
	$("input:checkbox").on('click', function() {
	  	var $objCheckbox = $(this);
	  	if ($objCheckbox.is(":checked")) {			// When checked, deactivate other checkboxes and add to sets to create table
	    		var objCheckboxGroup = "input:checkbox[tableselector='" + $objCheckbox.attr("tableselector") + "']";
	
	    		$(objCheckboxGroup).prop("disabled", true);
	    		$objCheckbox.prop("disabled", false);		// Allow checked box to be unchecked

	                var strTableRowString = '<tr><td>' + $objCheckbox.attr("tableselector") + '</td><td>' + $objCheckbox.val() + '</td>\n';
	                $('#tableSetsToCreate tbody').append(strTableRowString);
	  	}
		else {							// When unchecked, active checkboxes and remove from sets to create table
	    		var objCheckboxGroup = "input:checkbox[name='" + $objCheckbox.attr("name") + "']";
	    		$(objCheckboxGroup).prop("disabled", false);	

			$("tr:contains('" + $objCheckbox.attr('tableselector') + "')").each(function(){ $(this).remove();})
  		}
	});
</script>
</body>

HTML – Multiple Values on Select Option

I needed to pass multiple values with a select option. It’s easily accomplished by setting the value to a JSON string

while ($row = oci_fetch_array($stmt, OCI_ASSOC+OCI_RETURN_NULLS)) {
	echo "<option value= " . json_encode($row) . ">" . $row['STRTYPENAME'] . "</option>\n";
}

And using JSON.parse to pull out the key of the value you need:

jQuery("#selectDivSetType").change(function () {     
    var strTemplateObject = $('#selectDivSetType').val();
    var jsonTemplateObject = JSON.parse( strTemplateObject );
    var strTemplateURI = './templates/' + jsonTemplateObject.STRTEMPLATENAME;
    $('#templateURI').attr("href", strTemplateURI); 
});

jQuery – Changing href When Drop-down Selection Changes

I needed to provide a different template depending on the type of activity selected in a drop-down menu. The following jQuery code gets the template name from the drop-down value and updates the href target. 

jQuery("#selectDivSetType").change(function () {     
    var strTemplateName = $('#selectDivSetType').val();
    var strTemplateURI = './templates/' + strTemplateName;
    $('#templateURI').attr("href", strTemplateURI); 
});

Filtering HTML Drop-down

I’ve got a few drop-downs that I’ve added filtering on the drop-down – start typing and you’ll see the options that match your string. But I needed to mirror an application functionality where you select a category and are then presented with a list of options that fit the category.

Here’s the drop-down selector for the categories

    echo "      <div class=\"row\">\n";
    echo "          <div class=\"col-md-12 col-sm-12 col-lg-12 col-xs-12\">\n";
    echo "              <div class=\"row\">\n";
    echo "                  <div class=\"row\">\n";
    echo "                      <div class=\"col-md-2 col-sm-2 col-lg-2 col-xs-2 text-left\">\n";
    echo "                          <span><strong>Animal Category:</strong></span>\n";
    echo "                      </div>\n";
    echo "                      <div class=\"col-md-10 col-sm-10 col-lg-10 col-xs-10 text-left form-group\">\n";
    echo "                          <select name=\"strAnimalType\" id=\"strAnimalType\" readonly/> \n";
    echo "                              <option class=\"NoSelection\" value=\"-----\">-----</option>\n";
    echo "                              <option class=\"Feline\" value=\"201\">Feline</option>\n";
    echo "                              <option class=\"Canine\" value=\"202\">Canine</option>\n";
    echo "                              <option class=\"Equine\" value=\"203\">Equine</option>\n";
    echo "                              <option class=\"Other\" value=\"204\">Other</option>\n";
    echo "                          </select>\n";
    echo "                      </div>\n";
    echo "                  </div>\n";

And here’s the drop-down selector I want to filter based on category — there are a lot of options. The class for each option includes the category selectors that will include the option in the drop-down. 

    echo "      <div class=\"row\">\n";
    echo "          <div class=\"col-md-12 col-sm-12 col-lg-12 col-xs-12\">\n";
    echo "              <div class=\"row\">\n";
    echo "                  <div class=\"row\">\n";
    echo "                      <div class=\"col-md-2 col-sm-2 col-lg-2 col-xs-2 text-left\">\n";
    echo "                          <span><strong>Pet Breed:</strong></span>\n";
    echo "                      </div>\n";
    echo "                      <div class=\"col-md-10 col-sm-10 col-lg-10 col-xs-10 text-left form-group\">\n";
    echo "                          <select name=\"strPetBreed\" id=\"strPetBreed\" readonly/> \n";
    echo " <option value=\"-----\" class=\"selectors All\">-----</option>\n";
    echo " <option value=\"101\" class=\"selectors Feline\">Domestic Shorthair</option>\n";
    echo " <option value=\"1275\" class=\"selectors Feline\">Flame Point Siamese</option>\n";
    echo " <option value=\"1069\" class=\"selectors Equine\">Arabian</option>\n";
    echo " <option value=\"1071\" class=\"selectors Equine\">Tennessee Walking Horse</option>\n";
    echo " <option value=\"1072\" class=\"selectors Other\">Chicken</option>\n";
    echo " <option value=\"1073\" class=\"selectors Other\">Snake</option>\n";
    echo " <option value=\"1074\" class=\"selectors Canine\">Australian Shepherd</option>\n";
    echo " <option value=\"1075\" class=\"selectors Feline\">Burmese</option>\n";
    echo " <option value=\"1076\" class=\"selectors Canine\">Siberian Husky</option>\n";
    echo " <option value=\"1077\" class=\"selectors Feline\">Sphinx</option>\n";
    echo " <option value=\"1078\" class=\"selectors Other\">Rabbit</option>\n";
    echo "                          </select>\n";
    echo "                      </div>\n";
    echo "                  </div>\n";
    echo "              </div>\n";
    echo "          </div>\n";
    echo "      </div>\n";

In the JavaScript, I’ve got a quick function that repopulates the rather long drop-down menu based on the selected category

// Filter strPetBreed options based on strAnimalCategory value
$(document).ready(function () {    
    var allOptions = $('#strPetBreedoption')
    $('#strAnimalCategory').change(function () {
        $('#strPetBreed option').remove()

        var classN = $('#strAnimalCategory option:selected').prop('class');
        var optsCat = allOptions.filter('.' + classN);
        $.each(optsCat, function (i, j) {
            $(j).appendTo('#strPetBreed');
        });

        var optsAll = allOptions.filter('.All');
        $.each(optsAll, function (i, j) {
            $(j).prependTo('#strPetBreed');
        });

    });
});

Since it’s possible there are options you’d want to always appear (in my case, it’s just the “—–” to indicate no selection has been made … but there could be real items that fall into each category too), I’ve got an “All” classification that will get popped onto the top of the list.

Adding CSS To Header

I am currently working on a website that sources in a header and footer — not an uncommon thing to do as this ensures a consistent look across the site. The lead-in code starts head, closes head, starts body, and defines the common page elements (nav bar, etc). The footer then defines some more common page elements and closes body. This approach creates a problem when you want to add CSS. Now you could use style tags within the HTML, but I would rather not have the same style definition twenty times. Yeah, I’d make a single variable out of it and print the style-definition-variable twenty times … but I’d rather have my CSS sourced in from a style-sheet file.

Since I’m already using jQuery to dynamically append elements — add table rows as data is pulled back from the server — I wondered if you could append something to the header. Yes, you can!

/**
* This function appends a CSS file to the document head
*
* @param {string} strFileName Path to CSS file
* @return n/a
*
* @example
*
* loadCSSStylesheetToHead('/path/to/file.css')
*/
function loadCSSStylesheetToHead(strFileName){
var file = document.createElement("link");
file.setAttribute("rel", "stylesheet");
file.setAttribute("type", "text/css");
file.setAttribute("href", strFileName);
document.head.appendChild(file);
}

This allows me to after-the-fact add css from a style-sheet file into the document head.

Displaying An Image Tooltip

JQuery developers seem to have put a lot of effort into filtering HTML components out of tooltips … which, as someone who visits a website … is A Good Thing. But what’s a good security consideration can be a massive pain when building a website. I have a form which takes an internal ID number, and I have an image showing people how to find that internal ID number. I want a little question mark after the field name that pops up the image as a tooltip on mouseover events. And clears the image on mouseout.

JavaScript:

// Show finding equipment ID image "tooltip" 
$('#ShowEquipmentIDTip').hover(
	function(){
        	$('#FindingEID').css({ "display": "block" });
    	}
	,function(){
        	$('#FindingEID').css({ "display": "none" });
    	}
);
HTML:
<div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 text-left">
	<span><strong>Equipment ID(s): <a id="ShowEquipmentIDTip" href="#">(?)</a></strong></span>
	<div id="FindingEID" style="position: relative;top: 20;left: 60;width: 100%;height: 100%;z-index:99;display:none"><img src="/groomsGenerateCircuitReport/images/Tip-FindingEquipmentID.png" /></div>
</div>

Moving your mouse over the ShowEquipmentIDTip a element displays the div which contains my image “tooltip” and moving the mouse away sets the display back to none.