Sherman's Tech Talk

Tuesday, January 21, 2014

Internet Explorer 8 not displaying the "display:table" property

I recently ran into a problem in which IE 8 was not rendering a table structure that I created using <div> elements. A simplified example of what I'm talking about is as follows:

<div style="display:table">
    <div style="display:table-row">
        <div style="display:table-cell">Column 1</div>
        <div style="display:table-cell">Column 2</div>
        <div style="display:table-cell">Column 3</div>
    </div>
</div>

Now, IE 8 supports this capability so I have the feeling that the users reporting the issue may have had Internet Explorer running in a compatibility mode to support a lower version. Fortunately, I was able to resolve the issue by add the following <meta> element to the <head> element of the master page that I was using:

<head id="Head1" runat="server">
    ...
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    ...
</head>

In case you're curious, this <meta> tag, specifically "IE=Edge", tells IE to utilize the latest version of Internet Explorer available.

Friday, December 6, 2013

How to fix the apostrophe issue in the JQuery AutoComplete control

I recently experienced an issue in which the JQuery AutoComplete control was throwing exceptions when attempting to locate an employee whose last name contained an apostrophe (i.e. O'Brien). To resolve the issue, I simply added a line of code that replaced the apostrophe character with the proper escape sequence like so:

request.term = request.term.replace("'", "\\'");

Here is the complete function with the new line of code added in the appropriate location:

$("#<%=txtSelectUserName.ClientID %>").autocomplete({
    source: function (request, response) {
        request.term = request.term.replace("'", "\\'");
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "/ADGroupManagementWS.asmx/GetAllADUsers",
            data: "{'keywordStartsWith':'" + request.term + "'}",
            dataType: "json",
            async: true,
            success: function (data) {
                response(data.d);
            },
            error: function (result) {
                alert("Due to unexpected errors, data could not be loaded");
            }
        });
    },
    minLength: 1
});

Monday, November 4, 2013

Programmatically call a Javascript function from an anchor tag's onclick event

While doing some work on a custom, navigation-like control on one of my SharePoint 2013 sites, I ran into a situation in which I needed to override the functionality of an anchor tag (i.e. <A>) so that it would call a javascript method and pass the URL as a parameter as opposed to simply directing the user to the referenced web page when the user clicks on it. In case you're curious, I need to do this because I'm going to display the dashboard/report that I'm referencing in a DIV tag as opposed to directing the user to the actual dashboard/report. The following code sample provides a somewhat simplified example of what I did so that I can convey the concept without getting bogged down in too much detail (I included some of the Tableau dashboard code as a bit of a bonus as well as convey what I was up to with this):

<div id='menu'>

    <a href='http://UrlOfTableauReport1'></a>

    <a href='http://UrlOfTableauReport2'></a>

...

</div>

<div id='dashboard'></div>

