Solved

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

Posted on 2015-01-28
15
853 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
ID: 40575442
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
ID: 40575483
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
ID: 40575491
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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 40575495
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
ID: 40575501
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
ID: 40575542
Adding the trigger worked ..,.,, THANKS!
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40575578
Thanks for the points.

Curious, did you find a space after the id in your markup?
0
 

Author Comment

by:aehrenwo
ID: 40575584
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
ID: 40575803
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
ID: 40575897
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
ID: 40575930
Ok thanks I will test out that option
0
 

Author Comment

by:aehrenwo
ID: 40575965
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
ID: 40575995
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
ID: 40576010
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
ID: 40580174
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
SharePoint 2010 Foundation Gatherer 10 68
MVC5 - Two different JQuery libraries are loading???? 2 22
Jquery GMAP3 Hierarchy 1 28
Jquery 10 20
Note:  There are two main ways to deploy InfoPath forms:  Server-side and directly through the SharePoint site.  Deploying a server-side InfoPath form means the form is approved by the Administrator, thus allowing greater functionality in the form. …
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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…

821 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