I have a site with a Gravity Forms form (also using the GF Populate Anything add-on plugin) that has data being loaded dynamically using ajax. I am trying to add a very simple javascript function to one of the input forms but the jquery function does not detect any change when the input value changes dynamically. The function works when I manually input changes but not when it is dynamically changed. Here is my javscript function:
jQuery( document ).ready(function($) {
$(document).on('change', '#input_3_17', function() {
alert( $("#input_3_17").val() );
// my simple function here
});
});
I don't have access to the code that controls the ajax change--that is being done by another plugin (https://gravitywiz.com/documentation/gravity-forms-populate-anything/). Is there any way I can get jquery to detect this change in my own code?
The alert in the code above is triggered if I manually change the input data, or on page load if I set a value using .val().
Here is what the html looks like on page load:
<input name="input_17" id="input_3_17" type="text" value="" class="medium" aria-invalid="false" disabled="">
and this is what the input html looks like after a value change:
<input name="input_17" id="input_3_17" type="text" value="6,160.00" class="medium" aria-invalid="false">
If I enter
$("#input_3_17").val();
into the developer tools console, it outputs the current value--so I know that the change is occurring to the dom, but I just can't seem to access it. What are my options? Is this even possible?
UPDATE: After contacting the plugin authors directly of the custom Gravity Forms add-on I am using, GF Populate Anything, they provided the custom event needed. See in the answers below.
So I contacted the plugin developers for the Gravity Perks add-on plugin GF Populate Anything and here is there response which worked perfectly:
After GP Populate Anything updates fields with AJAX, it kicks off the following event:
$(document).trigger('gppa_updated_batch_fields', this.formId);
You should be able to hook into that event like so:
$(document).on('gppa_updated_batch_fields', function(event, form_id){
console.log(form_id);
$('#input_' + form_id + '_' + input_id).css('background', 'red');
});