Displaying URL in Collections

asked 11 hours ago

Hi everyone!

I’ve been working on this for quite a while, and I’m hoping someone can point out what I’m missing to get this working as intended.

I’ve created a quiz system in Laserfiche Forms, and I’m currently trying to add the functionality to display an image alongside each question. Each question is stored as a row in a collection, and I’ve already:

Built a lookup that retrieves a Laserfiche DocView URL for an image from our repository.
Mapped the URL to a field (File_URL) inside each collection row.
Used custom HTML and JavaScript to inject the URL into an <iframe> to preview the image.

This works perfectly when there’s only one row, but when I add multiple rows to the collection, the last row’s URL gets applied to all of the iframes. The result is that every row displays the same image — the one from the final row.

From what I can tell, the issue is that my JavaScript isn’t correctly scoping the src assignment to just the current row — it’s applying the src to all iframe elements globally instead of the one in the matching row.

I’ll include my current JavaScript and custom HTML setup below, but so far, everything I’ve tried either applies the wrong image to each row or fails to render at all. If anyone has experience properly targeting elements inside collection rows in Laserfiche Forms, especially when working with custom HTML and JavaScript, I would really appreciate your help!

Thanks in advance!

Picture URL - Single Line with class fileurl and variable name File_URL

Java

$(document).ready(function () {
  /* 1) initial auto-grow */
  autoGrowML();

  /* 2) re-apply after new rows are added */
  $('.cf-table-add-row, .cf-collection-append').on('click', function () {
    setTimeout(autoGrowML, 100);            // wait for new DOM to render
  });

  /* 3) re-apply when specific fields change */
  $('#Field40, #Field39').on('change', autoGrowML);

  /* ---------- iframe-reload logic ---------- */
  $(document).on('change', '.fileurl input', function () {
    const url = $(this).val();
    $('.field iframe').attr('src', url);
  });
});

Custom HTML Field with class field

<iframe id="myframe" src="{/dataset/File_URL}" width="50%" height="500px"></iframe>

Fields.png (320.62 KB)

| Download

1 Question.png (1.98 MB)

| Download

2 Questions.png (2.88 MB)

| Download

0 0

replied 10 hours ago

If I'm understanding correctly, it sounds like you have an iframe for each row of the collection, but your code for updating the iframe URL doesn't have anything to single out a specific row, so it updates all of them every time that function is triggered.

If that's the case, you just need to get more specific on the target, and something like the following should do the trick.

/* ---------- iframe-reload logic ---------- */
$(document).on('change', '.fileurl input', function () {
    const url = $(this).val();
    $(this).closest('.rpx').find('.field iframe').attr('src', url);
});

$(this).closest('.rpx') will move up the DOM tree to get the closest collection row parent/container.

Then, .find() will retrieve the iframe within that same parent; this way you only update the iframe associated with the same row as the triggering field.

0 0

Question

Question

Replies

Sign in to reply to this post.