My teamsite component wont access my controller method

gregory_rowat · 2024-07-15T17:58:53+00:00

There was an error rendering this rich post.

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

Find more posts tagged with

TeamSite

Web Content Management

Note:

If there are Accepted Answers, those will be shown by default. You can switch to 'All Replies' by selecting the tab below.

Accepted answers

nipper

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

Is that happening ?

All comments

nipper

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

Is that happening ?

nipper

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

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

gregory_rowat

@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

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

@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.