• Home
  • About
  • Resume

Category: Javascript

Access jQueryUI dialog buttons after dialog was created

By , 10/16/2014 5:00 PM

If you’re using jQuery UI Dialog, you know sometimes there’s a need to access dialog’s button objects after the dialog has already been created. This can be easily done via

$(dialogElement).dialog("option").buttons

command. One possible scenario where this can be useful – is executing specific button click function when user clicks [X] in dialog title. Imagine that buttons are set via array and the last object in this array is always something like CANCEL or NO or DISREGARD – and you want to simulate click of that last button whenever user clicks [X]. Using above command it’s pretty straightforward:

$(oDivDialog).dialog({
   //... some dialog parameters
   buttons: arrayOfButtonObjects,
   //... some more parameters
   close: function () {
      var buttons = $(this).dialog("option").buttons;
      buttons[buttons.length - 1].click();
   }
})

Line 5 begins close event which is called on dialog closing.
Line 6 retrieves array of buttons for the dialog
Line 7 calls click() function of the last button in the array

Infragistics WebDataMenu: Manual postback from client-side Click event

By , 10/07/2014 1:46 PM

There’s a a few possible scenarios when you need to manually to initiate server-side Click event of Infragistics WebDataMenu control. For example in client side click event you do some verification/user confirmation and upon positive confirmation (e.g. user clicks YES) – server-side Click event should kick in.

In a normal flow of event you can use set_cancel(bool) method to allow/disallow natural menu postback e.g.

function Menu_ItemClick(sender, eventArgs) {

   if (confirm('Are you sure?'))
       eventArgs.set_cancel(false)
   else
       eventArgs.set_cancel(true)

}

This works because this dialog stops code execution waiting for the user input. But what if you use something like jQueryUI dialog that relies on callback functions to get user feedback? In this case execution of the code continues immediately so you have to cancel postback right away and instead in the callback of the dialog initiate manual postback e.g

function Menu_ItemClick(sender, eventArgs) {

   $("#dialog").dialog({
      resizable: false,
      height:140,
      modal: true,
      buttons: {
        "Yes": function() {
          $(this).dialog("close");
          __doPostBack(sender.get_id(), 'ItemClick' + eventArgs._getPostArgs());
        },
        "No": function() {
          $(this).dialog("close");
        }
      }
   });  

   eventArgs.set_cancel(true)

}

The example above initiates modal confirmation jQuery UI dialog and immediately cancels menu postback (Line 18). Later if user clicks “Yes” button – dialog is closed and manual menu postback is initiated (Line 10) – it passes menu ID and correct postback argruments which result in server-side Click event of menu control. If user clicks “No” – dialog is closed and nothing else happens.

Reenable (temporary) showModalDialog support in Chrome (for Windows) 37+

By , 09/02/2014 9:03 AM

You know you shouldn’t use showModalDialog to open modal windows – it’s bad taste and prone to cause issues. Unfortunately many applications (especially Enterprise ones) rely on the method ability to halt code execution until the window closed (e.g. user answers a YES/NO question).

Tough luck, starting version 37 Google Chrome removed support for showModalDialog. Your code suddenly began to act in weird and unpredictable way. You definitely should rework it to use a different approach to dialogs. Fortunately Google gives you a bit more time. You can re-enable showModalDialog support, but only temporarily – until May of 2015. Continue reading 'Reenable (temporary) showModalDialog support in Chrome (for Windows) 37+'»

Infragistics WebDataMenu delayed resizing in Chrome

By , 08/01/2014 4:36 PM

I encountered weird issue using Infragistics ASP.NET WebDataMenu control. If total width of top-level items was bigger than menu’s width and scrolling kicked in – Google Chrome browser produces unexpected results.

Consider following basic markup for Infragistics WebDataMenu:

<ig:WebDataMenu ID="WebDataMenu1" runat="server" Width="300px">
   <ClientEvents Initialize="myInit" />
   <GroupSettings Orientation="Horizontal" />
   <Items>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
      <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
   </Items>
</ig:WebDataMenu>

It’s a pretty basic markup that defines 10-item horizontal menu with a limited width, so scrolling is enabled. Code in the Initialize event handler would handle some calculation based on menu dimensions and other items on the page would be affected by these calculations. Continue reading 'Infragistics WebDataMenu delayed resizing in Chrome'»

