Use js to get value in tabular results and use it as parameter in function to reset an iframe's source.

[DesiLogi]

Hi,

Does anyone know how, in a tabular datapage's results, to get a record's value and use it as a parameter in a javascript function that sets the source for an iframe on the host page? 

I have a link/button to run a js function in an html block in the tabular results (meaning each record has that link, so if there's 20 records there's 20 of the same links/buttons, one in each row):

<input class="buttonlink" type="button" onclick="ifrtrack()" value="Reports" />

I have this code in the datapage's footer. It resets the source for an iframe (id="tracking") on the host page. This function is run when the user clicks the above link/button in a record's html block.

<script>

function ifrtrack() {
   
    document.getElementById('tracking').src = 'notify-actify/dash-notify';
 
}

 </script>

The issue is that each record in the results has a specific ID value I need to pass as a parameter for the iframe source link. Meaning instead of .src = 'notify-actify/dash-notify' I need to have .src = 'notify-actify/dash-notify?HProjectID=[@field:HProjectID]'.

The problem is that each record in the tabular results will have  a different, unique 'HProjectID' value. One record might have HProjectID=8 (so the iframe source url would be 'notify-actify/dash-notify?HProjectID=8') while another record in the results might have HProjectID=221  (so the iframe source url would be 'notify-actify/dash-notify?HProjectID=221').

Looking at it now, It seems like you would use an anchor ID and then run the js in  the same html block (instead of in the footer). Something like: 

<a id="visi[@field:HProjectID]"> 

<script type="text/javascript"> 

function ifrtrack() {

var isi = document.getElementById("visi[@field:HProjectID]");

var param_label = "?HProjectID=";

var url_end = param_label + isi;

document.getElementById('tracking').src = 'notify-actify/dash-notify' + url_end;

}

</script>

But this isn't pulling the value for HProjectID.  I tested it with an alert for the variable isi and it just shows up blank. Soooo... 

I don't know how to a) get the HProjectID value for the specific record/row the user clicks the link/button on and b) how to incorporate that into the js function as a parameter value at the end of the iframe source url.  

If anyone knows how to do this that'd be really great and thanks in advance- 

[CoopperBackpack]

Hello @DesiLogi,

Yes, you may try to use HTML block to add the unique ID to every record.

Please test this code:

<span id="visi[@field:HProjectID]">[@field:HProjectID]</span>

<script type="text/javascript"> 

function ifrtrack() {

var isi = document.querySelector("#visi[@field:HProjectID]").innerHTML;

var param_label = "?HProjectID=";

var url_end = param_label + isi;

document.getElementById('tracking').src = 'notify-actify/dash-notify' + url_end;
}

</script>

 

[DesiLogi]

Hi CooperBackpack,

Many thanks for the code--I was thinking it would be something like using  innerHTML but didn't know how to implement it. Now it will read a value for @field:HProjectID but it's giving the same number '3' for each record. So it seems like it's not catching each row's (record) individual HProjectID value.  Am I missing something else? 

EDIT: it's odd because the <span> shows the correct HProjectID value so it is getting that. The issue is the variable 'isi' doesn't seem to be picking it up, instead pulling a random value '3'. 

