I am hoping someone can help me with some JavaScript. I know I'm on the right track but there seems to be something that I'm missing.
I have a collection (class = addendums) that contains a single line field and a blank custom html field in each set. The single line field (#q95) is being populated with a URL from a Lookup Rule. I am using JS to insert the URL as an iframe into the custom html field (#q96). I have successfully implemented this method before but it was not inside a collection. Right now, it is working for the first set, but not the subsequent sets. I was thinking the .each would take care of that but no luck so far.
This code is inside the $(document).ready function.
//Insert the iframe stuff into the html field
function loadAddendums(){
$('.addendums .rpx').each(function(){
var urlA = $('#q95 input').val()
var fullhtmlA = "<iframe id='myframe' src='" + urlA + "' width='100%' height='600px'></iframe>";
document.getElementById("q96").innerHTML = fullhtmlA;
//Execute the iframe function whenever the collection field changes
$('.addendums').change(loadAddendums);
The URL field will eventually be hidden... it is visible for now while I am testing.
Since you're working with JQuery objects, the getElementsByClassName isn't going to work that way. Basically, your current code is trying to use the object itself in a method that expects a class name so it finds nothing.
You actually already have the element as a JQuery object for the "neighbor" variable, so you don't have to retrieve it again at all.
Instead, you can just act directly on the object you already have and use the JQuery html method instead of vanilla innerHTML since you're working with JQuery objects instead of DOM objects.
You could either do
neighbor.html(fullhtmlA);
or, you could skip the extra neighbor and fullhtmlA variables and just set the html directly.
$('.frameContainer').eq(row - 1).html("<iframe id='myframe' src='" + urlA + "' width='100%' height='600px'></iframe>");
I don't see anything wrong with using the variables because it helps keep the lines shorter and makes the steps easier to follow, but they aren't "necessary"
This is a pretty common challenge with tables and collections. The following post should point you in the right direction.
https://answers.laserfiche.com/questions/153832/Table-and-Collection-JavaScript-Event-Handlers
Ok so this has helped a ton with identifying the row-specific URL
field number
. However, I am still struggling with how to do identify the row-specific custom html field number - probably because I am like 4% competent with programming concepts. When I inspect the elements, the custom html fields are not named "field#(row#)" so I'm not sure how to tell the innerHTML function where to insert the "guts". I looked at this
post
but I'm still not getting it.
I'm also not sure how to target the row-specific URL field
input
. I have tried several ideas incorporating the row variable but the code below just shows the generic field input syntax because nothing that I tried worked.
//Execute the iframe function whenever the collection field changes
$('li.addendums').on('change','.addendURL',function(e){
var field = e.target.id.match(/\d+/g)[0];
var row = e.target.id.match(/\d+/g)[1];
var urlA = $('#q95 input').val();
console.log(field + '(' + row + ')');
console.log(urlA);
var neighbor = $('#Field96\\('+ row + '\\)');
var fullhtmlA = "<iframe id='myframe' src='" + urlA + "' width='100%' height='600px'></iframe>";
//document.getElementById("#q96").innerHTML = fullhtmlA;
CustomHTML elements will be a bit different because they don't have inputs that would get the row numbering.
First, you don't want to set "id" for your iframes. An id attribute should only ever apply to one element as that is what JavaScript expects.
Instead change that to a class, or tack the row number onto the id so it is unique.
Now to get the custom html element for the target row, you want to apply a custom class to it in the form designer
Then, you can use that in combination with the :eq selector to target the one for the corresponding row.
Row number will be 1 off since indexing starts with 0, so you'll need to either subtract when you get the row number, or when you target the html element.
For example,
var neighbor = $('.frameContainer').eq(row - 1);
If the URL input triggered the change, it will be the "e.target"
For example, the following would get you the value from that field (i.e., no need to "find" it because you already have it from the event triggering).
$(e.target).val()
I am so close I can feel it! I may have misunderstood the piece of your response that was talking about changing from an ID to a class. I applied the frameContainer class to the custom HTML field. Then, I also changed the innerHTML function to look at getElementsByClassName instead of getElementByID. I tried several syntax variations but that is the only piece that isn't working yet.
//Execute the iframe function whenever the collection field changes
$('li.addendums').on('change','.addendURL',function(e){
var field = e.target.id.match(/\d+/g)[0];
var row = e.target.id.match(/\d+/g)[1];
var urlA = $(e.target).val();
console.log(urlA);
var neighbor = $('.frameContainer').eq(row - 1);
var fullhtmlA = "<iframe id='myframe' src='" + urlA + "' width='100%' height='600px'></iframe>";
document.getElementsByClassName(neighbor).innerHTML = fullhtmlA;
I can't tell you how much I appreciate all your help!!!
Since you're working with JQuery objects, the getElementsByClassName isn't going to work that way. Basically, your current code is trying to use the object itself in a method that expects a class name so it finds nothing.
You actually already have the element as a JQuery object for the "neighbor" variable, so you don't have to retrieve it again at all.
Instead, you can just act directly on the object you already have and use the JQuery html method instead of vanilla innerHTML since you're working with JQuery objects instead of DOM objects.
You could either do
neighbor.html(fullhtmlA);
or, you could skip the extra neighbor and fullhtmlA variables and just set the html directly.
$('.frameContainer').eq(row - 1).html("<iframe id='myframe' src='" + urlA + "' width='100%' height='600px'></iframe>");
I don't see anything wrong with using the variables because it helps keep the lines shorter and makes the steps easier to follow, but they aren't "necessary"
Thank you for the clarification! I like the cleaner variables too. Everything works perfect now!!
//Execute the iframe function whenever the collection field changes
$('li.addendums').on('change','.addendURL',function(e){
var field = e.target.id.match(/\d+/g)[0];
var row = e.target.id.match(/\d+/g)[1];
var urlA = $(e.target).val();
var neighbor = $('.frameContainer').eq(row - 1);
var fullhtmlA = "<iframe id='myframe' src='" + urlA + "' width='100%' height='600px'></iframe>";
neighbor.html(fullhtmlA);