Display “Lose It!” data on Pebble watchface

By , 06/04/2014 2:01 PM

Original Lose It!Lose It! on Pebble

Lose It! is an excellent service that helps people lose weight by monitoring calories intake. It integrates with variety of devices so I was curious if I can display my user data on Pebble smartwatch (to make sure I can have another piece of cake or not).

Unfortunately LoseIt doesn’t have a public API. There had to be another way. Continue reading 'Display “Lose It!” data on Pebble watchface'»

How to receive Stack Overflow notifications on your phone and smartwatch (v 2.0)

By , 05/21/2014 1:59 PM

StackOveflow Pebble UpdateA while back I described how you can receive Stack Overflow notifications on your phone and smartwatch by reading RSS feed provided by StackOvedlow API (v1) and connecting it to PushOver push notification service (and their Android app and ultimately Pebble Smartwatch via awesome IFTTT.

Since then Stack Exchange retired version 1 of their API (and besides it didn’t provided all the information needed, e.g. total reputation points) so I was looking for an alternative. Fortunately StackOverflow API v2 provides very extensive set of functions. One call I was looking for is

api.stackexchange.com/2.2/users/[userid]?site=[site]

Where [userid] is your Stack Exchange User ID and [site] is the Stack Exchange site you’re interested in. For example for me call to

https://api.stackexchange.com/2.2/users/961695?site=stackoverflow

provides a nice JSON output: Continue reading 'How to receive Stack Overflow notifications on your phone and smartwatch (v 2.0)'»

Microsoft Skype Doesn’t support IE11

By , 05/21/2014 8:39 AM

Ever since I upgraded to IE11 my Skype is throwing error

Skype IE11 error

Digging deeper – the error is throwing while Skype is attempting to display an ad banner

Skype ad banner error

So not only when Skype came into Microsoft possession it stated to display banner ads – in doing so it relies on Internet Explorer and it’s not compatible with the latest version.

How stupid is that?

How to make “scrollIntoView” apply to IFRAME only

By , 01/06/2014 5:05 PM

Let’s say you have a really long HTML page with scrollbars, for the sake of argument something like this:

<div>aaaa</div>
<div>aaaa</div>
<div>aaaa</div>
...more content...
<div id="xB">bbbb</div>
<div>aaaa</div>
<div>aaaa</div>
<div>aaaa</div>
...much more content...

And somewhere, perhaps on pageload, you want to make sure that highlighted element is visible to the user, so to scroll it into view you execute

document.getElementById("xB").scrollIntoView();

And it works fine and well – the needed element is automatically displayed on top of the page. But what if this page is in an IFRAME and the parent page has a large scrollable content of it’s own:
Continue reading 'How to make “scrollIntoView” apply to IFRAME only'»

Infragistics WebSplitter: Set SplitterBar’s CSS class in clinet-side JavaScript

By , 12/04/2013 12:36 PM

Hello there. Haven’t written in a while, been busy participating in Stack Overflow community, but this little bit I found interesting.

Infragistics has a cool versatile Web Splitter control in their ASP.NET suite, but recently I encountered a shortcoming – there’s no way to set a CSS class for splitter bar on client-side via JavaScript. On server-side you can do something like

xMySplitter.SplitterBar.CssClass = "hiddenElement";

On client-side – you can get the CSS class via

var sCss = $find('xMySplitter').get_splitterBarCss()

but there’s no counterpart set_splitterBarCss() method. Continue reading 'Infragistics WebSplitter: Set SplitterBar’s CSS class in clinet-side JavaScript'»

WebHierarchicalDataGrid: get_scrollTop() returns incorrect value

By , 08/02/2013 12:52 PM

Infragistics WebHierarchicalDataGrid has a neat client-side built-in function get_scrollTop() – it is used if at any point you need to retrieve current vertical scroll position of the grid (e.g. to use it in your own calculations to display something at a specific position on the grid – tooltip, help, additional info etc.)

Unfortunately the function has a bug: its value only set if user actually manually scrolls the grid: using mouse and scrollbar on the right, keyboard etc. If no scrolling user-interaction is involved and scroll position changes due to other means (e.g. displayed data size changes) – the function retains original value, throwing all your calculation out of whack. Continue reading 'WebHierarchicalDataGrid: get_scrollTop() returns incorrect value'»

Panorama Theme by Themocracy