My teamsite component wont access my controller method

gregory_rowat · July 15

Hello Teamsite 16.7

I have my content footer component that contains a form. This form when submitted should do some javascript then call my controller action and the page should not be reloaded.

I have the controller and method mapped in my component XML
<Data>
<Datum ID="PositionalEmail" Name="EmailAddress" Label="Add the email address for your sites positional mailbox" Type="String"/>
<Controllers>
<Controller Name="PageFeedback">
<Object Scope="local">cs.gc.forces.livesite.controller.form.ContentFooterController</Object>
<Method>sendFeedback</Method>
</Controller>
</Controllers>

<External>
<Object Scope="local">ca.gc.forces.livesite.external.core.FooterExternal</Object>
<Method>getContentFooter</Method>
</External>
</Data>

and this form in xsl
<form id="feedbackYes" method="post" class="wb-postback wb-disable-allow" type="external">

<fieldset class="gc-pft-btns chkbxrdio-grp row row-no-gutters d-sm-flex flex-sm-wrap align-items-sm-center">

<legend class="col-xs-12 col-sm-7 nojs-col-sm-12 col-md-9 col-lg-8 text-center text-sm-left nojs-text-left mrgn-tp-sm pr-sm-3">

	<span class="field-name"><xsl:value-of select="$labels/label[@key='component.footer.page-feedback-question']"/></span>

</legend>

<div class="col-xs-12 nojs-hide">

	<button name="helpful" value="Yes-Oui" class="btn btn-primary" aria-describedby="gc-pft-why"><xsl:value-of select="$labels/label[@key='component.footer.yes']"/></button>

</div>

<div class="col-xs-12 col-sm-5 col-md-3 col-lg-4 text-center text-sm-right nojs-show">

	<button type="submit" value="Yes-Oui" class="btn btn-primary" onclick="handleYesClick(event)"><xsl:value-of select="$labels/label[@key='component.footer.yes']"/></button>

	<button type="button" class="btn btn-primary mrgn-lft-sm" onclick="handleNoClick(event)"><xsl:value-of select="$labels/label[@key='component.footer.no']"/></button>

</div>

</fieldset>

</form>

and its asscoiated JS

function handleYesClick(event) {
event.preventDefault();

document.querySelector('.gc-pft-thnk').classList.remove('hide');

document.querySelector('.gc-pft-btns').classList.add('hide');

setTimeout(function() {

document.getElementById('feedbackYes').submit();

}, 1000);


return false;  

}

And my controller action with a logging statement to test access.

public class ContentFooterController {

private static final Log LOGGER = LogFactory.getLog(ContentFooterController.class);

public ForwardAction sendFeedback(RequestContext context) {

LOGGER.debug("inside the controller method");

// don't redirect page return null; }
}

when I click yes, the page reloads and I dont recieve any debug statement in my livesite runtime logs.

am I missing some kind of mapping? I was under the impression that mapping a controller action in the component xml would trigger on a submit

nipper · July 15

Your form is set to go to JS when clicked: onclick="handleYesClick(event)"

Is that happening ?

nipper · July 15

Your form is set to go to JS when clicked: onclick="handleYesClick(event)"

Is that happening ?

nipper · July 15

Also, I assume you are reading this portion of the manual:

Component controllers run when content items are submitted to the components.
ComponentId in the query string must match the component ID to run the
controller.

I do not read that as specific only to a form. Instead when the Data is sent to the component, (i.e. loading from a DCR), then the controller runs.

gregory_rowat · July 15

My last comment to reply to is not visable to me. This is a test of that

gregory_rowat · July 15

@nipper In response to your comments.

Yes, on click the JavaScript is run but the JavaScript also calls the form submission at the end. The JavaScript is necessary to control some dynamic transitions and eventually display a user feedback message which is why it is required the page not reload.

function handleYesClick(event) {
event.preventDefault();

document.querySelector('.gc-pft-thnk').classList.remove('hide');
document.querySelector('.gc-pft-btns').classList.add('hide');
setTimeout(function() {
document.getElementById('feedbackYes').submit();
}, 1000);

return false;  
}

The JavaScript should do what it needs to do then call submit on the form in question, and were it hitting my controller action it would generate an email then return null on a ForwardAction to no reload the page.

public ForwardAction sendFeedback(RequestContext context) {

LOGGER.debug("inside the controller method");

// don't redirect page return null;

}
************************************************************************************************************************
When I inspect the form on the rendered html teamsite populates the form action with the following component ID

<form method="post" id="feedbackYes" action="/en/964-metadata-test.page?submit=true&amp;componentID=1718705296596">

But the content footer component xml has it listed as
<Component ID="1349205467853" Version="3.1.1.0" PageID="0" TemplateComponentID="0" CanBeActive="true" Checksum="c5c2ee81887591d22809807f0e4c4ee6b87e355a">

I do not understand how Teamsite populates these component ids on the rendered HTML or how they could be different ids.

***********************************************************************************************************************
This contentFooter.component was a previously built component that did not require a post controller in which I have added the form section and mapped a controller action. Previously it just rendered a <DIV> with the pages modified date. The component and the page it is found on have both been saved and published on Teamsite and the <data> section of my component xml on Teamsite Y: is as follows.

<Segment ID="0">
<Properties ComponentID="1349205467853"/>
<Data>
<Controllers>
<Controller Name="PageFeedback">
<Parameters/>
<Object Scope="local">cs.gc.forces.livesite.controller.form.ContentFooterController</Object>
<Method>sendFeedback</Method>
</Controller>
</Controllers>

<External>
<Object Scope="local">ca.gc.forces.livesite.external.core.FooterExternal</Object>
<Method>getContentFooter</Method>
</External>
</Data>
</Segment>

However when I go to the same section of code in the .page xml on Livesite the controller section of the code is non-existant.

<Segments>
<Segment ID="0">
<Properties ComponentID="1718705296596"/>
<Data>

<External>
<Object Scope="local">ca.gc.forces.livesite.external.core.FooterExternal</Object>
<Method>getContentFooter</Method>
</External>
</Data>
</Segment>
</Segments>

Im fairly new to teamsite/livesite but the only example I have of a component post controller is formatted in a very simmilar way.

nipper · July 15

My point is I think a reload will be required to get the controller to run. I will be the first to admit I have not tried this so I cannot tell you with 100% certainty.

Can you try and for the page reload with the data and see if it fires ?

gregory_rowat · July 19

@nipper Yes I reformatted the form to just be the basic form and action with an <input type=submit value=submit> still does not hit the controller without the javascript component.

I can also confirm that the <controller> elements are now present on the page in the <data> section after updating and publishing the template where the component resides.

My teamsite component wont access my controller method

Best Answer

Answers

Categories