gravity forms jQuery.load into modal

1 Views

I have a gravity forms contact form which resides on a page, but what I want is a site wide link, that will open up that form and display it in a modal, on the fly.

One way to go about this would be to just insert the form into the markup on the template side, so that it already exists on each page. But that means that there’s a whole lot of markup and gf scripts being loaded that dont for the most part need to be there.

Read More

So I threw together some js that grabs the form markup from the page and inserts it into the DOM, loads the scripts and then I then display the results in a twitter bootstrap modal.

The presentation side of things works as expected – but the none of the js conditional logic etc are getting applied. I know the js is loading as Im feeding the status of each script into console.log – and Im getting “200” and no errors. But its like the scripts can’t see the form, or isn’t being instantiated properly.

To test the js end I also tried loading the resources manually into the head via: 

<?php gravity_form_enqueue_scripts(1, true); ?>

But that doesn’t work either.

Below is the js Im using, anyone have any ideas how to get this to spark life into the form? Is there a callback I should be using?
Many thanks in advance – ben 

jQuery(document).ready(function(){
// load contact form with ajax
jQuery(".contact_btn").click(function(){
    jQuery.ajaxSetup ({ cache:false });
    var ajax_load = "<img height='50px' width='50px' src='/assets/img/medloading.gif' class='tr_spinner' alt='loading...' style='align:center, top:50%' />";
    var loadUrl = "/contact-3/";
    // load the scripts dynamically
    jQuery.when(
        jQuery.getScript("/plugins/gravityforms/js/gravityforms.js?ver=1.7.6", function(data, textStatus, jqxhr) {console.log(jqxhr.status);}), // console logs to get confirmation that its loaded
        jQuery.getScript("/plugins/gravityforms/js/conditional_logic.js?ver=1.7.6", function(data, textStatus, jqxhr) {console.log(jqxhr.status);}),
        jQuery.getScript("/plugins/gravityforms/js/datepicker.js?ver=1.7.6", function(data, textStatus, jqxhr) {console.log(jqxhr.status);}),
        jQuery.getScript("/plugins/gravityforms/js/jquery.textareaCounter.plugin.js?ver=1.7.6", function(data, textStatus, jqxhr) {console.log(jqxhr.status);}),
        jQuery.getScript("/plugins/gravityforms/js/jquery.maskedinput-1.3.min.js?ver=1.7.6", function(data, textStatus, jqxhr) {console.log(jqxhr.status);})
    ).then(function(){
    // insert the content into the DOM
    jQuery("#contact-form .modal-body").html(ajax_load).load(loadUrl + " .entry-content");
    // load it in the modal
    jQuery("#contact-form").modal({ keyboard: false, show: true, backdrop: true });
    });
    // hijack the <a> link
    return false;
});
});
Post Views: 1

Related posts

1 comment

  1. I eventually received a response from the development team who suggested that an iframe was the best approach:

    It looks like it is a timing issue. Your form is getting loaded to the DOM after the document has already been loaded, so that will be a problem.
    To be honest, with all the JS complexities in Gravity Forms, I am not sure you will be able to get this to work. I would seriously consider using an iframe instead.

    In the time that it took for this response to come back I discovered that the div that I was importing using [.load()][1] was missing all the script elements from the original content. This is because, though its not explicitly documented, .load() strips out any inline scripts, so while the markup was present, none of the activation goodness happened.

    One solution (which works) is to package the content from the inline scripts by looking at the page source, and package it into a js file which you load via a [jQuery.getScripts()][3] call. In addition to stripping out the <script></script> elements, you may also may want to modify any paths so they are too relative to mitigate migration issues.

    The (major) drawback here is that by packaging this script ourselves, it’s no longer takes paramaters from the back end and will likely break when changes are made to the form. It also has baked in a few instances of browser detection.

    Due to these limitations, and without a method to dynamically generate these scripts an iframe is really the way to go. That said, it would no doubt be possible to create a custom class that output the scripts – it would largely need to be refactored from the contents of form_display.php as most of what is needed is locked up under private functions. I’ve not found any evidence in my searching of anyone attempting this so far.

Comments are closed.