Search code examples
javascriptjqueryajaxwordpressgravity-forms-plugin

Ajax input value change not detected by jquery


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.


Solution

  • 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');
    });