Passing Internal Parameter To Popup

Farnsbarnes · June 1, 2016

I have a button next to a small field listbox on a search submission form, that opens a popup.

The popup contains a much larger listbox of the same field so that Users can find it easier to view and locate their item for selection. The same 'load' and 'exit' internal parameter passes between the form and the popup, because I need any selection made in the form to show in the popup, and I also need any changed selection in the popup to pass back into the listbox on the form when the popup is closed.

I've managed to get a selected item on the popup to pass through to the listbox in the submission form, by reloading the form. But I can't seem to get the parameter to pass the other way (ie from submission form to popup). I guess this is because the 'submit' button on the form hasn't been pressed so the parameter is empty. So I've tried using some JS with 'onchange' in the form's footer, but I'm not good at coding and just can't get the selected item in the listbox to cross into the parameter.

Does anyone know some code that can 'force' a value into my '[@sitelink]' parameter?

Thanks so much for any tips.

Farnsbarnes · June 2, 2016

I've shortened my question above to the absolute essential as I'm driving myself mad with code here.

I just need to know if the line below, in itself, makes sense. I'm trying to pass the value of a field to an external parameter during a listbox selection 'onchange' event. I think I've narrowed it down to this line as the problem.

'[@sitelink]' = document.getElementById('cbParamVirtual1').value;

kRv · June 3, 2016

Hello Farnsbarnes,

I'm not sure that I understand correctly what you would like to achieve, but let me explain overall case, how to pass parameter between parent page and popup. And your last code example does not makes sense, because you try use not variable, but string literal.

1) To pass parameter to popup you can add it to query string

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
        var abc;

        function foo() {
            //open popup and pass some parameter to it
            var popup = window.open('/a/b.html' + '?prm=' + abc);
            // do something when popup will be closed
            popup.onbeforeunload = function() { alert(abc); }
        }
    </script>
</head>
<body>
    <input type="button" value="Open" onclick="foo();" />
    <input id="def" type="text" value="" />
</body>
</html>

2) Pass some values from popup to parent page

 <script type="text/javascript">
        if(window.opener && !window.opener.closed)
        {
            // get reference to input on parent page
            var pc = window.opener.document.getElementById("def");
            // set some value to input
            if (pc) { pc.value = 200; }
            // set some value to variable
            window.opener.abc = 100;
        }
 </script>

Thanks

Farnsbarnes · June 5, 2016

Thanks kRv, This is very helpful, but you can easily tell I'm a coding newbie!

Essentially what I've been trying to do is to assign listbox values to a Caspio internal parameter [@sitelink] using code, but I don't know if this is even possible. I don't want the value assigned on 'submit' (which would be easy)... I want it assigned as soon as element(s) in a listbox are selected, so I need a listbox 'onchange' event. My reason for doing this is that if the User decides to open the popup, those listbox selections can be passed to the popup.

I can follow the above to try to do this, but should I attach [@sitelink] , or the field name, to the parameter? And being a virtual field, should it be written as cbParamVirtualfield ?

Many thanks for your help

kRv · June 7, 2016

Hello Farnsbarnes,

Please see example below. If user will select one or more values from Select control, and will click "Open" button, all values will be passed to popup page.

According to your questions:

>> should I attach [@sitelink] , or the field name, to the parameter?

You should use [@sitelink] parameter to build proper URL to popup page. I.e. [@sitelink] + '?prm1=123&prm2=456. If you already have question mark in [@sitelink], just replace it ampersand (&).

>>being a virtual field, should it be written as cbParamVirtualfield

Yes. Please look at following post for more details. http://forums.caspio.com/index.php/topic/4377-js-guide-caspio-form-elements/

You can see example here https://c2ebv261.caspio.com/dp.asp?AppKey=b4d84000415472099e8b44d0891a

Parent page

<script type="text/javascript">

	var states = [];
	var abc;

	function f_OpenPopup() {

		//reference to popup window
		var popup;

		//link to popup page
		var url = '[@app:popupUrl]'; // put parameter instant of string literal

		var queryStarted = url.search(/\?/g) > -1 ? true : false;

		//build query string based on user's selection
		var query = f_GetQueryStringForMultiple();

		//check that query string not empty
		if (query) {
			//open popup and pass some parameters to it
			popup = window.open(url + (!queryStarted ? '?' : '') + query);

			// do something when popup will be closed
			popup.onbeforeunload = function () { alert(abc); }
		}
	}

	function f_GetQueryStringForMultiple() {
		var ctrl = document.getElementById("Value1_1"); //Change it to actual field Id
		var q = "";

		if (ctrl) {
			for (var i = 0; i < ctrl.options.length; i++) {
				if (ctrl.options[i].selected) {
					q += (i > 0 || queryStarted ? "&" : "") + "prm=" + encodeURIComponent(ctrl.options[i].value);
					states.push(ctrl.options[i].value);
				}
			}
		}
		return q;
	}
