You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Clint Checketts <ch...@gmail.com> on 2010/10/29 00:19:13 UTC
Replacing markup generated by a Behavior
I have a Visitor that iterates through my forms and adds a Behavior that
writes out to the Response a <div> and any feedback messages that belong to
that component. This is really great because it gives me inline feedback
panels. Here is the problem: if the component is ever updated via ajax, the
component the behavior is tied to get replaced in the DOM, but the feedback
messages get written out in another <div> again.
My core need is to create some sort of auto-adding inline feedbackpanel.
Any good recommendations on how to work around this? It's such a good design
pratice to have error messages next to the offending input fields, I'm sure
others have had to deal with this.
Re: Trying to submit form with id that is not in document.
Posted by Martin Grigorov <mg...@apache.org>.
It is documented in ModalWindow javadoc:
If you want to use form in modal window component make sure that you put the
modal window itself
* in another form (nesting forms is legal in Wicket) and that the form on
modal window is submitted
* before the window get closed.
On Fri, Oct 29, 2010 at 3:59 PM, Maris Orbidans <ma...@ingg.com>wrote:
> Yes, it worked.
> Thanks a lot.
>
> I hope developers will fix the issue.
>
> Maris
>
> > -----Original Message-----
> > From: Leszek Gawron [mailto:lgawron@apache.org]
> > Sent: 29 October 2010 14:20
> > To: users@wicket.apache.org
> > Subject: Re: Trying to submit form with id that is not in document.
> >
> > On 2010-10-29 14:06, Maris Orbidans wrote:
> > > Hi
> > >
> > > I have a modal window with a panel inside it. After I refresh the panel
> > > via ajax all buttons inside the panel stop working. Submit doesn't work
> > > and there is this message in ajax debug window:
> > >
> > > ERROR: Wicket.Ajax.Call.submitFormById: Trying to submit form with id
> > > 'categoryListForm135' that is not in document.
> > >
> > >
> > > This is relevant output from ajax debug:
> > >
> > >
> > > <?xml version="1.0"
> > > encoding="UTF-8"?><ajax-response><header-contribution
> encoding="wicket1"
> > >> <![CDATA[<head xmlns:wicket="http://wicket.apache.org"><script
> > > type="text/javascript"
> > >
> src="resources/org.apache.wicket.markup.html.WicketEventReference/wicket
> > > -event.js"></script>
> > > <script type="text/javascript"
> > >
> src="resources/org.apache.wicket.ajax.WicketAjaxReference/wicket-ajax.js
> > > "></script>
> > > <script type="text/javascript"
> > >
> src="resources/org.apache.wicket.ajax.AbstractDefaultAjaxBehavior/wicket
> > > -ajax-debug.js"></script>
> > > <script type="text/javascript"
> > > id="wicket-ajax-debug-enable"><!--/*--><![CDATA[/*><!--*/
> > > wicketAjaxDebugEnable=true;
> > > /*-->]^]^>*/</script>
> > >
> > > </head>]]></header-contribution><component id="categoryListPanel112"
> > >> <![CDATA[<div id="categoryListPanel112">
> > >
> > > <form id="categoryListForm135" method="post"
> > >
> action="?wicket:interface=:0:buttonsPanel:packagesWindow:content:categor
> > > yListPanel:categoryListForm::IFormSubmitListener::"><div
> > >
> style="width:0px;height:0px;position:absolute;left:-100px;top:-100px;ove
> > > rflow:hidden"><input type="hidden" name="categoryListForm135_hf_0"
> > > id="categoryListForm135_hf_0" /></div>
> > >
> > > <table class="betlim">
> > > <tr>
> > > <th>Name</th>
> > > <th>Description</th>
> > > <th></th>
> > > </tr>
> > > <tr>
> > > <td>
> > > <span>NONE</span>
> > > </td>
> > > <td>
> > > <span>NO CATEGORY</span>
> > > </td>
> > > <td>
> > > <input type="button" value="Delete"
> > > name="categories:1:deleteBtn" id="deleteBtn136" onclick="if
> > > (!confirm('Are you sure you want to delete package category NONE ?'))
> > > {return}; null;var wcall=wicketSubmitFormById('categoryListForm135',
> > >
> '?wicket:interface=:0:buttonsPanel:packagesWindow:content:categoryListPa
> > >
> nel:categoryListForm:categories:1:deleteBtn::IActivePageBehaviorListener
> > > :0:-1&wicket:ignoreIfNotActive=true', 'categories:1:deleteBtn'
> > > ,function() { }.bind(this),function() { }.bind(this), function()
> {return
> > >
> Wicket.$$(this)&&Wicket.$$('categoryListForm135')}.bind(this));;
> > > ; return false;"/>
> > > </td>
> > >
> > >
> > > ....
> > >
> > >
> > > </table>
> > >
> > > </form>
> > >
> > > </div>]]></component><component id="feedback134"><![CDATA[<span
> > > id="feedback134">
> > > <ul class="feedbackPanel">
> > > <li class="feedbackPanelINFO">
> > > <span class="feedbackPanelINFO">Package category'3333'
> > > added.</span>
> > > </li>
> > > </ul>
> > > </span>]]></component></ajax-response>
> > >
> > >
> > > As you can see there is form with id "categoryListForm135".
> > > For some reason javascript cannot find it.
> > >
> > >
> > > Panel html:
> > >
> > >
> > > <wicket:panel>
> > >
> > > <form wicket:id="categoryListForm">
> > >
> > > <table class="betlim">
> > > <tr>
> > > <th>Name</th>
> > > <th>Description</th>
> > > <th></th>
> > > </tr>
> > > <tr wicket:id="categories">
> > > <td>
> > > <span wicket:id="name"></span>
> > > </td>
> > > <td>
> > > <span wicket:id="description"></span>
> > > </td>
> > > <td>
> > > <input type="button" wicket:id="deleteBtn"
> > > value="Delete"/>
> > > </td>
> > > </tr>
> > > </table>
> > >
> > > </form>
> > >
> > > </wicket:panel>
> > >
> > > When it happens there is javascript error "form is null" in
> > > wicket-ajax.js
> > >
> > > submitFormById: function(formId, submitButton) {
> > > var form = Wicket.$(formId);
> > > if (form == null || typeof (form) == "undefined")
> > > Wicket.Log.error("Wicket.Ajax.Call.submitFormById: Trying to submit
> form
> > > with id '"+formId+"' that is not in document.");
> > > return this.submitForm(form, submitButton);
> > > },
> > > submitForm: function(form, submitButton) {
> > > if (form.onsubmit) { // ERROR IS HERE
> > > if (!form.onsubmit()) return;
> > > }
> > > if (this.handleMultipart(form, submitButton)) {
> > > return true;
> > > }
> > > var body = function() {
> > > var s = Wicket.Form.serialize(form);
> > > if (submitButton != null) {
> > > s += Wicket.Form.encode(submitButton) + "=1";
> > > }
> > > return s;
> > > }
> > > return this.request.post(body);
> > >
> > >
> > > Any idea what can be wrong?
> >
> > yes ... your modal window has to be put into a form, so the panel's form
> > is nested:
> >
> > Example:
> >
> > > public class TrackerGroupsPanel extends Panel {
> > > @SpringBean
> > > private FleetService fleetService;
> > > @SpringBean
> > > private TrackerService trackerService;
> > >
> > > private ModalWindow modalWindow;
> > > protected FeedbackPanel feedback;
> > >
> > > public TrackerGroupsPanel( String id, final IModel<Fleet> model ) {
> > > super( id, model );
> > > setOutputMarkupId( true );
> > >
> > > add( new Form<Void>( "form" ) {
> > > {
> > > add( feedback = new FeedbackPanel(
> "feedback" ) );
> > > feedback.setOutputMarkupId( true );
> > >
> > > add( modalWindow = new ModalWindow(
> "modalWindow"
> > ) );
> > > modalWindow.setWindowClosedCallback( new
> > WindowClosedCallback() {
> > > @Override
> > > public void onClose(
> AjaxRequestTarget
> > target ) {
> > > target.addComponent(
> > TrackerGroupsPanel.this );
> > > }
> > > } );
> > >
> > > add( new AjaxLink<Fleet>( "registerGroup",
> model )
> > {
> > > @Override
> > > public void onClick(
> AjaxRequestTarget
> > target ) {
> > > modalWindow.setTitle( "Nowa
> grupa
> > pojazdów" );
> > > modalWindow.setContent( new
> > TrackerGroupPanel( modalWindow.getContentId(), Model.of( new
> TrackerGroup(
> > >
> > getModelObject() ) ) ) {
> > > @Override
> > > protected void
> onSave(
> > AjaxRequestTarget target ) {
> > >
> modalWindow.close( target
> > );
> > > }
> > >
> > > } );
> > > target.addComponent(
> feedback );
> > > modalWindow.show( target );
> > > }
> > > } );
> > [...]
> >
> >
> > then you will hit another bug if your form starts using ajax onchange
> > notifications ... but that is another tale :)
> >
> > --
> > Leszek Gawron http://lgawron.blogspot.com
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> > For additional commands, e-mail: users-help@wicket.apache.org
> >
> >
> > _____________________________________________________________________
> > This e-mail has been scanned for viruses by MessageLabs.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
RE: Trying to submit form with id that is not in document.
Posted by Maris Orbidans <ma...@ingg.com>.
Yes, it worked.
Thanks a lot.
I hope developers will fix the issue.
Maris
> -----Original Message-----
> From: Leszek Gawron [mailto:lgawron@apache.org]
> Sent: 29 October 2010 14:20
> To: users@wicket.apache.org
> Subject: Re: Trying to submit form with id that is not in document.
>
> On 2010-10-29 14:06, Maris Orbidans wrote:
> > Hi
> >
> > I have a modal window with a panel inside it. After I refresh the panel
> > via ajax all buttons inside the panel stop working. Submit doesn't work
> > and there is this message in ajax debug window:
> >
> > ERROR: Wicket.Ajax.Call.submitFormById: Trying to submit form with id
> > 'categoryListForm135' that is not in document.
> >
> >
> > This is relevant output from ajax debug:
> >
> >
> > <?xml version="1.0"
> > encoding="UTF-8"?><ajax-response><header-contribution encoding="wicket1"
> >> <![CDATA[<head xmlns:wicket="http://wicket.apache.org"><script
> > type="text/javascript"
> > src="resources/org.apache.wicket.markup.html.WicketEventReference/wicket
> > -event.js"></script>
> > <script type="text/javascript"
> > src="resources/org.apache.wicket.ajax.WicketAjaxReference/wicket-ajax.js
> > "></script>
> > <script type="text/javascript"
> > src="resources/org.apache.wicket.ajax.AbstractDefaultAjaxBehavior/wicket
> > -ajax-debug.js"></script>
> > <script type="text/javascript"
> > id="wicket-ajax-debug-enable"><!--/*--><![CDATA[/*><!--*/
> > wicketAjaxDebugEnable=true;
> > /*-->]^]^>*/</script>
> >
> > </head>]]></header-contribution><component id="categoryListPanel112"
> >> <![CDATA[<div id="categoryListPanel112">
> >
> > <form id="categoryListForm135" method="post"
> > action="?wicket:interface=:0:buttonsPanel:packagesWindow:content:categor
> > yListPanel:categoryListForm::IFormSubmitListener::"><div
> > style="width:0px;height:0px;position:absolute;left:-100px;top:-100px;ove
> > rflow:hidden"><input type="hidden" name="categoryListForm135_hf_0"
> > id="categoryListForm135_hf_0" /></div>
> >
> > <table class="betlim">
> > <tr>
> > <th>Name</th>
> > <th>Description</th>
> > <th></th>
> > </tr>
> > <tr>
> > <td>
> > <span>NONE</span>
> > </td>
> > <td>
> > <span>NO CATEGORY</span>
> > </td>
> > <td>
> > <input type="button" value="Delete"
> > name="categories:1:deleteBtn" id="deleteBtn136" onclick="if
> > (!confirm('Are you sure you want to delete package category NONE ?'))
> > {return}; null;var wcall=wicketSubmitFormById('categoryListForm135',
> > '?wicket:interface=:0:buttonsPanel:packagesWindow:content:categoryListPa
> > nel:categoryListForm:categories:1:deleteBtn::IActivePageBehaviorListener
> > :0:-1&wicket:ignoreIfNotActive=true', 'categories:1:deleteBtn'
> > ,function() { }.bind(this),function() { }.bind(this), function() {return
> > Wicket.$$(this)&&Wicket.$$('categoryListForm135')}.bind(this));;
> > ; return false;"/>
> > </td>
> >
> >
> > ....
> >
> >
> > </table>
> >
> > </form>
> >
> > </div>]]></component><component id="feedback134"><![CDATA[<span
> > id="feedback134">
> > <ul class="feedbackPanel">
> > <li class="feedbackPanelINFO">
> > <span class="feedbackPanelINFO">Package category'3333'
> > added.</span>
> > </li>
> > </ul>
> > </span>]]></component></ajax-response>
> >
> >
> > As you can see there is form with id "categoryListForm135".
> > For some reason javascript cannot find it.
> >
> >
> > Panel html:
> >
> >
> > <wicket:panel>
> >
> > <form wicket:id="categoryListForm">
> >
> > <table class="betlim">
> > <tr>
> > <th>Name</th>
> > <th>Description</th>
> > <th></th>
> > </tr>
> > <tr wicket:id="categories">
> > <td>
> > <span wicket:id="name"></span>
> > </td>
> > <td>
> > <span wicket:id="description"></span>
> > </td>
> > <td>
> > <input type="button" wicket:id="deleteBtn"
> > value="Delete"/>
> > </td>
> > </tr>
> > </table>
> >
> > </form>
> >
> > </wicket:panel>
> >
> > When it happens there is javascript error "form is null" in
> > wicket-ajax.js
> >
> > submitFormById: function(formId, submitButton) {
> > var form = Wicket.$(formId);
> > if (form == null || typeof (form) == "undefined")
> > Wicket.Log.error("Wicket.Ajax.Call.submitFormById: Trying to submit form
> > with id '"+formId+"' that is not in document.");
> > return this.submitForm(form, submitButton);
> > },
> > submitForm: function(form, submitButton) {
> > if (form.onsubmit) { // ERROR IS HERE
> > if (!form.onsubmit()) return;
> > }
> > if (this.handleMultipart(form, submitButton)) {
> > return true;
> > }
> > var body = function() {
> > var s = Wicket.Form.serialize(form);
> > if (submitButton != null) {
> > s += Wicket.Form.encode(submitButton) + "=1";
> > }
> > return s;
> > }
> > return this.request.post(body);
> >
> >
> > Any idea what can be wrong?
>
> yes ... your modal window has to be put into a form, so the panel's form
> is nested:
>
> Example:
>
> > public class TrackerGroupsPanel extends Panel {
> > @SpringBean
> > private FleetService fleetService;
> > @SpringBean
> > private TrackerService trackerService;
> >
> > private ModalWindow modalWindow;
> > protected FeedbackPanel feedback;
> >
> > public TrackerGroupsPanel( String id, final IModel<Fleet> model ) {
> > super( id, model );
> > setOutputMarkupId( true );
> >
> > add( new Form<Void>( "form" ) {
> > {
> > add( feedback = new FeedbackPanel( "feedback" ) );
> > feedback.setOutputMarkupId( true );
> >
> > add( modalWindow = new ModalWindow( "modalWindow"
> ) );
> > modalWindow.setWindowClosedCallback( new
> WindowClosedCallback() {
> > @Override
> > public void onClose( AjaxRequestTarget
> target ) {
> > target.addComponent(
> TrackerGroupsPanel.this );
> > }
> > } );
> >
> > add( new AjaxLink<Fleet>( "registerGroup", model )
> {
> > @Override
> > public void onClick( AjaxRequestTarget
> target ) {
> > modalWindow.setTitle( "Nowa grupa
> pojazdów" );
> > modalWindow.setContent( new
> TrackerGroupPanel( modalWindow.getContentId(), Model.of( new TrackerGroup(
> >
> getModelObject() ) ) ) {
> > @Override
> > protected void onSave(
> AjaxRequestTarget target ) {
> > modalWindow.close( target
> );
> > }
> >
> > } );
> > target.addComponent( feedback );
> > modalWindow.show( target );
> > }
> > } );
> [...]
>
>
> then you will hit another bug if your form starts using ajax onchange
> notifications ... but that is another tale :)
>
> --
> Leszek Gawron http://lgawron.blogspot.com
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
> _____________________________________________________________________
> This e-mail has been scanned for viruses by MessageLabs.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Trying to submit form with id that is not in document.
Posted by Leszek Gawron <lg...@apache.org>.
On 2010-10-29 14:06, Maris Orbidans wrote:
> Hi
>
> I have a modal window with a panel inside it. After I refresh the panel
> via ajax all buttons inside the panel stop working. Submit doesn't work
> and there is this message in ajax debug window:
>
> ERROR: Wicket.Ajax.Call.submitFormById: Trying to submit form with id
> 'categoryListForm135' that is not in document.
>
>
> This is relevant output from ajax debug:
>
>
> <?xml version="1.0"
> encoding="UTF-8"?><ajax-response><header-contribution encoding="wicket1"
>> <![CDATA[<head xmlns:wicket="http://wicket.apache.org"><script
> type="text/javascript"
> src="resources/org.apache.wicket.markup.html.WicketEventReference/wicket
> -event.js"></script>
> <script type="text/javascript"
> src="resources/org.apache.wicket.ajax.WicketAjaxReference/wicket-ajax.js
> "></script>
> <script type="text/javascript"
> src="resources/org.apache.wicket.ajax.AbstractDefaultAjaxBehavior/wicket
> -ajax-debug.js"></script>
> <script type="text/javascript"
> id="wicket-ajax-debug-enable"><!--/*--><![CDATA[/*><!--*/
> wicketAjaxDebugEnable=true;
> /*-->]^]^>*/</script>
>
> </head>]]></header-contribution><component id="categoryListPanel112"
>> <![CDATA[<div id="categoryListPanel112">
>
> <form id="categoryListForm135" method="post"
> action="?wicket:interface=:0:buttonsPanel:packagesWindow:content:categor
> yListPanel:categoryListForm::IFormSubmitListener::"><div
> style="width:0px;height:0px;position:absolute;left:-100px;top:-100px;ove
> rflow:hidden"><input type="hidden" name="categoryListForm135_hf_0"
> id="categoryListForm135_hf_0" /></div>
>
> <table class="betlim">
> <tr>
> <th>Name</th>
> <th>Description</th>
> <th></th>
> </tr>
> <tr>
> <td>
> <span>NONE</span>
> </td>
> <td>
> <span>NO CATEGORY</span>
> </td>
> <td>
> <input type="button" value="Delete"
> name="categories:1:deleteBtn" id="deleteBtn136" onclick="if
> (!confirm('Are you sure you want to delete package category NONE ?'))
> {return}; null;var wcall=wicketSubmitFormById('categoryListForm135',
> '?wicket:interface=:0:buttonsPanel:packagesWindow:content:categoryListPa
> nel:categoryListForm:categories:1:deleteBtn::IActivePageBehaviorListener
> :0:-1&wicket:ignoreIfNotActive=true', 'categories:1:deleteBtn'
> ,function() { }.bind(this),function() { }.bind(this), function() {return
> Wicket.$$(this)&&Wicket.$$('categoryListForm135')}.bind(this));;
> ; return false;"/>
> </td>
>
>
> ....
>
>
> </table>
>
> </form>
>
> </div>]]></component><component id="feedback134"><![CDATA[<span
> id="feedback134">
> <ul class="feedbackPanel">
> <li class="feedbackPanelINFO">
> <span class="feedbackPanelINFO">Package category'3333'
> added.</span>
> </li>
> </ul>
> </span>]]></component></ajax-response>
>
>
> As you can see there is form with id "categoryListForm135".
> For some reason javascript cannot find it.
>
>
> Panel html:
>
>
> <wicket:panel>
>
> <form wicket:id="categoryListForm">
>
> <table class="betlim">
> <tr>
> <th>Name</th>
> <th>Description</th>
> <th></th>
> </tr>
> <tr wicket:id="categories">
> <td>
> <span wicket:id="name"></span>
> </td>
> <td>
> <span wicket:id="description"></span>
> </td>
> <td>
> <input type="button" wicket:id="deleteBtn"
> value="Delete"/>
> </td>
> </tr>
> </table>
>
> </form>
>
> </wicket:panel>
>
> When it happens there is javascript error "form is null" in
> wicket-ajax.js
>
> submitFormById: function(formId, submitButton) {
> var form = Wicket.$(formId);
> if (form == null || typeof (form) == "undefined")
> Wicket.Log.error("Wicket.Ajax.Call.submitFormById: Trying to submit form
> with id '"+formId+"' that is not in document.");
> return this.submitForm(form, submitButton);
> },
> submitForm: function(form, submitButton) {
> if (form.onsubmit) { // ERROR IS HERE
> if (!form.onsubmit()) return;
> }
> if (this.handleMultipart(form, submitButton)) {
> return true;
> }
> var body = function() {
> var s = Wicket.Form.serialize(form);
> if (submitButton != null) {
> s += Wicket.Form.encode(submitButton) + "=1";
> }
> return s;
> }
> return this.request.post(body);
>
>
> Any idea what can be wrong?
yes ... your modal window has to be put into a form, so the panel's form
is nested:
Example:
> public class TrackerGroupsPanel extends Panel {
> @SpringBean
> private FleetService fleetService;
> @SpringBean
> private TrackerService trackerService;
>
> private ModalWindow modalWindow;
> protected FeedbackPanel feedback;
>
> public TrackerGroupsPanel( String id, final IModel<Fleet> model ) {
> super( id, model );
> setOutputMarkupId( true );
>
> add( new Form<Void>( "form" ) {
> {
> add( feedback = new FeedbackPanel( "feedback" ) );
> feedback.setOutputMarkupId( true );
>
> add( modalWindow = new ModalWindow( "modalWindow" ) );
> modalWindow.setWindowClosedCallback( new WindowClosedCallback() {
> @Override
> public void onClose( AjaxRequestTarget target ) {
> target.addComponent( TrackerGroupsPanel.this );
> }
> } );
>
> add( new AjaxLink<Fleet>( "registerGroup", model ) {
> @Override
> public void onClick( AjaxRequestTarget target ) {
> modalWindow.setTitle( "Nowa grupa pojazdów" );
> modalWindow.setContent( new TrackerGroupPanel( modalWindow.getContentId(), Model.of( new TrackerGroup(
> getModelObject() ) ) ) {
> @Override
> protected void onSave( AjaxRequestTarget target ) {
> modalWindow.close( target );
> }
>
> } );
> target.addComponent( feedback );
> modalWindow.show( target );
> }
> } );
[...]
then you will hit another bug if your form starts using ajax onchange
notifications ... but that is another tale :)
--
Leszek Gawron http://lgawron.blogspot.com
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Trying to submit form with id that is not in document.
Posted by Maris Orbidans <ma...@ingg.com>.
Hi
I have a modal window with a panel inside it. After I refresh the panel
via ajax all buttons inside the panel stop working. Submit doesn't work
and there is this message in ajax debug window:
ERROR: Wicket.Ajax.Call.submitFormById: Trying to submit form with id
'categoryListForm135' that is not in document.
This is relevant output from ajax debug:
<?xml version="1.0"
encoding="UTF-8"?><ajax-response><header-contribution encoding="wicket1"
><![CDATA[<head xmlns:wicket="http://wicket.apache.org"><script
type="text/javascript"
src="resources/org.apache.wicket.markup.html.WicketEventReference/wicket
-event.js"></script>
<script type="text/javascript"
src="resources/org.apache.wicket.ajax.WicketAjaxReference/wicket-ajax.js
"></script>
<script type="text/javascript"
src="resources/org.apache.wicket.ajax.AbstractDefaultAjaxBehavior/wicket
-ajax-debug.js"></script>
<script type="text/javascript"
id="wicket-ajax-debug-enable"><!--/*--><![CDATA[/*><!--*/
wicketAjaxDebugEnable=true;
/*-->]^]^>*/</script>
</head>]]></header-contribution><component id="categoryListPanel112"
><![CDATA[<div id="categoryListPanel112">
<form id="categoryListForm135" method="post"
action="?wicket:interface=:0:buttonsPanel:packagesWindow:content:categor
yListPanel:categoryListForm::IFormSubmitListener::"><div
style="width:0px;height:0px;position:absolute;left:-100px;top:-100px;ove
rflow:hidden"><input type="hidden" name="categoryListForm135_hf_0"
id="categoryListForm135_hf_0" /></div>
<table class="betlim">
<tr>
<th>Name</th>
<th>Description</th>
<th></th>
</tr>
<tr>
<td>
<span>NONE</span>
</td>
<td>
<span>NO CATEGORY</span>
</td>
<td>
<input type="button" value="Delete"
name="categories:1:deleteBtn" id="deleteBtn136" onclick="if
(!confirm('Are you sure you want to delete package category NONE ?'))
{return}; null;var wcall=wicketSubmitFormById('categoryListForm135',
'?wicket:interface=:0:buttonsPanel:packagesWindow:content:categoryListPa
nel:categoryListForm:categories:1:deleteBtn::IActivePageBehaviorListener
:0:-1&wicket:ignoreIfNotActive=true', 'categories:1:deleteBtn'
,function() { }.bind(this),function() { }.bind(this), function() {return
Wicket.$$(this)&&Wicket.$$('categoryListForm135')}.bind(this));;
; return false;"/>
</td>
....
</table>
</form>
</div>]]></component><component id="feedback134" ><![CDATA[<span
id="feedback134">
<ul class="feedbackPanel">
<li class="feedbackPanelINFO">
<span class="feedbackPanelINFO">Package category '3333'
added.</span>
</li>
</ul>
</span>]]></component></ajax-response>
As you can see there is form with id "categoryListForm135".
For some reason javascript cannot find it.
Panel html:
<wicket:panel>
<form wicket:id="categoryListForm">
<table class="betlim">
<tr>
<th>Name</th>
<th>Description</th>
<th></th>
</tr>
<tr wicket:id="categories">
<td>
<span wicket:id="name"></span>
</td>
<td>
<span wicket:id="description"></span>
</td>
<td>
<input type="button" wicket:id="deleteBtn"
value="Delete"/>
</td>
</tr>
</table>
</form>
</wicket:panel>
When it happens there is javascript error "form is null" in
wicket-ajax.js
submitFormById: function(formId, submitButton) {
var form = Wicket.$(formId);
if (form == null || typeof (form) == "undefined")
Wicket.Log.error("Wicket.Ajax.Call.submitFormById: Trying to submit form
with id '"+formId+"' that is not in document.");
return this.submitForm(form, submitButton);
},
submitForm: function(form, submitButton) {
if (form.onsubmit) { // ERROR IS HERE
if (!form.onsubmit()) return;
}
if (this.handleMultipart(form, submitButton)) {
return true;
}
var body = function() {
var s = Wicket.Form.serialize(form);
if (submitButton != null) {
s += Wicket.Form.encode(submitButton) + "=1";
}
return s;
}
return this.request.post(body);
Any idea what can be wrong?
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Replacing markup generated by a Behavior
Posted by Maarten Bosteels <mb...@gmail.com>.
Clint,
Very interesting !
Please share some code and docs on https://cwiki.apache.org/WICKET/
Once you get it working ;-)
Thanks :-)
On Fri, Oct 29, 2010 at 8:49 AM, Jeremy Thomerson <jeremy@wickettraining.com
> wrote:
> On Fri, Oct 29, 2010 at 12:39 AM, Clint Checketts <checketts@gmail.com
> >wrote:
>
> > Elegant! I'd been trying to think of ways to add my own markup ID and
> > piggyback off any render requests that redraw the component to trigger
> and
> > render the feedback, just using the component markupId will work great!
> >
> > Instead of setOutputMarkupId(false), I'll detect that to decide to add
> the
> > ID or not and just remove the ID attribute in the onComponentTag()
> method.
> > I'll code it up tomorrow. I've got a good feeling about this.
> >
> > Thanks for the help. Also I'll check out the IAjaxRegionMarkupIdProvider.
> > Always good to check out the new interfaces.
> >
>
> Yeah, using the IAjaxRegionMarkupIdProvider you can eliminate all the
> aforementioned complexity. The markup ID of your component stays the same.
> In the interface, you just create an ID that will be rendered in your
> behavior's markup. You render that in your behavior-generated markup, and
> then Wicket will use the same ID for when it replaces the markup for that
> component - thus replacing both together.
>
> --
> Jeremy Thomerson
> http://wickettraining.com
> *Need a CMS for Wicket? Use Brix! http://brixcms.org*
>
Re: Replacing markup generated by a Behavior
Posted by Jeremy Thomerson <je...@wickettraining.com>.
On Fri, Oct 29, 2010 at 12:39 AM, Clint Checketts <ch...@gmail.com>wrote:
> Elegant! I'd been trying to think of ways to add my own markup ID and
> piggyback off any render requests that redraw the component to trigger and
> render the feedback, just using the component markupId will work great!
>
> Instead of setOutputMarkupId(false), I'll detect that to decide to add the
> ID or not and just remove the ID attribute in the onComponentTag() method.
> I'll code it up tomorrow. I've got a good feeling about this.
>
> Thanks for the help. Also I'll check out the IAjaxRegionMarkupIdProvider.
> Always good to check out the new interfaces.
>
Yeah, using the IAjaxRegionMarkupIdProvider you can eliminate all the
aforementioned complexity. The markup ID of your component stays the same.
In the interface, you just create an ID that will be rendered in your
behavior's markup. You render that in your behavior-generated markup, and
then Wicket will use the same ID for when it replaces the markup for that
component - thus replacing both together.
--
Jeremy Thomerson
http://wickettraining.com
*Need a CMS for Wicket? Use Brix! http://brixcms.org*
Re: Replacing markup generated by a Behavior
Posted by Clint Checketts <ch...@gmail.com>.
Elegant! I'd been trying to think of ways to add my own markup ID and
piggyback off any render requests that redraw the component to trigger and
render the feedback, just using the component markupId will work great!
Instead of setOutputMarkupId(false), I'll detect that to decide to add the
ID or not and just remove the ID attribute in the onComponentTag() method.
I'll code it up tomorrow. I've got a good feeling about this.
Thanks for the help. Also I'll check out the IAjaxRegionMarkupIdProvider.
Always good to check out the new interfaces.
-Clint
On Thu, Oct 28, 2010 at 5:28 PM, Jeremy Thomerson <jeremy@wickettraining.com
> wrote:
> On Thu, Oct 28, 2010 at 5:19 PM, Clint Checketts <checketts@gmail.com
> >wrote:
>
> > I have a Visitor that iterates through my forms and adds a Behavior that
> > writes out to the Response a <div> and any feedback messages that belong
> to
> > that component. This is really great because it gives me inline feedback
> > panels. Here is the problem: if the component is ever updated via ajax,
> the
> > component the behavior is tied to get replaced in the DOM, but the
> feedback
> > messages get written out in another <div> again.
> >
> > My core need is to create some sort of auto-adding inline feedbackpanel.
> >
> > Any good recommendations on how to work around this? It's such a good
> > design
> > pratice to have error messages next to the offending input fields, I'm
> sure
> > others have had to deal with this.
> >
>
> A couple options:
>
> - Use a Border. Of course, then it's harder to add this automatically
> because a border will look for the html in the parent container.
> - in your behavior, in the div you render, render the div with the markup
> ID of the component you are wrapping, and then call
> setOutputMarkupId(false)
> on the component you are wrapping. thus, you are moving the markup id up
> to
> the wrapping div.
> - if you are using wicket 1.4.10 or greater,
> implement IAjaxRegionMarkupIdProvider, which allows you to override the
> id
> of the markup region that will updated via ajax
>
> --
> Jeremy Thomerson
> http://wickettraining.com
> *Need a CMS for Wicket? Use Brix! http://brixcms.org*
>
Re: Replacing markup generated by a Behavior
Posted by Jeremy Thomerson <je...@wickettraining.com>.
On Thu, Oct 28, 2010 at 5:19 PM, Clint Checketts <ch...@gmail.com>wrote:
> I have a Visitor that iterates through my forms and adds a Behavior that
> writes out to the Response a <div> and any feedback messages that belong to
> that component. This is really great because it gives me inline feedback
> panels. Here is the problem: if the component is ever updated via ajax, the
> component the behavior is tied to get replaced in the DOM, but the feedback
> messages get written out in another <div> again.
>
> My core need is to create some sort of auto-adding inline feedbackpanel.
>
> Any good recommendations on how to work around this? It's such a good
> design
> pratice to have error messages next to the offending input fields, I'm sure
> others have had to deal with this.
>
A couple options:
- Use a Border. Of course, then it's harder to add this automatically
because a border will look for the html in the parent container.
- in your behavior, in the div you render, render the div with the markup
ID of the component you are wrapping, and then call setOutputMarkupId(false)
on the component you are wrapping. thus, you are moving the markup id up to
the wrapping div.
- if you are using wicket 1.4.10 or greater,
implement IAjaxRegionMarkupIdProvider, which allows you to override the id
of the markup region that will updated via ajax
--
Jeremy Thomerson
http://wickettraining.com
*Need a CMS for Wicket? Use Brix! http://brixcms.org*