You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Martin Grigorov <mg...@apache.org> on 2010/10/29 16:03:53 UTC
Re: Trying to submit form with id that is not in document.
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
>
>