You are viewing limited content. For full access, please sign in.

Question

Question

Delay Custom HTML in Forms

Forms
Updated June 17, 2014
asked on June 17, 2014

I have a situation in Forms where I need to populate a calendar and a map based on previous field data. 

 

When a record is selected from the look up field, it fills out related fields, that are subsequently used in the calendar and map generation Custom HTML requests.

 

I need to delay the Custom HTML request from completing until the previous fields are populated so that it properly returns the web results.

 

I am also using Google Maps API for the web calls, if that matters.

 

I am using Forms 9.1.1

 

Any suggestions?

0 0

Answer

APPROVED ANSWER
replied on June 17, 2014 • Show version history

Something like this will work. Just add appropriate CSS classes for your address fields (address1, city, state, zip) and add the map CSS class to the custom HTML field that contains the map iframe.

 

$(document).ready(function () {
    function updateMap() {
        if ($('.address1 input').val().length == 0) {
            setTimeout(function () {
                updateMap();
            }
              , 200);
        } else {
            var address = $('.address1 input').val() + "," + $('.city input').val() + "," + $('.state input').val() + "," + $('.zip input').val();
            var newSource = $('.map iframe').attr('src').replace(/&q=.*/, "") + "&q=" + address;
            $('.map iframe').attr('src', newSource); //custom HTML field
        }
    }
    updateMap();

});

 

This code waits for the fields to be filled in and then uses their values to update the map.

 

0 0

Replies

replied on June 17, 2014

Could you use JavaScript to look at when the last field has changed its value and then run the Custom HTML request?

 

I am very interested in what you are trying to accomplish though. Do you actually have the mapping using Google Maps API working? We are in need of something similar to let parents know if they are within a specific schools boundaries.

0 0
replied on June 17, 2014 • Show version history

I am not very strong with Javascript, so I do not know how to set that up, or if that would work.

 

But as far as the Google Maps API, it is working fine.  As long as you pass the variables properly, its very straight forward.  I just ran a few map requests on the website to determine exactly how to pass the address information.

 

Such as you would expect it to be "q=Street+City+State+Zip"  but the actual request required is closer to "q=StreetNumber+StreetName+%St,Pl,Ct,Rd%+%N,S,E,W%+City+state+zip

 

I can get it to display appropriately if the information is front loaded with the Form, but not update dynamically, which is what I am trying to accomplish.

 

0 0
View 2 previous replies
replied on June 17, 2014

So, right now you have it working when the page loads, you just need it to update when some fields are updated? Can you list the fields that, when updated, should cause the map to reload?

0 0
replied on June 17, 2014 • Show version history

I am not sure how in depth you are asking so I will get as much as possible:

 

These are 2 separate Custom HTML requests.

 

First, with variables:

<iframe src="http://www.domain.com/calendar?EID={/dataset/EID}&YR={/dataset/Year}&M={/dataset/Month}" width="900" height="550"></iframe>

 

When the following change:

EID = #q33

Year = #q59

Month = #q58

 

Update:

Custom HTML = #q56

 

Second, with variables:

<iframe src="https://www.google.com/maps/embed/v1/search?key={API_KEY}&q={/dataset/Street_1}+{/dataset/City}+{/dataset/State}+{/dataset/Zip}" width="450" height="250" frameborder="0" style="border:0"></iframe>

 

When the following change:

Street_1 = #q87

City = #q88

State = #q89

Zip = #q90

 

Update:

Custom HTML = #q208

 

Thanks in advance!

https://developers.google.com/maps/documentation/embed/guide

This is the Google guide for anyone else that is looking for information.

0 0
replied on June 17, 2014 • Show version history

For the second bit, you can get the map to update by using an address field instead of separate fields. This code assumes there is one address field on the form that will be used to update the iframe's source. Just replace #q2 with the identifier for your custom HTML field and #q5 with the identifier for your address field.

 

You'd place this code in the JavaScript section of the CSS and JavaScript page.

 

$(document).ready(function() {
  $('#q5').change(function() { //address field
    var address = $('.Address1').val() + "," + $('.City').val() + "," + $('.State').val() + "," + $('.Postal').val();
    var newSource = $('#q2 iframe').attr('src').replace(/&q=.*/, "") + "&q=" + address;
    $('#q2 iframe').attr('src',newSource); //custom HTML field
  });
});

 

0 0
replied on June 17, 2014

The reason I am using different fields is similar to this situation:

https://answers.laserfiche.com/questions/54175/Address-Field-AutoPopulate-From-SQL

I need the fields to be populated for visibility, unless there is a way to populate the entire Address Field block from different field values in SQL.

0 0
APPROVED ANSWER
replied on June 17, 2014 • Show version history

Something like this will work. Just add appropriate CSS classes for your address fields (address1, city, state, zip) and add the map CSS class to the custom HTML field that contains the map iframe.

 

$(document).ready(function () {
    function updateMap() {
        if ($('.address1 input').val().length == 0) {
            setTimeout(function () {
                updateMap();
            }
              , 200);
        } else {
            var address = $('.address1 input').val() + "," + $('.city input').val() + "," + $('.state input').val() + "," + $('.zip input').val();
            var newSource = $('.map iframe').attr('src').replace(/&q=.*/, "") + "&q=" + address;
            $('.map iframe').attr('src', newSource); //custom HTML field
        }
    }
    updateMap();

});

 

This code waits for the fields to be filled in and then uses their values to update the map.

 

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...