2nd EDIT: I think the answer lies somewhere with using addEventListener (see below- I'm using an alert box to test it). When this code is put in the html block it will, on datapage open, cycle through every HProjectID and show them in an alert box --correctly. So it's getting the right values. Now I just need to figure out how to run this code ONLY when the button/link is clicked. I've tried putting "function ifrtrack" in various parts of this code but so far can't get it to work. 

If there's a way to run this code ONLY when the button with onclick="ifrtrack" is clicked I think that would complete the issue. 

<script type="text/javascript"> 

document.addEventListener('DataPageReady', function (event) {

var isi = document.querySelector("#visi[@field:HProjectID]").innerHTML;

var param_label = "?HProjectID=";

var url_end = param_label + isi;

alert(url_end);

});  

 </script>

 

[DesiLogi]

This code will run when the button is clicked (button id ="alertsbtn") and it will get the first value in the record set, and then cycle through all records. It doesn't get a value if the button in a record that's not the first is clicked. So it seems like this is fairly close to working, if someone can figure out the adjustment I'd really appreciate it. 

** I have an alert box running to test the code, instead of the full code. 

<script type="text/javascript"> 

document.getElementById("alertsbtn").addEventListener("click", function(){

var isi = document.querySelector("#visi[@field:HProjectID]").innerHTML;

var param_label = "?HProjectID=";

var url_end = param_label + isi;

alert(url_end);


});


 </script>

 

[DesiLogi]

Ok, after trying tons of stuff I finally came up with the answer, in case anybody needs to pull tabular, inline values from Caspio and use them in javascript. 

First, create a div with an id that uses the unique identify Caspio field: 

<div style="width:100%;text-align:right;" id='mydiva[@field:HProjectID]'></div>

Then use some script with an EventListener to grap the current value in the div and use it as a parameter in some javascript. I have the js running in the a link. Whatever is in the div inside the EventListener function will show up in the above div. I use a calculated field for the 'label' because not all records need this link. If the record doesn't need it, the link doesn't show up and it keeps the results clean. This works really nicely.

<script type="text/javascript"> 

document.addEventListener('DataPageReady', function (event) {

document.querySelector("#mydiva[@field:HProjectID]").innerHTML =`<div style="width:100%;text-align:right;" >

<a class="nou" style="font-size:13px;" href="#" onclick="document.getElementById('tracking').src = 'notify-actify/dash-notify?HProjectID=[@field:HProjectID]';">[@calcfield:4]</a>

</div>`;

});
 
 </script>

 

[DaveS]

Hi, @DesiLogi,

This topic seems most similar to my issue and was hoping you might be able to help.  I have a tabular report with inline insert and a DISABLED custom input button in the header. 

When the user initially arrives at this page there will not be any records in the report (which is why the button is disabled).  As soon as a row is added the button can be enabled.  

It seems like the two things I could look for are 1) the existence of any rows, or 2) capture the "add" event.  I can't figure out how to do either one...  Any suggestions?

Thanks so much!

Dave

[DaveS]

6 hours ago, DaveS said:

Hi, @DesiLogi,

This topic seems most similar to my issue and was hoping you might be able to help.  I have a tabular report with inline insert and a DISABLED custom input button in the header. 

When the user initially arrives at this page there will not be any records in the report (which is why the button is disabled).  As soon as a row is added the button can be enabled.  

It seems like the two things I could look for are 1) the existence of any rows, or 2) capture the "add" event.  I can't figure out how to do either one...  Any suggestions?

Thanks so much!

Dave

Ok - a few hours of struggling later I'm closer on this.  I've been able to identify the record count text at the bottom of the page and interrogate it in Javascript, so now I'm able to figure out IF i should disable the button, but I'm still not able to actually disable it.   I've re-posted that question - which seems much more generic than this - in a separate thread here.  I appreciate your contributions here - I come across them often and they are often helpful!

[DesiLogi]

Hi @DaveS,

Not sure if this is what you're needing, but the IF code you can run, about if there are records or not, can just have code to disable the button if there are no records--just use something like (using v_records as the variable for your record count). 

if (v_records == null){

 document.getElementById("myBtn").disabled = true; 

}

Sorry if this is off the mark, I may be misunderstanding what you're trying to do. 

[DaveS]

Thanks, @DesiLogi!

 

I got it - I had more than one issue, so my troubleshooting got complicated.  I had a problem of HTML layering (the button wasn't disabled, but I couldn't click it because something was on top of it..., and then a syntax problem (getElementbyID) is NOT the same as (getElementbyId)!  Doh!  Thanks for the response - I appreciate the support!