199 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
Office Add-Ins: Working with Tables in Word. Part 1: Creation
Tue, May 30th 2017 11
Interesting new release – Istio service mesh microservices management
Wed, May 24th 2017 9
Office Add-Ins – JavaScript control over the Content Control lock in a Word document
Thu, Mar 30th 2017 9
Calling an external service from your chat bot
Mon, Mar 20th 2017 9
NWCJS Meetup: Creating Bots with JavaScript and the Microsoft Bot Framework
Tue, Mar 14th 2017 5
Setting up the sample Azure bot to work locally with the bot emulator
Mon, Mar 13th 2017 7
Adding your bot code to VSTS for source control and configuring continuous integration
Mon, Mar 6th 2017 5
Top 10
jQuery in XPages #20 – NProgress – YouTube-like slim progress bar
Wed, Mar 12th 2014 15
Angular.js in XPages #1 – Using the right IDE for development
Sun, Apr 27th 2014 15
Angular.js in XPages #2 – Setting up a Webstorm / Domino development environment
Sun, May 4th 2014 13
Accessing the original element when using Select2-focus
Sun, Aug 17th 2014 13
Adding your Let’s Encrypt SSL certificate into your Domino keyring file
Thu, Feb 18th 2016 13
Angular.js in XPages #3 – The first app
Sun, May 11th 2014 12
Creating an XPages Websockets chat client using Bluemix
Sun, Nov 9th 2014 12
Sorting an unsorted XPages document collection based on a date field
Tue, Feb 25th 2014 11
Angular.js in XPages #4 – Using Domino Data
Sun, May 18th 2014 11
NWCJS meetup – Angular 2 for beginners
Fri, Feb 10th 2017 11


Accessing the original element when using Select2-focus
Twitter Google+ Facebook LinkedIn Addthis Email Gmail Flipboard Reddit Tumblr WhatsApp StumbleUpon Yammer Evernote Delicious
mark roden    

In the application we are currently working on I wanted to add an ajax call to a JSON service, but only for certain fields. Rather than go through the application and add the code to every element I used a delegated focus event for the field with an attribute of  “help_fieldName”. The following HTML represents the code on the form:

          <div class="col-lg-8">
            <select help_fieldname="territory">
              <option value="UK">UK</option>
              <option value="US">US</option>
              <option value="Global">Global</option>
            </select>
          </div>
          <div class="col-lg-4">First Name</div>
          <div class="col-lg-8">
            <input type="text" class="form-control" help_fieldname="firstname" />
          </div>
          <div class="col-lg-4">Last Name</div>
          <div class="col-lg-8">
            <input type="text" class="form-control" help_fieldname="lastname" />
          </div>

The following jQuery code makes it work. The getHelp function shows/hides the help based on the boolean in the function.

$(document).ready(function(){
	$('body')
		.on('focus', '[help_fieldName]', function(){
		     getHelp(true, $(this))
		})
		.on('blur', '[help_fieldName]', function(){
		     getHelp(false, $(this))
		})
	})

 

What I found though was that when I used Select2 the field attribute was not being picked up. This is because Select2 creates it own DOM elements to display the field and the original field attributes are not transferred to this new DOM structure.

So I needed to come up with a way of accessing the original element from the select2. This turned out to be very simple – select2 emits an event on focus and blur called select2-focus and select2-blur. The event target gives me direct access to the original field the select2 is representing.

Using this simple modification to the delegation code I was able to access the help_fieldName to pass to the help Function. The image below shows the console.log, highlighting the underlying DOM element.

$(document).ready(function(){
	$('body')
		.on('focus', '[help_fieldName]', function(){
		     getHelp(true, $(this))
		})
		.on('blur', '[help_fieldName]', function(){
		     getHelp(false, $(this))
		})
		.on('select2-focus',  function(e){
		     console.log(e.target)
		     getHelp(true, $(e.target))
		})
		.on('select2-blur',  function(e){
		     getHelp(false, $(e.target))
		})
	})

s1




---------------------
http://xomino.com/2014/08/17/accessing-the-original-element-when-using-select2-focus/
Aug 17, 2014
14 hits



Recent Blog Posts
11
Office Add-Ins: Working with Tables in Word. Part 1: Creation
Tue, May 30th 2017 6:18p   Mark Roden
A
9
Interesting new release – Istio service mesh microservices management
Wed, May 24th 2017 3:37p   Mark Roden
A
9
Office Add-Ins – JavaScript control over the Content Control lock in a Word document
Thu, Mar 30th 2017 1:30a   Mark Roden
A
9
Calling an external service from your chat bot
Mon, Mar 20th 2017 1:49a   Mark Roden
In this article I will show to how integrate simple commands (intents) into your bot to then integrate with an external service. Introduction In previous articles we have looked at how to create a sample Azure bot and in this article we will be looking into how “intents” work. The microsoft documentation on dialogIntents can be found here (for the … Continue reading Calling an external service from your chat bot
5
NWCJS Meetup: Creating Bots with JavaScript and the Microsoft Bot Framework
Tue, Mar 14th 2017 2:33a   Mark Roden
Next week’s Northwest Chicago JavaScript meetup (23 March @PSCGroup) features our own Adam Lepley speaking about some of the work he has been doing on the Microsoft Bot Framework. https://www.meetup.com/Northwest-Chicago-JavaScript/events/236993059/ “Bots, they are invading our chat apps, now it’s time to learn to develop your own. Come learn how Microsoft’s Bot Framework enables you to leverage … Continue reading NWCJS Meetup: Creating Bots with JavaScript and the Microsoft Bot&#
7
Setting up the sample Azure bot to work locally with the bot emulator
Mon, Mar 13th 2017 2:27a   Mark Roden
In this article I will demonstrate how to configure your local development environment to work with the environmental variables set up within your Azure environment in the sample bot previously discussed, Introduction  In the previous article we looked at how to create a sample azure bot and then how to configure it in VSTS for continuous integration. If you … Continue reading Setting up the sample Azure bot to work locally with the bot emulator
5
Adding your bot code to VSTS for source control and configuring continuous integration
Mon, Mar 6th 2017 3:00a   Mark Roden
A
8
Adding your Azure bot framework bot into Skype
Tue, Feb 28th 2017 2:30a   Mark Roden
A
5
How to create a sample nodejs bot which utilizes Azure Functions in 15 minutes
Thu, Feb 23rd 2017 2:30a   Mark Roden
In this article I will demonstrate how to create a nodejs bot hosted in Azure. The bot will be created from a sample provided from Microsoft. The example bot will use Azure Functions as the trigger for it’s communication. You will need a Microsoft Azure account to be able to follow this process for yourself. This is … Continue reading How to create a sample nodejs bot which utilizes Azure Functions in 15 minutes
11
NWCJS meetup – Angular 2 for beginners
Fri, Feb 10th 2017 1:24a   Mark Roden
A




Created and Maintained by Yancy Lent - About - Planet Lotus Blog - Advertising - Mobile Edition