Solved

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

Posted on 2015-01-28
15
654 Views
Last Modified: 2015-01-30
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
Comment
Question by:aehrenwo
  • 8
  • 7
15 Comments
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
This worked in my test.

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

EDIT: My bad, actually it does not meet requirement 2.
0
 

Author Comment

by:aehrenwo
Comment Utility
For some reason this adjustment caused the function to not trigger at all. I will review and see if I updated it wrong.
0
 

Author Comment

by:aehrenwo
Comment Utility
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
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
Comment Utility
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
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
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
 

Author Comment

by:aehrenwo
Comment Utility
Adding the trigger worked ..,.,, THANKS!
0
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
Thanks for the points.

Curious, did you find a space after the id in your markup?
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:aehrenwo
Comment Utility
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
 

Author Comment

by:aehrenwo
Comment Utility
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
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
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
 

Author Comment

by:aehrenwo
Comment Utility
Ok thanks I will test out that option
0
 

Author Comment

by:aehrenwo
Comment Utility
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
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
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
 

Author Comment

by:aehrenwo
Comment Utility
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
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now