[Solved] Help needed: how do I use fancybox window to update form value

[AppleEater]

Help please.

Using PS1.5.5, I've configured the product.tpl->customizationform form to open fancybox-base images gallery. I'm trying to select the image and have it's name and image appear in the customization form (similar to file upload).

 

Here's what I've done so far:

1. in product.tpl

<form method="post" action="{$customizationFormTarget}" enctype="multipart/form-data" id="customizationForm" name="customizationForm" class="clearfix">
...
<input type="text" name="textField3" id="textField3" class="customization_block_input">
<a href="{$link->getModuleLink('azgallery','gallery')}?content_only=1" class="iframe" title="{l s='Gallery'}">
<button type="button" form="customizationForm" name="btnSelectModel" id="btnSelectModel" style="cursor:pointer;">{l s='Select model'}</button>
</a>

2. in /modules/azgallery/views/templates/front/gallery.tpl, i modified:

<a title="{$item.caption}" href="javascript:parent.jQuery.fancybox.close();" class="gl_img">
<img src="{$gallery_dir}images/{$item.id_image}-home_default.jpg" onclick="return UpdateModel('{$item.caption}');">
</a>
.
.
.
<script language="javascript">
	function UpdateModel(ImageCaption) {
	customizationForm.textField3.value=ImageCaption;
	}
</script>

However, I the form field is not populated with the value from the fancybox page (although the javascript function is running), so i can't display the name or the image selected.

 

Please advise.

 

Edited October 18, 2013 by AppleEater (see edit history)

[alsitn]

Hi,

it seems you are using a non-default module so it's pretty complicated to help you.

Maybe your module needs to run in an iframe? Notice that it is disable by default on ps ver 1.5.5 and 1.5.6 but can be enabled back via BO.

 

Maybe this article about fancybox galleries might help you

http://mypresta.eu/en/art/developer/gallery-on-cms-page-fancybox.html

[AppleEater]

The solution was quite simple, once the problem was correctly identified. fancybox window is created in a separate iFrame window, which referes to a different DOM. in order to update the field in the original page, i had to change the call in the fancybox page to something like:

<script language="javascript">
function UpdateParentDOMField( value) {
parent.updateFormField( value);
	return true;
	}
</script>

and add a function in the product.tpl that called the fancybox:

<script type="text/javascript">
	updateFormField = function( value) {
		customizationForm.textField.value=value;
	}
</script>