No form support when replacing a zone inside a form

[liftyourgame]

Hi,

I have a page that allows a user to upload an image via AjaxUpload and then crop it.

The upload works fine but when I replace the uploader with my crop component Tapestry complains that there is no FormSupport in the environment.

Here is my tml:

<?xml version="1.0" encoding="UTF-8"?>

<t:layout xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd"
xmlns:p="tapestry:parameter"
        xmlns:j="tapestry-library:jquery">
    <h2>Upload Image</h2>
        <br />
    <t:form>
        <t:zone t:id="uploadZone" id="uploadZone">
        <t:errors />
        <!--<input t:type="upload" t:id="file" t:value="file" validate="required" /> <br/>-->
        <j:ajaxupload t:id="uploadImage"
                      t:multiple="false"
                      t:allowedExtensions="[jpg, png, gif]"
                      t:sizeLimit="1M">
            <noscript>
                <p>JavaScript must be activated!</p>
            </noscript>
        </j:ajaxupload>

        <br/>

    </t:zone>
    </t:form>
    <t:block t:id="uploadResult">
        <div>
            <h4>Crop Image</h4>

            <t:if test="message">
                <p>
                    <strong>${message}</strong>
                </p>
            </t:if>
            <t:LygCropImage t:id="cropImage" image="prop:getUncroppedImage()">

            </t:LygCropImage>
            <p><t:LygSubmit t:id="submit" value="literal:Crop Image"></t:LygSubmit></p>
        </div>
    </t:block>
</t:layout>

Regards,

Greg

[EmmanuelDemey]

Hi

Can you give more informations about your issue : what is the LygCropImage ? When you talk about "crop component", do you mean LygCropImage ? Can you send your java class of your page ? and also the files of your "crop component" .

Thanks.

Manu

[liftyourgame]

Hi Manu,

This issue turned out to be my own fault.

I forgot that I had a form inside my LygCropImage component.

I'm having a different issue now. The LygCropComponent uses a jQuery component

The problem is that the JavaScript is not being included in the zone update. This may be a limitation of Zone updates in Tapestry. I can update my page to include the JavaScript on first render but I can't find a way to trigger the initialization when I return the zone response.

I've attached some of my code.

Thanks again for producing such a useful component as tapestry-jquery

Regards,

Greg.

On 06/12/11 18:58, Emmanuel DEMEY wrote:

Hi

Can you give more informations about your issue : what is the LygCropImage ? When you talk about "crop component", do you mean LygCropImage ? Can you send your java class of your page ? and also the files of your "crop component" .

Thanks.

Manu

---

Reply to this email directly or view it on GitHub: https://github.com/got5/tapestry5-jquery/issues/98#issuecomment-3029737 <t:container xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd" xmlns:j="tapestry-library:jquery" xmlns:p="tapestry:parameter">

<t:form t:id="cropForm">
    <input t:id="x" t:type="textfield" value="x"/>
    <input t:id="y" t:type="textfield" value="y"/>
    <input t:id="w" t:type="textfield" value="w"/>
    <input t:id="h" t:type="textfield" value="h"/>
<table>
    <tr>
        <td>
            <t:lygvisionimage  t:id="visionImage" visionImage="image"/>
        </td>
        <td>
            <div style="width:100px;height:100px;overflow:hidden;margin-left:5px;">
                <t:lygvisionimage  t:id="preview" visionImage="image"/>
            </div>
        </td>
    </tr>
</table>
    <t:LygSubmit value="literal:Crop"></t:LygSubmit>
</t:form>

/t:container

[EmmanuelDemey]

Hi

Normally, if a zone contains a component with statics resources, when it is updates, the files are added to the response.

How did you include your js file, and where ?

Manu

[liftyourgame]

Hi Manu,

I initially relied on the LygCropImage component to include the js files via:

@Import(library = { "jquery.Jcrop.min.js", "cropimage.js" }, stylesheet = { "jquery.Jcrop.css" })

just before the class definition in LygCropImage.java

This works fine on a full page render but via Ajax the js files aren't imported.

Regards,

Greg

On 7/12/2011 5:47 PM, Emmanuel DEMEY wrote:

Hi

Normally, if a zone contains a component with statics resources, when it is updates, the files are added to the response.

How did you include your js file, and where ?

Manu

---

Reply to this email directly or view it on GitHub: https://github.com/got5/tapestry5-jquery/issues/98#issuecomment-3044281

[EmmanuelDemey]

Can you have a look to the Ajax response. You should have a scropts and stylesheets value in the JSON.

You can compare with this page : http://tapestry5-jquery.com/docs/components/superfish. When you click to th 2nd tab, The Ajax response contains all my static resources.

[liftyourgame]

Hi Manu,

You are correct. The needed resources are retrieved.

My init code was looking for an item with client id #visionimage

For an ajax call the id #visionimage_1341797587e

If I change my init code to go off class instead then everything should work.

Thanks again for your help.

Greg

On 7/12/2011 6:05 PM, Emmanuel DEMEY wrote:

Can you have a look to the Ajax response. You should have a scropts and stylesheets value in the JSON.

You can compare with this page : http://tapestry5-jquery.com/docs/components/superfish. When you click to th 2nd tab, The Ajax response contains all my static resources.

---

Reply to this email directly or view it on GitHub: https://github.com/got5/tapestry5-jquery/issues/98#issuecomment-3044394

[EmmanuelDemey]

Maybe you can use a CSS class in your selector instead of an id.

[liftyourgame]

That's what I'll do. Thanks.

Regards,

Greg

On 07/12/2011, at 6:45 PM, Emmanuel DEMEYreply@reply.github.com wrote:

Maybe you can use a CSS class in your selector instead of an id.

---

Reply to this email directly or view it on GitHub: https://github.com/got5/tapestry5-jquery/issues/98#issuecomment-3044641