You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Sandor Feher <sf...@bluesystem.hu> on 2014/02/13 09:00:47 UTC
AjaxFormSubmitBehavior and FilterForm problem
Hi,
I have a datatable inside a filterform. Everything works fine but I need to
filter table on every single typed characters in my filterform. To achieve
this I added an AjaxFormSubmitBehavior to my filterform.
There is one small problem with it. If I type one char it works fine but if
I type one and another then the first char always get selected and I can't
type other chars.
How can I get it work ?
Regards., Sandor
--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/AjaxFormSubmitBehavior-and-FilterForm-problem-tp4664422.html
Sent from the Users forum mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Wicket Modals and Bootstrap Modals - sizing issues
Posted by Martin Grigorov <mg...@apache.org>.
No.
l0rdn1kk0n/wicket-bootstrap provides Wicket component for TB's Modal widget.
It doesn't try to fix/workaround any issues with Wicket's ModalWindow.
There are tickets like
https://github.com/l0rdn1kk0n/wicket-bootstrap/issues/228 but I doubt we
will implement them.
Martin Grigorov
Wicket Training and Consulting
On Tue, Feb 18, 2014 at 11:38 AM, Chris Colman <chrisc@stepaheadsoftware.com
> wrote:
> Would the l0rdn1kk0n / wicket-bootstrap community have dealt with this
> issue already or do they not support Wicket/Bootstrap modal windows in
> 'responsive' mode?
>
> Regards,
> Chris
>
> >-----Original Message-----
> >From: Martin Grigorov [mailto:mgrigorov@apache.org]
> >Sent: Tuesday, 18 February 2014 6:32 PM
> >To: users@wicket.apache.org
> >Subject: Re: Wicket Modals and Bootstrap Modals - sizing issues
> >
> >Hi,
> >
> >I think you will need to tweak some CSS rules.
> >Wicket's ModalWindow main CSS class is 'wicket-modal'. So you have to
> >provide CSS rule that sets the width for any .form-control in .wicket-
> >modal.
> >You can either use LESS/SASS to generate different rules for the
> different
> >screens or with CSS media queries.
> >
> >Martin Grigorov
> >Wicket Training and Consulting
> >
> >
> >On Tue, Feb 18, 2014 at 8:04 AM, Chris Colman
> ><ch...@stepaheadsoftware.com>wrote:
> >
> >> We are using Wicket with Bootstrap which is fine except for modal
> >> window.
> >>
> >> With Wicket it appears as though the modal window provides all the
> >> markup for the out modal 'window'. We can provide HTML for the panels
> >> within that but the outer modal seems to be Wicket generated.
> >>
> >> This seems to be causing problems when using responsive Bootstrap
> >> because the calculations of the grid sizes are based on the screen
> and
> >> not the width of the modal window and so the form fields end up being
> >> wider than the form itself.
> >>
> >> Has anyone else had this problem? Is there a work around?
> >>
> >> We're not using the Wicket 'enable bootstrap' flag in the settings as
> we
> >> support bootstrap and non bootstrap markup within the same wicket
> app.
> >>
> >> Regards,
> >> Chris
> >>
> >> ---------------------------------------------------------------------
> >> 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: Wicket Modals and Bootstrap Modals - sizing issues
Posted by Chris Colman <ch...@stepaheadsoftware.com>.
Would the l0rdn1kk0n / wicket-bootstrap community have dealt with this
issue already or do they not support Wicket/Bootstrap modal windows in
'responsive' mode?
Regards,
Chris
>-----Original Message-----
>From: Martin Grigorov [mailto:mgrigorov@apache.org]
>Sent: Tuesday, 18 February 2014 6:32 PM
>To: users@wicket.apache.org
>Subject: Re: Wicket Modals and Bootstrap Modals - sizing issues
>
>Hi,
>
>I think you will need to tweak some CSS rules.
>Wicket's ModalWindow main CSS class is 'wicket-modal'. So you have to
>provide CSS rule that sets the width for any .form-control in .wicket-
>modal.
>You can either use LESS/SASS to generate different rules for the
different
>screens or with CSS media queries.
>
>Martin Grigorov
>Wicket Training and Consulting
>
>
>On Tue, Feb 18, 2014 at 8:04 AM, Chris Colman
><ch...@stepaheadsoftware.com>wrote:
>
>> We are using Wicket with Bootstrap which is fine except for modal
>> window.
>>
>> With Wicket it appears as though the modal window provides all the
>> markup for the out modal 'window'. We can provide HTML for the panels
>> within that but the outer modal seems to be Wicket generated.
>>
>> This seems to be causing problems when using responsive Bootstrap
>> because the calculations of the grid sizes are based on the screen
and
>> not the width of the modal window and so the form fields end up being
>> wider than the form itself.
>>
>> Has anyone else had this problem? Is there a work around?
>>
>> We're not using the Wicket 'enable bootstrap' flag in the settings as
we
>> support bootstrap and non bootstrap markup within the same wicket
app.
>>
>> Regards,
>> Chris
>>
>> ---------------------------------------------------------------------
>> 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: Wicket Modals and Bootstrap Modals - sizing issues
Posted by Martin Grigorov <mg...@apache.org>.
Hi,
I think you will need to tweak some CSS rules.
Wicket's ModalWindow main CSS class is 'wicket-modal'. So you have to
provide CSS rule that sets the width for any .form-control in .wicket-modal.
You can either use LESS/SASS to generate different rules for the different
screens or with CSS media queries.
Martin Grigorov
Wicket Training and Consulting
On Tue, Feb 18, 2014 at 8:04 AM, Chris Colman
<ch...@stepaheadsoftware.com>wrote:
> We are using Wicket with Bootstrap which is fine except for modal
> window.
>
> With Wicket it appears as though the modal window provides all the
> markup for the out modal 'window'. We can provide HTML for the panels
> within that but the outer modal seems to be Wicket generated.
>
> This seems to be causing problems when using responsive Bootstrap
> because the calculations of the grid sizes are based on the screen and
> not the width of the modal window and so the form fields end up being
> wider than the form itself.
>
> Has anyone else had this problem? Is there a work around?
>
> We're not using the Wicket 'enable bootstrap' flag in the settings as we
> support bootstrap and non bootstrap markup within the same wicket app.
>
> Regards,
> Chris
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
Wicket Modals and Bootstrap Modals - sizing issues
Posted by Chris Colman <ch...@stepaheadsoftware.com>.
We are using Wicket with Bootstrap which is fine except for modal
window.
With Wicket it appears as though the modal window provides all the
markup for the out modal 'window'. We can provide HTML for the panels
within that but the outer modal seems to be Wicket generated.
This seems to be causing problems when using responsive Bootstrap
because the calculations of the grid sizes are based on the screen and
not the width of the modal window and so the form fields end up being
wider than the form itself.
Has anyone else had this problem? Is there a work around?
We're not using the Wicket 'enable bootstrap' flag in the settings as we
support bootstrap and non bootstrap markup within the same wicket app.
Regards,
Chris
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
RE: AjaxFormSubmitBehavior and FilterForm problem
Posted by Sandor Feher <sf...@bluesystem.hu>.
Hi,
Thanks for the tip. I have almost done it.
Just one annoying problem. I can't set filter fields' markup up. Not the td
where the input field resides but the input tag itself.
I have five filter fields on my filtertoolbar. To use javascript trick I
have to set id for every filter fields.(Now wicket set these ids for
filter6, filter7 and so one.)
Thnx. S
--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/AjaxFormSubmitBehavior-and-FilterForm-problem-tp4664422p4664443.html
Sent from the Users forum mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
RE: AjaxFormSubmitBehavior and FilterForm problem
Posted by "Richter, Marvin" <Ma...@jestadigital.com>.
I implemented a Search for a simple ListView but could be used also for any DataView.
This solution also highlights the found String if you add the class 'highlighted' to you CSS.
The table part:
final WebMarkupContainer table = new WebMarkupContainer("table");
table.setOutputMarkupId(true);
table.add(new TableBehavior().condensed().striped());
add(table);
final TextField<String> searchQuery = new TextField<String>("searchQuery", Model.of(""));
searchQuery.add(new AjaxFormComponentUpdatingBehavior("onkeyup") {
private static final long serialVersionUID = 314186226258079912L;
@Override
protected void onUpdate(AjaxRequestTarget target) {
target.add(table);
target.appendJavaScript(
"$('.searchResult').find('td:contains(' + $('.searchQuery').val() + ')').each(function () {\n"
+ " $(this).html($(this).html().replace($('.searchQuery').val(), '<span class=\"highlighted\">' + $('.searchQuery').val() + '</span>'));\n"
+ " });");
}
});
add(searchQuery);
IModel<List<ActionJournal>> filteredHistoryEntries = new AbstractReadOnlyModel<List<ActionJournal>>() {
private static final long serialVersionUID = 6375514913998162927L;
@Override
public List<ActionJournal> getObject() {
if ((searchQuery.getInput() == null) || StringUtils.EMPTY.equals(searchQuery.getInput())) {
return model.getObject();
} else {
List<ActionJournal> filtered = model.getObject();
CollectionUtils.filter(filtered, new HistoryFilter(searchQuery.getInput()));
return filtered;
}
}
};
ListView<ActionJournal> historyEntries = new ListView<ActionJournal>("historyEntries", filteredHistoryEntries) {
private static final long serialVersionUID = 389308185477622395L;
@Override
protected void populateItem(ListItem<ActionJournal> item) {
item.setDefaultModel(new CompoundPropertyModel<ActionJournal>(item.getModel()));
item.add(new DateLabel("created", new CcaDateConverter()));
item.add(new Label("createdByLogin"));
item.add(new Label("contactChannel.name"));
item.add(new Label("action.name"));
item.add(new Label("reason.name"));
item.add(new Label("actionText"));
}
};
table.add(historyEntries);
The Predicate for comparsion (you need to replace the evaluation to check for your object fields)
private final class HistoryFilter implements Predicate {
private final String searchQuery;
private HistoryFilter(String searchQuery) {
this.searchQuery = searchQuery;
}
@Override
public boolean evaluate(Object object) {
if (object instanceof ActionJournal) {
ActionJournal entry = (ActionJournal) object;
String q = searchQuery.toLowerCase();
if ((entry.getCreatedByLogin() != null)
&& StringUtils.contains(entry.getCreatedByLogin().toLowerCase(), q)) {
return true;
} else if ((entry.getActionText() != null)
&& StringUtils.contains(entry.getActionText().toLowerCase(), q)) {
return true;
} else if ((entry.getContactChannel() != null)
&& StringUtils.contains(entry.getContactChannel().getName().toLowerCase(), q)) {
return true;
} else if ((entry.getAction() != null)
&& StringUtils.contains(entry.getAction().getName().toLowerCase(), q)) {
return true;
} else if ((entry.getReason() != null)
&& StringUtils.contains(entry.getReason().getName().toLowerCase(), q)) {
return true;
}
}
return false;
}
}
Marvin Richter
-----Original Message-----
From: Sandor Feher [mailto:sfeher@bluesystem.hu]
Sent: Thursday, February 13, 2014 10:45 AM
To: users@wicket.apache.org
Subject: Re: AjaxFormSubmitBehavior and FilterForm problem
Yes, I use TextFilteredPropertyColumn and FilterToolbar.
So it might better to use js to solve this.
--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/AjaxFormSubmitBehavior-and-FilterForm-problem-tp4664422p4664429.html
Sent from the Users forum mailing list archive at Nabble.com.
---------------------------------------------------------------------
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: AjaxFormSubmitBehavior and FilterForm problem
Posted by Sandor Feher <sf...@bluesystem.hu>.
Yes, I use TextFilteredPropertyColumn and FilterToolbar.
So it might better to use js to solve this.
--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/AjaxFormSubmitBehavior-and-FilterForm-problem-tp4664422p4664429.html
Sent from the Users forum mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: AjaxFormSubmitBehavior and FilterForm problem
Posted by Martin Grigorov <mg...@apache.org>.
Do you
use org.apache.wicket.extensions.markup.html.repeater.data.table.filter.FilteredPropertyColumn
?
Where is the filtering text input field ? Is it in the table ? If YES, then
rerendering the table will rerender the input field too.
See the JS solution or move the filtering text field out of the table...
Martin Grigorov
Wicket Training and Consulting
On Thu, Feb 13, 2014 at 10:21 AM, Sandor Feher <sf...@bluesystem.hu> wrote:
> Hi Martin,
>
> Thanks for the prompt answer. First I try to not re-render filterform's
> field.
> How could I do that ? My panel looks like this:
>
>
> I changed target.add from container to table to refresh table only but that
> did not help.
>
>
>
> Regards., Sandor
>
> --
> View this message in context:
> http://apache-wicket.1842946.n4.nabble.com/AjaxFormSubmitBehavior-and-FilterForm-problem-tp4664422p4664427.html
> Sent from the Users forum mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
Re: AjaxFormSubmitBehavior and FilterForm problem
Posted by Sandor Feher <sf...@bluesystem.hu>.
Hi Martin,
Thanks for the prompt answer. First I try to not re-render filterform's
field.
How could I do that ? My panel looks like this:
I changed target.add from container to table to refresh table only but that
did not help.
Regards., Sandor
--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/AjaxFormSubmitBehavior-and-FilterForm-problem-tp4664422p4664427.html
Sent from the Users forum mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: AjaxFormSubmitBehavior and FilterForm problem
Posted by Martin Grigorov <mg...@apache.org>.
Hi,
It seems the text input field is re-rendered with Ajax after typing a
character.
Try to not re-render the input field.
Or you can use target.appendJavaScript("...") and use something like
http://bytes.com/topic/javascript/answers/429209-how-unselect-text-input-box
Martin Grigorov
Wicket Training and Consulting
On Thu, Feb 13, 2014 at 9:00 AM, Sandor Feher <sf...@bluesystem.hu> wrote:
> Hi,
>
> I have a datatable inside a filterform. Everything works fine but I need to
> filter table on every single typed characters in my filterform. To achieve
> this I added an AjaxFormSubmitBehavior to my filterform.
> There is one small problem with it. If I type one char it works fine but if
> I type one and another then the first char always get selected and I can't
> type other chars.
> How can I get it work ?
>
>
>
>
>
> Regards., Sandor
>
> --
> View this message in context:
> http://apache-wicket.1842946.n4.nabble.com/AjaxFormSubmitBehavior-and-FilterForm-problem-tp4664422.html
> Sent from the Users forum mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>