[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1812
  • Last Modified:

$(document).on change - function triggers on any input change (not just the one that is targeted)

I have a function built into a $(document).on reference that is triggering if any change occurs on the SharePoint Form page rather than only for the input that I am referencing.

Here is the opening part of the code.

  $(document).on('change',$("#WebPartWPQ2 :input[title='HCP ID']").val(),function() {
		//my additional code here }

Open in new window


Right now the function is getting triggered on pretty much any input change.  Not sure if it matters but part of the trigger involves using the .dialog function to open a window with information.

Is this the valid format? Is there a different way I can do this so that the function triggers if:

1) the input is changed manually by the user
2) the input value is updated from another piece of code

Thanks for any assistance and let me know if more code is needed to troubleshoot this.
0
aehrenwo
Asked:
aehrenwo
  • 8
  • 7
1 Solution
 
Tom BeckCommented:
This worked in my test.

$("#WebPartWPQ2:input[title='HCP ID']").on('input',function() {

EDIT: My bad, actually it does not meet requirement 2.
0
 
aehrenwoAuthor Commented:
For some reason this adjustment caused the function to not trigger at all. I will review and see if I updated it wrong.
0
 
aehrenwoAuthor Commented:
Ok I need to add a space after WebPartWPQ2 -

However, now it only updates if I manually adjust the input field. If my other code populates a new value it will not trigger until I put the mouse manually in there and type.

Any suggestions?
0
Free learning courses: Active Directory Deep Dive

Get a firm grasp on your IT environment when you learn Active Directory best practices with Veeam! Watch all, or choose any amount, of this three-part webinar series to improve your skills. From the basics to virtualization and backup, we got you covered.

 
Tom BeckCommented:
Maybe some one else has a elegant way to detect when an input has been changed by another piece of code. The best way to do this in my opinion is to trigger an event for the input in the code that is changing its value. So if you are listening for 'input' on the textbox:

$("#WebPartWPQ2:input[title='HCP ID']").on('input',function() {

On the code that is changing the input value, trigger 'input'.

$("#testButton").on('click', function(){
      $("#WebPartWPQ2:input[title='HCP ID']").val("tommyboy").trigger('input');
});
0
 
Tom BeckCommented:
Don't know why you would need to add a space after the id unless your id HAS a space in the markup, i.e. id="WebPartWPQ2 ", with a space before the closing quote.
0
 
aehrenwoAuthor Commented:
Adding the trigger worked ..,.,, THANKS!
0
 
Tom BeckCommented:
Thanks for the points.

Curious, did you find a space after the id in your markup?
0
 
aehrenwoAuthor Commented:
Every code reference has a space so I am assuming the ID must have one. I didn't write the orignal code... Just cleaning it up and adjusting
0
 
aehrenwoAuthor Commented:
Addtional question! --- I am experiencing an issue in IE8 with this code (it works perfectly fine in Firefox)

In IE8 - When the input field changes from the other code it triggers the event. However, when I enter the value manually into the input field - nothing happens... is there something special I need to do to trigger this in IE8?
0
 
Tom BeckCommented:
That seems strange. Why would triggering 'input' work but handling 'input' directly not work. Unfortunately, I cannot test in IE8 at this time. You can try a different event like 'keyup' or 'keypress'. You can also try listening for multiple events in the same handler. 'propertychange' is a Microsoft only event so maybe that will work for IE8.

$("#WebPartWPQ2 :input[title='HCP ID']").on('input keyup propertychange',function() {

However, triggering multiple events with trigger is problematic.
0
 
aehrenwoAuthor Commented:
Ok thanks I will test out that option
0
 
aehrenwoAuthor Commented:
I am sort of getting it to work now in both IE8 and FireFox

I add this to the other code that updates the input

 $('input[title="HCP ID"]').val(jjid).trigger('input');

Open in new window


The issue now is in IE8 when I use the other code to update the input field now the event is triggering twice.

Is there anyway to prevent that? Maybe using a something other than the trigger function.  The majority of people are going to use this tool with IE8 but I need to make sure it works ok in other browsers.

Thanks again

Adam
0
 
Tom BeckCommented:
I'm not clear. This works in IE8:

$('input[title="HCP ID"]').val(jjid).trigger('input');

This 'input' handler does not fire in IE8 when changing the text directly on the page.

$("#WebPartWPQ2 :input[title='HCP ID']").on('input',function() {

What situation causes the 'input' handler to fire twice in IE8?
0
 
aehrenwoAuthor Commented:
This issue is I need it to fire in IE8 in case someone has a number to type in manually this field (rather than searching for it with the other code).

I added propertychange and this made it work, however because of the trigger reference in the other code the event is happening twice.

So I am sort of in a catch 22 and looking for way to accomplish both things and have it work in all browsers

trigger the event
1) if someone changes the field manually
2) if someone use the search code

Sorry that this is taking so much time to clarify and appreciate your help
0
 
Tom BeckCommented:
Finally was near a computer that still had IE8. Sorry for the delay.

This worked in my test for preventing IE8 from firing the event twice when triggering from other code.
$("#WebPartWPQ2 :input[title='HCP ID']").on('propertychange keyup input',function(e) {
	if (e.type == 'propertychange') {
		e.preventDefault();
	} else {
		//do something
	}
});

Open in new window

The other code with trigger.
$("#testButton").on('click', function(){
	$("#WebPartWPQ2 :input[title='HCP ID']").val("tommyboy").trigger('input');
});

Open in new window

0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 8
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now