jszpila
jszpila

Reputation: 706

Prevent Wicket from generating HTML for container elements?

I'm running into an issue with Wicket generating markup for elements that programmatically need to be there, but not structurally. It's not messing anything up, but I like to keep the page as tidy as possible. It should be noted that I'm a front-end developer, so I'd like to keep my hands out of the java files, if possible.

Say I have the following HTML that's part of a component's template:

<ul class="configList" wicket:id="rows">
    <li wicket:id="cols">
        <div wicket:id="checkBoxThing"></div>
    </li>
</ul>

And this is the template for checkBoxThing:

<wicket:panel>
    <div wicket:id="checkboxContainer">
        <label wicket:id="label"></label>
        <input  type="checkbox" wicket:id="checkbox" name="check" />
    </div>
</wicket:panel>

When the page is viewed, the resulting markup looks like this:

<ul class="configList>
    <li>
        <div>
          <div id="RandomWicketID">
             <label>Checkbox Label</label>
             <input type="checkbox" />
          </div>
        </div>
    </li>
</ul>

Those two DIVs inside the LI aren't doing anything structurally or being used for a client-side script; they're just taking up space. Is there something I can do in the template to tell Wicket not to render them? I can't seem to find any parameters I can pass to accomplish this, and no one around the office seems to know.

Thanks in advance!

Upvotes: 3

Views: 5585

Answers (3)

martin-g
martin-g

Reputation: 17503

Yet another option is Component#setRenderBodyOnly(true).

Upvotes: 1

luniv
luniv

Reputation: 186

Use the <wicket:container> tag.

Note: if Wicket's configuration mode is set to development (the default IIRC) the wicket attributes & tags will still be present in the markup. If you change it to deployment, Wicket will strip them from the output (see https://cwiki.apache.org/WICKET/how-to-remove-wicket-markup-from-output.html).

configList:

<ul class="configList" wicket:id="rows">
    <li wicket:id="cols">
        <wicket:container wicket:id="checkBoxThing" />
    </li>
</ul>

checkBoxThing:

<wicket:panel>
    <wicket:container wicket:id="checkboxContainer">
        <label>Checkbox Label</label>
        <input type="checkbox" />
    </wicket:container>
</wicket:panel>

Result (in deployment mode):

<ul class="configList>
    <li>
        <label>Checkbox Label</label>
        <input id="foo" type="checkbox" />
    </li>
</ul>

Upvotes: 14

Sam Stainsby
Sam Stainsby

Reputation: 1608

Use a <wicket:container> eg.

<ul class="configList" wicket:id="rows">
    <li wicket:id="cols">
        <wicket:container wicket:id="checkBoxThing"></wicket:container>
    </li>
</ul>

In general, see https://cwiki.apache.org/WICKET/wickets-xhtml-tags.html

Upvotes: 2

Related Questions