<script>

     // Override the onlick so that it builds the dashboard in the DIV as opposed to redirecting the user to the dashboard's page

     jQuery( 'div a' ).click(function() {
          renderDashboard( this.href );
          return false;
     });

     // Construct the HTML associated with the Tableau dashboard that I'm going to display in a DIV tag

     function renderDashboard(url) {

 var dashboardHTML = "<iframe width='700px' height='500px' class='tableauViz' src='" + url + "?:embed=y&amp;:host_url=https%3A%2F%2FTableauServerHostUrl%2F&amp;:tabs=no&amp;:toolbar=yes&amp;:allowscriptaccess=always&amp;:loadOrderID=5' frameborder='0' marginwidth='0' marginheight='0' allowtransparency='allowtransparency' style='border-bottom: medium none; border-left: medium none; padding-bottom: 0px; margin: 0px; padding-left: 0px; width: 700px; padding-right: 0px; display: block; height: 500px; border-top: medium none; border-right: medium none; padding-top: 0px'></iframe>";
 document.getElementById("renderDashboard").innerHTML = dashboardHTML;

</script>

Tuesday, October 8, 2013

How to define the CSS class that should be used during an onMouseOver or onMouseOut event for a web control

In case you would ever like to leverage an existing CSS class for your web control whenever an mouse event is triggered (i.e. onMouseOver or onMouseOut), here is a quick example of how to do that:

<input type="button" class="ui-state-default ui-widget-content" onMouseOver="this.className='ui-state-default ui-widget-content ui-state-hover'" onMouseOut="this.className='ui-state-default ui-widget-content'" value="Submit" id="btnSubmit" onClick="SubmitForm();" />

NOTE: In the above example, I'm leveraging the CSS classes that are already defined for a jQuery UI Calendar control that exists on another part of the page. By leveraging those CSS classes for my control, I can keep the look and feel of all controls on the page as consistent as possible.

Also, there may come a time when you need to assign the CSS classes a web control uses via Javascript code. In the following example, I'm using a Javascript function to specify the CSS classes that will be programmatically defined for the given control based on the isSelected value (i.e. whether or not the control has been selected):

function SetButtonStyle(controlId, isSelected) {
     if (isSelected) {
          document.getElementById(controlId).onmouseout = "this.className='ui-state-default ui-state-highlight ui-state-active'";
          document.getElementById(controlId).onmouseover = "this.className='ui-state-default ui-state-highlight ui-state-active'";
          document.getElementById(controlId).className = "ui-state-default ui-state-highlight ui-state-active";
      }
      else {
          document.getElementById(controlId).onmouseout = "this.className='ui-state-default ui-widget-content'";
          document.getElementById(controlId).onmouseover = "this.className='ui-state-default ui-widget-content ui-state-hover'";
          document.getElementById(controlId).className = "ui-state-default ui-widget-content";
      }
}

Wednesday, September 18, 2013

View the raw XML returned from a REST call using Internet Explorer

If you are seeing the "user-friendly", feed reading view when calling a REST service via Inter Explorer and would prefer to view the raw XML for development purposes, here are the steps you can take to make that happen:

Open Internet Explorer and enter your REST service call in the address bar
Confirm that you're returned a view similar to the following:
Click on Tools and select Internet Options
Click on the Content tab
Under the Feeds and Web Slices section, click on Settings
Uncheck the checkbox for the item that reads "Turn on feed reading view"
Click OK
Click OK
Refresh the browser and you will now see the raw XML returned from the REST service call

Thursday, September 12, 2013

Exception from HRESULT: 0x80131904

Over the years, I've periodically encountered an issue in which SharePoint will give you the following error message whenever you attempt to perform some simple write, update, or delete operations on a site (i.e. like adding a new list item to a SharePoint list):

Exception from HRESULT: 0x80131904

In my experience, this error message is indicating that SharePoint is not able to write information to the content database and the most common cause that I've encountered is that the location where SQL logs are stored has run out of drive space (i.e. this being the SQL server that hosts the SharePoint content database). Typically, we've either deleted the older SQL transaction logs stored here or simply moved them to another location with more drive space (i.e. archive) in order to free up space on that drive location. Once that delete/move operation of the log files is complete and more drive space is available, the SharePoint environment will return to normal operation immediately.

Friday, August 16, 2013

Convert web addresses contained in a string to hyperlinks using a regular expression

In the event you ever need to convert web addresses contained within a string to hyperlinks, I stumbled across some code on StackOverflow that will allow you to do this via a regular expression. The code for this solution is presented as follows:

private string ConvertUrlsToLinks(string msg) 
{
    string regex = @"((www\.|(http|https|ftp|news|file)+\:\/\/)[_.a-z0-9-]+\.[a-z0-9\/_:@=.+?,##%&~-]*[^.|\'|\# |!|\(|?|,| |>|<|;|\)])";
    Regex r = new Regex(regex, RegexOptions.IgnoreCase);
    return r.Replace(msg, "$1").Replace("href=\"www", "href=\"http://www");
}

Special thanks goes to a user by the name of "Rob" on StackOverflow for providing this solution to the problem!