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-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org
