Forms Designer Forum

Posted: **04 Aug 2017**

The following code displays any single attachment just fine:

var preview = "";

$("a[href*='/Attachments/'").each(function(){
	preview += "<tr><td><img class='thumbnail' src='" + $(this).attr("href") + "'></td></tr></table>";
});

if (preview == "") { 
	preview = "<tr><td>There are no items to display.</td></tr>"
}

$(".imgPreview").html(preview);

When I add a second (or more) attachment(s) I start getting the following error:

plumsail.fd.jquery.js:4 Uncaught TypeError: Cannot read property 'childNodes' of null
at Function.buildFragment (plumsail.fd.jquery.js:4)
at m.fn.init.domManip (plumsail.fd.jquery.js:4)
at m.fn.init.append (plumsail.fd.jquery.js:4)
at m.fn.init.<anonymous> (plumsail.fd.jquery.js:4)
at m.access (plumsail.fd.jquery.js:4)
at m.fn.init.html (plumsail.fd.jquery.js:4)
at HTMLDocument.<anonymous> (fd_Item_DisplayForm.aspx:571)
at j (plumsail.fd.jquery.js:2)
at Object.fireWith [as resolveWith] (plumsail.fd.jquery.js:2)
at Function.ready (plumsail.fd.jquery.js:2)

Any suggestions?

Posted: **07 Aug 2017**

Hello!
Yeah, simply remove closing table tag from your code:

Code: Select all

$("a[href*='/Attachments/'").each(function(){
	preview += "<tr><td><img class='thumbnail' src='" + $(this).attr("href") + "'></td></tr>";
});

That should work. Alternatively, you can add an opening table tag. Whatever works in your case.
It simply didn't work because there were too many closing tags, but not enough opening tags.

Posted: **07 Aug 2017**

Nikita Kurguzov wrote: ↑
07 Aug 2017
Hello!
Yeah, simply remove closing table tag from your code:
Code: Select all
$("a[href*='/Attachments/'").each(function(){
	preview += "<tr><td><img class='thumbnail' src='" + $(this).attr("href") + "'></td></tr>";
});
That should work. Alternatively, you can add an opening table tag. Whatever works in your case.
It simply didn't work because there were too many closing tags, but not enough opening tags.

Wow! That was stupid. Thanks for catching that.

Posted: **23 Aug 2017**

Smithme, can I ask where you put that code? I am trying to achieve the same result but am totally new to this.

Posted: **23 Aug 2017**

Hello!
You can achieve it in three easy steps:
1) Add Table control to your Form
2) Add CSS class to your Table, for example, imgPreview
3) Open JS editor and copy this code inside:

Code: Select all

var preview = "";

$("a[href*='/Attachments/'").each(function(){
	preview += "<img class='thumbnail' src='" + $(this).attr("href") + "'>";
});

if (preview == "") { 
	preview = "There are no items to display."
}


$(".imgPreview").html(preview);

Make sure that the class name you gave to your Table matches the one found in the code!

: AttachedImages.png (31.08 KiB) Viewed 4439 times

Posted: **23 Aug 2017**

Thanks for that Smithme, worked perfectly!! Is there a way to automatically reduce the size of the images displayed or is it just the original photo size?

Posted: **23 Aug 2017**

Go to CSS editor in Forms Designer, it's right next to Javascipt editor, and insert following code:

Code: Select all

.thumbnail{
	display: block;
	width: 50%;
	height: 50%;
}

Use class from <img> tag in your Javascript code, in my example it is thumbnail.

You can use % or px to give values to image's width and height. You can read more about CSS for images here - https://www.w3schools.com/css/css3_images.asp

Posted: **23 Aug 2017**

Thank you so much Nikita, a lot to learn but enjoying every minute of it. Fantastic product.

Forms Designer Forum

Displaying attached images in Display Form

Displaying attached images in Display Form

Re: Displaying attached images in Display Form

Re: Displaying attached images in Display Form

Re: Displaying attached images in Display Form

Re: Displaying attached images in Display Form

Re: Displaying attached images in Display Form

Re: Displaying attached images in Display Form

Re: Displaying attached images in Display Form