Remove dashed line that appears around elements of an HTML image map

If you discover that you're being plagued by a dashed line that appears around the <area>  elements of your HTML image map whenever a user clicks on a given element of the image map, here is some jQuery code that you can use to remove those dashed lines...

$(document).ready(function() {

     $("area").focus(function() { $(this).blur(); });

}

To help explain matters, the dashed line is simply an indicator that the user placed the focus on the given element when he/she clicked on it.  The above code works by using the blur method to remove the focus from the selected item after it's been has been clicked.

Using jQuery Datatables on an ASP .NET GridView control

Lately, I've been using jQuery DataTables within several custom SharePoint apps that I've created; however, I've recently resurrected an ASP .NET Web Forms application that I was working on many moons ago and wanted to leverage jQuery DataTables on a GridView control that I'm using in this application.

What I discovered is that the crux of the matter when attempting to layer jQuery DataTables over a GridView control is that you need to format the HTML of the GridView so that it's recognizable by the DataTables code.  Essentially, your GridView needs to be formatted like so in order for it to be recognized:

<table>
     <thead>
          <tr>
               <th></th>
          </tr>
     </thead>
     <tbody>
          <tr>
               <td></td>
          </tr>
     </tbody>
</table>

Here is what you can do at the very minimum to make this happen:

ASPX Page:

<script  type="text/javascript" language="javascript" src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" language="javascript" src="Scripts/jquery.datatables.min.js"></script>
<link type="text/css" href="Content/jquery.dataTables.min.css" rel="stylesheet" />

<div class="row">
     <div class="col-md-4">
   
          <asp:GridView ID="GridView1" runat="server" CssClass="gvdatatable" AutoGenerateColumns="true" OnPreRender="GridView1_PreRender">
          </asp:GridView>
     </div>
</div>

<script type="text/javascript">
     $(document).ready(function () {
           $('.gvdatatable').dataTable({});
     });
</script>

ASPX Page Code-Behind:

protected void Page_Load(object sender, EventArgs e)
{
}

protected void GridView1_PreRender(object sender, EventArgs e)
{
     GridView1.DataSource = GetData();  //GetData is your method that you will use to obtain the data you're populating the GridView with

     GridView1.DataBind();

     if (GridView1.Rows.Count > 0)
     {
           //Replace the <td> with <th> and adds the scope attribute
           GridView1.UseAccessibleHeader = true;

          //Adds the <thead> and <tbody> elements required for DataTables to work
          GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;

           //Adds the <tfoot> element required for DataTables to work
           GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
      }

}

This code has been simplified from my original work, but I wanted to provide you with the bare bones minimum code that's needed so that you can get an idea of how to bolt this onto your existing project.  Hope this helps!

Use jQuery to programmatically parse the text from an HTML element

If you ever run into a situation in which you need to programmatically remove the HTML tags from an HTML element in order to get the text contained within it, jQuery has a very nice option for this using the jQuery.text() method.  Here is a brutally simple example of how it works:

var htmlText = "<a href='#' target='_blank'>I need this text</a>";
var textINeed = $(htmlText).text();
alert(textINeed);

Naturally, real-life situations are going to be far more complex than this, but I thought this might get you pointed in the right direction.

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
});