Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Dynamic external PopUp htm files

Good day, forum.

We use the [%PopUp()%] script frequently. This time around we want to dynamically populate content in the .htm file based on pre-defined fields, via   merged variables. There are too many conditions to build out separate .htms for each unique occurrence. Figured a database-like approach may work, but unsure where/how to start.

Would appreciate any guidance/support.
asked Aug 23, 2016 by WTW_cal Bronze (1,555 points)
retagged Aug 23, 2016 by Walter Williams

1 Answer

+1 vote
There are probably a number of ways to accomplish this, but the first that came to my mind is with query strings and JavaScript.

The goal with the query string is to create a URL like one of these:

PopUp.htm?group=3
PopUp.htm?name=Robert&age=32


To accomplish this, use the "&" operator to combine strings in Sawtooth Script.  Here's an example of how I called the PopUp function with two merged fields:

[% PopUp("Click here", "PopUp.htm?merge1=" & merge1 & "&merge2=" & merge2, 500, 500) %]


Now, we need to put the necessary JS in the .htm file to read these parameters.  I don't know what you want to dynamically change in the pop up, so here is a simple example that just prints out the merged fields:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};

$(document).ready(function(){
    alert(getUrlParameter('merge1'));
    alert(getUrlParameter('merge2'));
});
</script>


Note: if your merged fields have special characters (e.g., equal sign, ampersand), they may need to be encoded and decoded in order for this solution to work.

(Source of getUrlParameter function: http://www.jquerybyexample.net/2012/06/get-url-parameters-using-jquery.html )
answered Aug 23, 2016 by Zachary Platinum Sawtooth Software, Inc. (120,900 points)
...