Tag Archives: Javascript

IE/Edge Does not return a parsable string with .toLocaleTimeString()

Posted on by

Recently, I was trying to parse the time portion of a date. I used split() to chop time string into hours, minutes, seconds, etc. and attempted to parseInt() the hour portion of the split array like so:

<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()">Click me to parse the current time</button>
<p id="demo"></p>

function myFunction() {
var str = new Date().toLocaleTimeString();
var parts= str.split(":");
var hour= parseInt(parts[0]);
document.getElementById("demo").innerHTML = parts+"
----
"+parts[0]+"
----
"+hour;}
//output:
//4,00,39,PM
//----
//4
//----
//NaN

</body>
</html>

The code above works in every other browser except Internet Explorer (11+) and Edge (all as of v 38.14393.0.0).

So what’s the problem? It turns out, that IE/Edge also includes some hidden formatting characters (in this case, one indicating left-to-right). Simply clearing that formatting string does the trick like so:


<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()">Click me to parse the current time</button>
<p id="demo"></p>

function myFunction() {
var str = new Date().toLocaleTimeString().replace(/\u200E/g, '');
var parts= str.split(":");
var hour= parseInt(parts[0]);
document.getElementById("demo").innerHTML = parts+"
----
"+parts[0]+"
----
"+hour;}
//output:
//4,00,39,PM
//----
//4
//----
//4

</body>
</html>

Javascript Method ‘getElapsedTime(date)’: Get The Amount of Time That Has Elapsed

Posted on by

Here is a simple Javascript method you can can call to determined how much time has elapsed between a specified date  and now. In other words, you can use it to display how “long ago” something happened.

The Use Case

A perfect use case would be a custom Twitter “ticker” (although those aren’t ‘allowed’ anymore.) Let’s say you had a website with a custom Twitter “ticker” that cycles through displaying the 5 most recent tweets  (a.k.a statuses) one at a time. It would make sense that your tweets also displayed how old they are such as: “1 day ago” or “About 3 hours ago”.

Continue reading →

Correcting Dates That Have Been Serialized to JSON

Posted on by

The Problem

The issue with dates in JSON, is that whenever you serialize, say a C# DateTime object, the date comes out in an unexpected format. Observe the output when a date of June 10, 2013 8:45:43PM is serialized to JSON:

DateTime date = new DateTime(2013, 6, 10, 20, 45,43);
String jsonDate = new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(date);
// jsonDate = "/Date(1370897143000)/";

In this post we’ll look at how to fix this so that the date can be displayed or manipulated properly in the front-end.

Continue reading →

JQuery Plugin: IsMouseInsideBounds

Posted on by

What it Does

This plugin is used to check if the mouse is inside the bounds or “hitting” a specified element.

It compares the mouse’s X and Y positional values to against the target element’s bounds (top, left, bottom, right).

  • If the mouse position is inside of the bounds, the method returns true.
  • If the mouse is outside of the bounds, the method returns false.

Continue reading →

Using Infragistics WebDropDowns in MVC Projects

Posted on by

Client-Side: Getting the Selected DropDownItem’s Value or Text Via Javascript

Get the value of the selected item via Javascript:

var value = $find("<%= cboFilter.ClientID %>").get_selectedItem().get_value();

Get the text of the selected item via Javascript:

var text = $find("<%= cboFilter.ClientID %>").get_selectedItem().get_value();

Server-Side: Getting the Selected DropDownItem’s Value or Text from a Form Submission

With MVC projects, the Infragistics WebDropDown value is not set properly on form submissions. For some reason, we get some sort of internal value that’s not at all usable. In order to get the proper value from a form, you have to create hidden <input> and set its value to the value of the WebDropDown client-side, before before the form is submitted.

See the example below:

<%=Html.Hidden("WebDropDown1_hidden")%>
<ig:WebDropDown ID="WebDropDown1" runat="server" ClientIDMode="Static" DisplayMode="DropDownList">
    <Items>
        <ig:DropDownItem Selected="False" Text="Option 1" Value="1"></ig:DropDownItem>
        <ig:DropDownItem Selected="False" Text="Option 2" Value="2"></ig:DropDownItem>
        <ig:DropDownItem Selected="False" Text="Option 3" Value="3"></ig:DropDownItem>
    </Items>
    <ClientEvents ValueChanged='WebDropDown1_valueChanged' Blur='WebDropDown1_valueChanged' />
</ig:WebDropDown>

<script type="text/javascript">
    function WebDropDown1_valueChanged(sender, event) {
        $get("WebDropDown1_hidden").value = $find("<%= WebDropDown1.ClientID %>").get_selectedItem().get_value();
    }
</script>

Now, when we receive the form, we refer to WebDropDown_hidden’s Form key value pair. You could alternatively set the value of the hidden input on a form’s ‘onsubmit’ event.

Getting a Selected Row (Client-Side) from an Infragistics WebDataGrid

Posted on by

WebDataGrid vs. WebGrid

The are not the same and therefore do not share the same client-side functions and events.

When using a WebDataGrid, use the following selector

$find("<%= WebDataGrid1.ClientID %>") // gets the grid
$find("<%= WebDataGrid1.ClientID %>").get_behaviors().get_selection().get_selectedRowsResolved()[0].get_cell(0).get_value()

When using a WebGrid, use the following selector

igtbl_getGridById("<%= WebDataGrid1.ClientID %>") // get the grid
igtbl_getGridById.getActiveRow();
("<%= WebDataGrid1.ClientID %>")