You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Ichiro Furusato <ic...@gmail.com> on 2010/10/01 01:59:48 UTC
Programmatically change an HTML attribute value.
Hi,
I'm assuming this is a dumb question but I wasn't able to locate an answer
for what must be an extremely common need. I found the docs on "How to
modify an attribute on a HTML tag" but that doesn't quite fit, as the examples
are all for elements that are themselves created programmatically. Mine is
solely in markup.
I've got a lot of HTML markup surrounded by a <div> element. The <div>
element isn't created via Wicket, it's in my HTML file. It has a fair bit of
descendent content so I don't want to have to create that via Java, as
I'm assuming if I put a wicket:id on the <div> element that would replace
everything within the <div>. I just want to programmatically alter its 'class'
attribute, but I don't see how this is accomplished.
E.g.,
<div class="foo">
<table>
... etc.
</table>
</div>
This would effectively be some kind of query to locate the <div> element,
then a modification of its 'class' attribute.
Alternately, if I am required to create the <div> element programmatically,
how I attach a whole lot of HTML markup to it? Do I have to use a fragment?
That seems like a lot of work to just alter an attribute value, so like I said,
I must be missing something obvious here...
Ichiro
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Programmatically change an HTML attribute value.
Posted by Ichiro Furusato <ic...@gmail.com>.
Ack, sorry, I managed to figure it out via Michael's suggestion.
Here's the result. This show the relevant parts of embedding a
userpanel into a templatepage:
TemplatePage.html:
<div id="userdiv" wicket:id="userdiv">
<div id="user" wicket:id="user">user</div>
</div><!-- end user -->
TemplatePage.java:
WebMarkupContainer c = new WebMarkupContainer("userdiv");
c.add(new AttributeModifier("class",true,new Model<String>("even")));
add(c);
c.add(new UserPanel("user"));
The resulting markup:
<div id="userdiv" class="even">
<div id="user"><!-- begin user ..................... -->
...
</div>
</div><!-- end user -->
and I'm able to programmatically alter the value of the
'class' attribute on the userdiv (wrapper div) element.
It was a bit more complicated than I'd wished, but not
onerously so, and frankly not much more code than
using the DOM.
Thanks very much guys!
Ichiro
On 10/1/10, Ichiro Furusato <ic...@gmail.com> wrote:
> Hmm. Thanks for the answers guys but from what I've understand
> so far from my own digging and your answers is that the container
> <div> I want to modify still needs to be created programmatically,
> and I'm distinctly trying to modify the attribute of one that begins its
> life in markup (i.e., in the .html file, not the .java file).
>
> It seems that may not be possible in Wicket so I'll probably have to
> push the contained markup into a fragment and add it to a
> programmatically-created element. Not quite what I wanted (and
> more complicated than I'd prefer) but doable.
>
> It's a shame something that can be accomplished with a simple
> DOM manipulation (get element by ID, then set its attribute value)
> ends up being fairly complicated.
>
> Thanks!
>
> Ichiro
>
>
> On 10/1/10, Michael O'Cleirigh <mi...@rivulet.ca> wrote:
>> How about using a WebMarkupContainer?
>>
>> Then you can use an attribute modifier like the below example to set the
>> class value.
>>
>> All you have to do is make the new component heirarchy match the markup
>> heirarchy.
>>
>> <div wicket:id="styler" class="foo">
>> <table>
>> <form wicket:id="form>
>> ...
>> </form>
>> </table>
>> </div>
>>
>>
>> In your panel you go from:
>>
>> add (new Form ("form"));
>> ...
>>
>> to:
>>
>> WebMarkupContainer c = new WebMarkupContainer ("styler");
>> c.add (new AttributeModifier ("class", true, new Model<String>("even")));
>>
>> add (c);
>>
>> c.add (new Form("form"));
>>
>> Another option might be to use a border to add the wrapping <div> and
>> class attribute.
>>
>> Regards,
>>
>> Mike
>>
>>
>>> Hi Ichiro,
>>>
>>> This is what I use in a ListView to change the "style" attribute of
>>> table
>>> rows to give alternate colours to them.
>>>
>>> <code>
>>> item.add(new AttributeModifier("class", true, new
>>> AbstractReadOnlyModel<String>()
>>> {
>>> @Override
>>> public String getObject()
>>> {
>>> return (item.getIndex() % 2 == 1) ? "even" :
>>> "odd";
>>> }
>>> }));
>>> </code>
>>>
>>> I think you can add attributes like this to any component.
>>>
>>> On Fri, Oct 1, 2010 at 8:23 AM, James
>>> Carman<ja...@carmanconsulting.com>wrote:
>>>
>>>> AttributeModifier
>>>> On Sep 30, 2010 8:07 PM, "Ichiro Furusato"<ic...@gmail.com>
>>>> wrote:
>>>>> Hi,
>>>>>
>>>>> I'm assuming this is a dumb question but I wasn't able to locate an
>>>> answer
>>>>> for what must be an extremely common need. I found the docs on "How to
>>>>> modify an attribute on a HTML tag" but that doesn't quite fit, as the
>>>> examples
>>>>> are all for elements that are themselves created programmatically.
>>>>> Mine
>>>> is
>>>>> solely in markup.
>>>>>
>>>>> I've got a lot of HTML markup surrounded by a<div> element. The<div>
>>>>> element isn't created via Wicket, it's in my HTML file. It has a fair
>>>>> bit
>>>> of
>>>>> descendent content so I don't want to have to create that via Java, as
>>>>> I'm assuming if I put a wicket:id on the<div> element that would
>>>>> replace
>>>>> everything within the<div>. I just want to programmatically alter its
>>>> 'class'
>>>>> attribute, but I don't see how this is accomplished.
>>>>>
>>>>> E.g.,
>>>>>
>>>>> <div class="foo">
>>>>> <table>
>>>>> ... etc.
>>>>> </table>
>>>>> </div>
>>>>>
>>>>> This would effectively be some kind of query to locate the<div>
>>>>> element,
>>>>> then a modification of its 'class' attribute.
>>>>>
>>>>> Alternately, if I am required to create the<div> element
>>>> programmatically,
>>>>> how I attach a whole lot of HTML markup to it? Do I have to use a
>>>> fragment?
>>>>> That seems like a lot of work to just alter an attribute value, so
>>>>> like
>>>>> I
>>>> said,
>>>>> I must be missing something obvious here...
>>>>>
>>>>> Ichiro
>>>>>
>>>>> ---------------------------------------------------------------------
>>>>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>>>>> For additional commands, e-mail: users-help@wicket.apache.org
>>>>>
>>>
>>>
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>> For additional commands, e-mail: users-help@wicket.apache.org
>>
>>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Programmatically change an HTML attribute value.
Posted by Ichiro Furusato <ic...@gmail.com>.
Hmm. Thanks for the answers guys but from what I've understand
so far from my own digging and your answers is that the container
<div> I want to modify still needs to be created programmatically,
and I'm distinctly trying to modify the attribute of one that begins its
life in markup (i.e., in the .html file, not the .java file).
It seems that may not be possible in Wicket so I'll probably have to
push the contained markup into a fragment and add it to a
programmatically-created element. Not quite what I wanted (and
more complicated than I'd prefer) but doable.
It's a shame something that can be accomplished with a simple
DOM manipulation (get element by ID, then set its attribute value)
ends up being fairly complicated.
Thanks!
Ichiro
On 10/1/10, Michael O'Cleirigh <mi...@rivulet.ca> wrote:
> How about using a WebMarkupContainer?
>
> Then you can use an attribute modifier like the below example to set the
> class value.
>
> All you have to do is make the new component heirarchy match the markup
> heirarchy.
>
> <div wicket:id="styler" class="foo">
> <table>
> <form wicket:id="form>
> ...
> </form>
> </table>
> </div>
>
>
> In your panel you go from:
>
> add (new Form ("form"));
> ...
>
> to:
>
> WebMarkupContainer c = new WebMarkupContainer ("styler");
> c.add (new AttributeModifier ("class", true, new Model<String>("even")));
>
> add (c);
>
> c.add (new Form("form"));
>
> Another option might be to use a border to add the wrapping <div> and
> class attribute.
>
> Regards,
>
> Mike
>
>
>> Hi Ichiro,
>>
>> This is what I use in a ListView to change the "style" attribute of table
>> rows to give alternate colours to them.
>>
>> <code>
>> item.add(new AttributeModifier("class", true, new
>> AbstractReadOnlyModel<String>()
>> {
>> @Override
>> public String getObject()
>> {
>> return (item.getIndex() % 2 == 1) ? "even" :
>> "odd";
>> }
>> }));
>> </code>
>>
>> I think you can add attributes like this to any component.
>>
>> On Fri, Oct 1, 2010 at 8:23 AM, James
>> Carman<ja...@carmanconsulting.com>wrote:
>>
>>> AttributeModifier
>>> On Sep 30, 2010 8:07 PM, "Ichiro Furusato"<ic...@gmail.com>
>>> wrote:
>>>> Hi,
>>>>
>>>> I'm assuming this is a dumb question but I wasn't able to locate an
>>> answer
>>>> for what must be an extremely common need. I found the docs on "How to
>>>> modify an attribute on a HTML tag" but that doesn't quite fit, as the
>>> examples
>>>> are all for elements that are themselves created programmatically. Mine
>>> is
>>>> solely in markup.
>>>>
>>>> I've got a lot of HTML markup surrounded by a<div> element. The<div>
>>>> element isn't created via Wicket, it's in my HTML file. It has a fair
>>>> bit
>>> of
>>>> descendent content so I don't want to have to create that via Java, as
>>>> I'm assuming if I put a wicket:id on the<div> element that would
>>>> replace
>>>> everything within the<div>. I just want to programmatically alter its
>>> 'class'
>>>> attribute, but I don't see how this is accomplished.
>>>>
>>>> E.g.,
>>>>
>>>> <div class="foo">
>>>> <table>
>>>> ... etc.
>>>> </table>
>>>> </div>
>>>>
>>>> This would effectively be some kind of query to locate the<div>
>>>> element,
>>>> then a modification of its 'class' attribute.
>>>>
>>>> Alternately, if I am required to create the<div> element
>>> programmatically,
>>>> how I attach a whole lot of HTML markup to it? Do I have to use a
>>> fragment?
>>>> That seems like a lot of work to just alter an attribute value, so like
>>>> I
>>> said,
>>>> I must be missing something obvious here...
>>>>
>>>> Ichiro
>>>>
>>>> ---------------------------------------------------------------------
>>>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>>>> For additional commands, e-mail: users-help@wicket.apache.org
>>>>
>>
>>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Programmatically change an HTML attribute value.
Posted by Michael O'Cleirigh <mi...@rivulet.ca>.
How about using a WebMarkupContainer?
Then you can use an attribute modifier like the below example to set the
class value.
All you have to do is make the new component heirarchy match the markup
heirarchy.
<div wicket:id="styler" class="foo">
<table>
<form wicket:id="form>
...
</form>
</table>
</div>
In your panel you go from:
add (new Form ("form"));
...
to:
WebMarkupContainer c = new WebMarkupContainer ("styler");
c.add (new AttributeModifier ("class", true, new Model<String>("even")));
add (c);
c.add (new Form("form"));
Another option might be to use a border to add the wrapping <div> and
class attribute.
Regards,
Mike
> Hi Ichiro,
>
> This is what I use in a ListView to change the "style" attribute of table
> rows to give alternate colours to them.
>
> <code>
> item.add(new AttributeModifier("class", true, new
> AbstractReadOnlyModel<String>()
> {
> @Override
> public String getObject()
> {
> return (item.getIndex() % 2 == 1) ? "even" : "odd";
> }
> }));
> </code>
>
> I think you can add attributes like this to any component.
>
> On Fri, Oct 1, 2010 at 8:23 AM, James Carman<ja...@carmanconsulting.com>wrote:
>
>> AttributeModifier
>> On Sep 30, 2010 8:07 PM, "Ichiro Furusato"<ic...@gmail.com>
>> wrote:
>>> Hi,
>>>
>>> I'm assuming this is a dumb question but I wasn't able to locate an
>> answer
>>> for what must be an extremely common need. I found the docs on "How to
>>> modify an attribute on a HTML tag" but that doesn't quite fit, as the
>> examples
>>> are all for elements that are themselves created programmatically. Mine
>> is
>>> solely in markup.
>>>
>>> I've got a lot of HTML markup surrounded by a<div> element. The<div>
>>> element isn't created via Wicket, it's in my HTML file. It has a fair bit
>> of
>>> descendent content so I don't want to have to create that via Java, as
>>> I'm assuming if I put a wicket:id on the<div> element that would replace
>>> everything within the<div>. I just want to programmatically alter its
>> 'class'
>>> attribute, but I don't see how this is accomplished.
>>>
>>> E.g.,
>>>
>>> <div class="foo">
>>> <table>
>>> ... etc.
>>> </table>
>>> </div>
>>>
>>> This would effectively be some kind of query to locate the<div> element,
>>> then a modification of its 'class' attribute.
>>>
>>> Alternately, if I am required to create the<div> element
>> programmatically,
>>> how I attach a whole lot of HTML markup to it? Do I have to use a
>> fragment?
>>> That seems like a lot of work to just alter an attribute value, so like I
>> said,
>>> I must be missing something obvious here...
>>>
>>> Ichiro
>>>
>>> ---------------------------------------------------------------------
>>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>>> For additional commands, e-mail: users-help@wicket.apache.org
>>>
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Programmatically change an HTML attribute value.
Posted by James <ja...@gmail.com>.
Hi Ichiro,
This is what I use in a ListView to change the "style" attribute of table
rows to give alternate colours to them.
<code>
item.add(new AttributeModifier("class", true, new
AbstractReadOnlyModel<String>()
{
@Override
public String getObject()
{
return (item.getIndex() % 2 == 1) ? "even" : "odd";
}
}));
</code>
I think you can add attributes like this to any component.
On Fri, Oct 1, 2010 at 8:23 AM, James Carman <ja...@carmanconsulting.com>wrote:
> AttributeModifier
> On Sep 30, 2010 8:07 PM, "Ichiro Furusato" <ic...@gmail.com>
> wrote:
> > Hi,
> >
> > I'm assuming this is a dumb question but I wasn't able to locate an
> answer
> > for what must be an extremely common need. I found the docs on "How to
> > modify an attribute on a HTML tag" but that doesn't quite fit, as the
> examples
> > are all for elements that are themselves created programmatically. Mine
> is
> > solely in markup.
> >
> > I've got a lot of HTML markup surrounded by a <div> element. The <div>
> > element isn't created via Wicket, it's in my HTML file. It has a fair bit
> of
> > descendent content so I don't want to have to create that via Java, as
> > I'm assuming if I put a wicket:id on the <div> element that would replace
> > everything within the <div>. I just want to programmatically alter its
> 'class'
> > attribute, but I don't see how this is accomplished.
> >
> > E.g.,
> >
> > <div class="foo">
> > <table>
> > ... etc.
> > </table>
> > </div>
> >
> > This would effectively be some kind of query to locate the <div> element,
> > then a modification of its 'class' attribute.
> >
> > Alternately, if I am required to create the <div> element
> programmatically,
> > how I attach a whole lot of HTML markup to it? Do I have to use a
> fragment?
> > That seems like a lot of work to just alter an attribute value, so like I
> said,
> > I must be missing something obvious here...
> >
> > Ichiro
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> > For additional commands, e-mail: users-help@wicket.apache.org
> >
>
--
Thanks & Regards,
James
Re: Programmatically change an HTML attribute value.
Posted by James Carman <ja...@carmanconsulting.com>.
AttributeModifier
On Sep 30, 2010 8:07 PM, "Ichiro Furusato" <ic...@gmail.com>
wrote:
> Hi,
>
> I'm assuming this is a dumb question but I wasn't able to locate an answer
> for what must be an extremely common need. I found the docs on "How to
> modify an attribute on a HTML tag" but that doesn't quite fit, as the
examples
> are all for elements that are themselves created programmatically. Mine is
> solely in markup.
>
> I've got a lot of HTML markup surrounded by a <div> element. The <div>
> element isn't created via Wicket, it's in my HTML file. It has a fair bit
of
> descendent content so I don't want to have to create that via Java, as
> I'm assuming if I put a wicket:id on the <div> element that would replace
> everything within the <div>. I just want to programmatically alter its
'class'
> attribute, but I don't see how this is accomplished.
>
> E.g.,
>
> <div class="foo">
> <table>
> ... etc.
> </table>
> </div>
>
> This would effectively be some kind of query to locate the <div> element,
> then a modification of its 'class' attribute.
>
> Alternately, if I am required to create the <div> element
programmatically,
> how I attach a whole lot of HTML markup to it? Do I have to use a
fragment?
> That seems like a lot of work to just alter an attribute value, so like I
said,
> I must be missing something obvious here...
>
> Ichiro
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>