Passing Parameters to Popup before submit

[kpcollier]

I have an Orders application. There is an Order Form which is a submission page in this app. On this form, users will select the Job the order is for and other information such as Vendor, Material, Quantity, etc. 

I have a link to a popup page. In theory, I want the user to select the Job from a dropdown on the Orders Form and be able to click the popup link right after. This popup will take the job that was selected from the dropdown as a parameter and list the other orders previously made for this Job.

@DefinitelyNot31337 has provided me with some code and had asked me to make a new post regarding this issue.

This in an HTML block:

 

<a href="https://c3eku680.caspio.com/dp/xxxxxxxxxxxxxxxxx" id="linkToChild" onclick="window.open(this.href, '', 'resizable=no,status=no,location=no,toolbar=no,menubar=no,fullscreen=no,scrollbars=no,dependent=no'); return false;">Previous Orders Per Job</a>

 

And this is in my Footer:

 

<script>


var fieldName = "Job"; // The name of your table field.
var paramName = "[@Job]"; // 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>

A screenshot of the Order Form is attached. In this preview you can see the Job has been selected from a dropdown menu. In theory, you should be able to click the Previous Orders link that takes you to the popup and lists the orders previously placed for said Job.

Right now, the popup functionality is working, but the passing or receiving of parameters is not. I may not have my popup page configured correctly?

Thanks,

KPC

 

[Kurumi]

Hi @kpcollier,

Have you tried this article regarding pop-up windows: https://howto.caspio.com/tech-tips-and-articles/common-customizations/how-to-generate-link-menus-and-popup-windows/

On the Generator, you can easily put the parameter's name to pass the value of it.

I hope it helps!

 

[kpcollier]

Hi @Meekeee,

I saw this and was not sure if it would work before submit. I need it to work as soon as the dropdown for job has been selected.

I will be trying to implement this. 

Thank you!

Edit*

<a class='cbMenuItem' href='#' onclick='window.open("https://c3eku680.caspio.com/dp/xxxxxxxxxxxxxxx?Job=[@field:Job]","mywindow", "menubar=1,resizable=1,width=500,height=500")'>Previous Orders Per Job</a> | 

So, this is what the generator gave me. I configured my datapage with Live Support. Did not have any luck. When I select the job from the dropdown and then click the popup link, it shows No Records Found. I am using a demo Job from the table that I know has orders previously placed. So, it should show a couple on the List Report and it doesn't. Not sure if this is because it is before submit or not.

[kpcollier]

So, did some digging. I switched the parameter from Job to Order Number. In DevTools, I can successfully see the element change every time I choose a different dropdown selection. However, the parameter is not being sent to the popup at all. In the URL of the popup, the parameter value is blank. Even when I change the dropdown selection for order number and click the link, it is not being passed.

Hmmmm...

[DefinitelyNot31337]

Hi kpcollier,

 

Looking at my source code, Uncaught TypeError: Cannot read property 'addEventListener" of null is probably caused by a wrong table field name. Do note that it is case-sensitive.

fieldName "Job" is different from "job" so you might want to check that .

 

Next, I didn't expect that you'd be using a Dropdown. It wouldn't work on it as I designed the code to work on text fields. Below is the updated code for cross-compatibility. (footer)

