191 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
Azure Machine Learning Studio Office Add-In
Wed, Jan 18th 2017 231
Predictive Analysis and Machine Learning
Tue, Jan 10th 2017 25
19 Jan – Speaking at Northwest Chicago JavaScript meetup – Office.js
Wed, Jan 4th 2017 4
Building Office Add-ins using Office.js – the book, the website
Thu, Dec 15th 2016 7
Sharing data between Office Add-Ins using localStorage
Mon, Nov 21st 2016 7
Using “F12” in Windows to get an Office Add-In development developer console
Mon, Nov 14th 2016 4
Thank you – Microsoft MVP Summit !!!
Thu, Nov 10th 2016 5
Top 10
Azure Machine Learning Studio Office Add-In
Wed, Jan 18th 2017 231
Predictive Analysis and Machine Learning
Tue, Jan 10th 2017 25
Adding your Let’s Encrypt SSL certificate into your Domino keyring file
Thu, Feb 18th 2016 12
Creating an XPages Websockets chat client using Bluemix
Sun, Nov 9th 2014 8
Angular.js in XPages series
Wed, Apr 23rd 2014 7
Sharing data between Office Add-Ins using localStorage
Mon, Nov 21st 2016 7
Building Office Add-ins using Office.js – the book, the website
Thu, Dec 15th 2016 7
Create your own Watson Q and A example with Bluemix, Webstorm and Jazz Hub
Sun, Oct 12th 2014 5
Your customers to be: TEENS REACT TO WINDOWS 95
Wed, Mar 9th 2016 5
PSC and LDC Via – The technical reasons for our strategic partnership
Tue, Aug 23rd 2016 5


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
5 hits



Recent Blog Posts
231
Azure Machine Learning Studio Office Add-In
Wed, Jan 18th 2017 12:45a   Mark Roden
I am currently in the process of learning more about Azure Machine Learning Studio . Within there you can create and train predictive models. As I am going through some of the examples I came across a great example of an Office Add-In. I am creating a simple weather predicting example based on data I downloaded from … Continue reading Azure Machine Learning Studio Office Add-In
25
Predictive Analysis and Machine Learning
Tue, Jan 10th 2017 1:42a   Mark Roden
A
4
19 Jan – Speaking at Northwest Chicago JavaScript meetup – Office.js
Wed, Jan 4th 2017 2:20p   Mark Roden
A
7
Building Office Add-ins using Office.js – the book, the website
Thu, Dec 15th 2016 2:30a   Mark Roden
I wanted to show some love for the new website and book by Michael Zlatkovsky. Michael is a Software Developer and Program Manager in the Microsoft Office Extensibility team. I met Michael at the MS MVP Summit back in October and we had a great conversation or two about Office Addins and their future development. So Michael’s … Continue reading Building Office Add-ins using Office.js – the book, the website
7
Sharing data between Office Add-Ins using localStorage
Mon, Nov 21st 2016 2:42a   Mark Roden
In this article I will show how the underlying dependence on the browser (in this case IE11 in Windows) allows us to pass data between Office Add-Ins through the use of HTML5 localStorage. At this point this is a theoretical post as I haven’t thought of a good use case yet, I am sure I … Continue reading Sharing data between Office Add-Ins using localStorage
4
Using “F12” in Windows to get an Office Add-In development developer console
Mon, Nov 14th 2016 1:00a   Mark Roden
A
5
Thank you – Microsoft MVP Summit !!!
Thu, Nov 10th 2016 6:55a   Mark Roden
A
3
SharePoint now accessible via the Microsoft Graph beta
Mon, Oct 3rd 2016 8:00p   Mark Roden
A
3
Microsoft MVP for Office Development
Mon, Oct 3rd 2016 8:34a   Mark Roden
This weekend I was thrilled to receive an email from Microsoft announcing that I had been recognized as a Microsoft Most Valuable Professional (MVP) in the Office Development technical community. This is a very natural evolution of my journey over the last two years since I branded out from nearly 20 years in IBM Domino. As I … Continue reading Microsoft MVP for Office Development
2
Speaking at Dreamforce next week :)
Wed, Sep 28th 2016 8:16a   Mark Roden
A




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