Jump to content

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


Recommended Posts

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- 

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...