<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}`
}

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

inputField.dispatchEvent(new Event('change'));


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>

 

Last point is just a note, Caspio does modifies the link in the HTML Block, especially if the Rich-text editor is enabled. It's better if the id attribute is just hardtyped.

 

If it still doesn't work, just import this App to your bridge and use it as your template.

a5748_passing_internal_parameter_to_popup_1_0_2018-Nov-28_1825.zip

 

Good luck.

 

Regards,

DN31337

[kpcollier]

Yeaaaah I must be too much of a noob to be able to do this. Not sure what I am doing wrong, I am guessing it is something with my parameters and the way I have my dropdowns set up, or the way my Line Report popup page is configured. I tried to use the provided code AND the example. The example worked great until I put my information in. Now, I cannot see a query string parameter in the URL at all in the popup.

I will be working on this all day. Will let you know if I found a solution.

[kpcollier]

I tried changing from Job to Order_Number to try and get rid of the error. 

Order_Number is a field in my main table.  Its a cascading field that is populated when a Job is selected from the drop down, which gets its data from a separate JobTable. The Job_Number from the Job selected is the same as the Order_Number. 

I can see the value of Order_Number change in DevTools when I change the job from the dropdown. However, I am still getting an uncaught typeerror and the query string parameter is not being appended to the URL. (See pics)

**I have singled out the problem. It is not working with Cascading Elements. If  I take out the Cascading effect on Order_Number, the query string parameter works for either Order_Number or Job. However, when I convert Order_Number to a cascading dropdown and set Job as the parent field, neither field works as a parameter.

Here is the footer code I am using:

<script>


var fieldName = "Order_Number"; // The name of your table field.
var paramName = "Order_Number"; // 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}`
}

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

inputField.dispatchEvent(new Event('change'));


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>

 

 

 

 

[kpcollier]

I fixed it. 

Switched the cascading element to a calculated value. This way only one element is Special and getting a random ID. 

[kpcollier]

Hey @DefinitelyNot31337, could you help me out with this again?

I have updated this app and created another table. This page now is looking up through a view that has 2 tables, not one.

In the datapage I am trying to send the parameters to, they are labeled [@Ordering_Table_Test_Job] and [@Ordering_CompletedOrders_Job].

The records in both tables are identical besides the fact one is an active order and one is a completed order. However, I need to pull them from both tables. Before, I would select a Job from the dropdown and click the "Previous Orders Per Job" button.  The Job I selected would send the number parameter to the popup datapage, which in turn would display all records with the same job number.

Before, I just had Job as fieldName and paramName. I am not sure what I have to do to make this account for the Job field in both tables. Here is what I had previously that was working with the single table:

<script>


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


/* No modifications necessary 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}`
}

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

inputField.dispatchEvent(new Event('change'));


linkToChild.onclick = function() {
window.open(moddedUrl, '', 'resizable=no,status=no,width=500,height=500,scrollbars=no,dependent=no'); return false;
}

</script>

I appreciate all the help.

[kpcollier]

I was able to get it working with putting the new field name in the paramName variable, however I could only use one value, so I had to choose between Ordering_Table_Test_Jobs and Ordering_CompletedOrders_Job. I tried adding another parameter name variable with the 2nd field name and tried to append the updateLink function to include the 2nd variable. However, it is not working and displaying no results.

<script>

var fieldName = "Job"; // The name of your table field.
var paramName = "Ordering_Table_Test_Job"; // The name of your parameter
var paramNameTwo = "Ordering_CompletedOrders_Job"; // second parameter


/* No modifications necessary 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}?${paramNameTwo}=${this.value}`
}

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

inputField.dispatchEvent(new Event('change'));


linkToChild.onclick = function() {
window.open(moddedUrl, '', 'resizable=no,status=no,width=500,height=500,scrollbars=no,dependent=no'); return false;
}

</script>

 

[DefinitelyNot31337]

Made a few adjustments to my code.

 

Can you try the code below?

<script>

var fieldName = "Job"; // The name of your table field.
var paramName = "Ordering_Table_Test_Job"; // The name of your parameter
var paramNameTwo = "Ordering_CompletedOrders_Job"; // second parameter


/* No modifications necessary beyond this line */

var inputField = document.querySelector(`[action*="[@cbAppKey]"] [id*=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}?${paramNameTwo}=${this.value}`
}

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

inputField.dispatchEvent(new Event('change'));


linkToChild.onclick = function() {
window.open(moddedUrl, '', 'resizable=no,status=no,width=500,height=500,scrollbars=no,dependent=no'); return false;
}

</script>

 

Regards,

DN31337