</script>

Popup page

<script type="text/javascript">
    if(window.opener && !window.opener.closed)
    {
        // get reference to input on parent page
        var pc = window.opener.document.getElementById("def");
        // set some value to input
        if (pc) { pc.value = 200; }
        // set some value to variable
        window.opener.abc = 100;
        document.write('Following states were select on parent page: ' + window.opener.states.join(', '));
    }
</script>

Thanks

Farnsbarnes · June 10, 2016

Thanks so much for this kRv. By using remarks in your code you've made it so easy to understand, and the example really helped too.

Now my popups work a treat!

kpcollier · November 9, 2018

Anyone on this post still active? I am looking to do something similar but cannot get this code to work for me.

DefinitelyNot31337 · November 11, 2018

Hi @kpcollier,

I don't know if I understand this thread correctly but based on the title and what I assume, I think you were trying to pass the current value of a parent field to a pop-up via external parameters. Is that correct? If not, I'd suggest to just open a new thread and just notify me to avoid confusion.

If my assumption is what you want to achieve in a Submission Form DataPage, you may do the following:

1.) Add an HTML Block, Create the link that you wish using the WYSIWYG editor. Then click on source.

image.png.16eb66cdb37cff531d16025b7e80bdc3.png

2.) Add an ID attribute to your link. (Copy-paste: id="linkToChild" )

image.png.0b301f6935497b39c8b6317fbf924559.png

3. Add a Footer, disable HTML Editor, and Paste this code

<script>


var fieldName = "value"; // The name of your table field.
var paramName = "myParam"; // The name of your parameter


/* No modifications necesarry beyond this line */

var inputField = document.querySelector('[action*="[@cbAppKey]"] #InsertRecord' + fieldName);
var linkToChild = document.querySelector('[action*="[@cbAppKey]"] #linkToChild');

var baseUrl = linkToChild.href; //do not touch
var moddedUrl = baseUrl; //do not touch

function updateLink() {
moddedUrl = `${baseUrl}?${paramName}=${this.value}`
}

['keydown','keyup'].forEach( function(e) {
    inputField.addEventListener(e, updateLink);
});


linkToChild.onclick = function() {
window.open(moddedUrl, '', 'resizable=no,status=no,location=no,toolbar=no,menubar=no,fullscreen=no,scrollbars=no,dependent=no'); return false;
}

</script>

Note: When the link is hovered, it will show the value of the href attribute but if the it is clicked, the popup will still contain the parameter.

Hope this helps.

Regards,

DN31337

kpcollier · November 26, 2018

@DefinitelyNot31337,

Thank you for the reply, and sorry for the late reply. I've been out for the passed 2 weeks.

This looks like what I want. This is for an Orders form. It is a submission form where an employee can select the Job the order is for and the materials including vendor, quantity, etc. I am using this popup so if a user wants to see the previous orders already placed for the selected job, they can click the popup link, have the Job that was selected in the Order Form be passed through parameters for the popup, and see the number of orders for that job already placed.

Could you possibly give me a tip on how to configure the pop up page? It is set as a List Report. The Search Field is Job... Do I set this up for Receive Parameter On Load with the value being [@Job]?

kpcollier · November 26, 2018

I am also getting an error -

Uncaught TypeError: Cannot read property 'addEventListener" of null

It is not working for me. I am thinking it is because of how I configured the popup page.

Login

Passing Internal Parameter To Popup

Question

Farnsbarnes

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

Farnsbarnes

Link to comment

Share on other sites

kRv

Link to comment

Share on other sites

Farnsbarnes

Link to comment

Share on other sites

kRv

Link to comment

Share on other sites

Farnsbarnes

Link to comment

Share on other sites

kpcollier

Link to comment

Share on other sites

DefinitelyNot31337

Link to comment

Share on other sites

kpcollier

Link to comment

Share on other sites

kpcollier

Link to comment

Share on other sites

Join the conversation

Browse