Modal Popups and Forms
Hi, I have a modal popup (implemented using YUI 2.8). The modal popup contains a form and the popup's markup is rendered (via YUI js) explicitly to document.body. The reasoning for rendering the YUI javascript to document.body is to address some issue we had with css inheritance that was causing rendering issues (conflicts with default YUI skinning) when we render the markup inline. If I change the YUI popup javascript to render inline, the issue doesn't happen, but I don't want to render the markup for the popup inline, because it potentially inherits styling that interferes with the YUI styling for the popup. Rendering the markup to document.body solves that issue. So what I know so far that I cannot change, or don't want to change, is that the YUI popup implementation needs to render its markup to document.body. I verified that the markup generated for the popup's form is indeed a div element (outside of the form tags as I would have expected) In this case, there is only one form tag (parent form where popup is initiated from) on the page and it is indeed has its encoding set to multi-part (verified in the generated markup). Note the markup for the popup dialog does not have any elements that should require multi-part encoding, but the parent form from which the popup was initiated, does. How come when I submit the dialog, I get the following exception? I guess I'm not sure what is going on and how Wicket is handling this case. java.lang.IllegalStateException: ServletRequest does not contain multipart content at org.apache.wicket.protocol.http.servlet.MultipartServletWebRequest.init (MultipartServletWebRequest.java:113) at org.apache.wicket.protocol.http.servlet.MultipartServletWebRequest.init (MultipartServletWebRequest.java:83) at org.apache.wicket.protocol.http.servlet.ServletWebRequest.newMultipartWe bRequest(ServletWebRequest.java:500) at org.apache.wicket.markup.html.form.Form.handleMultiPart(Form.java:1651) at org.apache.wicket.markup.html.form.Form.onFormSubmitted(Form.java:850) at org.apache.wicket.ajax.form.AjaxFormSubmitBehavior.onEvent(AjaxFormSubmi tBehavior.java:135) Ideas? J.D. Corbin | IQNavigator, Inc. | Technology 6465 Greenwood Village Blvd, Suite 800, Centennial, CO 80111 | Office 303.563.1503 | Mobile 303.912.0958 | www.iqnavigator.com | jcor...@iqnavigator.com
Re: Modal Popups and Forms
I am not sure..but with normal wicket modal popup you must have: form wicket:id=parent-form ... div wicket:id=modal-popup form .../ /div ... /form So with regular modal popups if parent form is not there, it will not work. Don't know if this is related because I am not familiar whether yui-popup is the same. ** Martin 2009/12/29 Corbin, James jcor...@iqnavigator.com: Hi, I have a modal popup (implemented using YUI 2.8). The modal popup contains a form and the popup's markup is rendered (via YUI js) explicitly to document.body. The reasoning for rendering the YUI javascript to document.body is to address some issue we had with css inheritance that was causing rendering issues (conflicts with default YUI skinning) when we render the markup inline. If I change the YUI popup javascript to render inline, the issue doesn't happen, but I don't want to render the markup for the popup inline, because it potentially inherits styling that interferes with the YUI styling for the popup. Rendering the markup to document.body solves that issue. So what I know so far that I cannot change, or don't want to change, is that the YUI popup implementation needs to render its markup to document.body. I verified that the markup generated for the popup's form is indeed a div element (outside of the form tags as I would have expected) In this case, there is only one form tag (parent form where popup is initiated from) on the page and it is indeed has its encoding set to multi-part (verified in the generated markup). Note the markup for the popup dialog does not have any elements that should require multi-part encoding, but the parent form from which the popup was initiated, does. How come when I submit the dialog, I get the following exception? I guess I'm not sure what is going on and how Wicket is handling this case. java.lang.IllegalStateException: ServletRequest does not contain multipart content at org.apache.wicket.protocol.http.servlet.MultipartServletWebRequest.init (MultipartServletWebRequest.java:113) at org.apache.wicket.protocol.http.servlet.MultipartServletWebRequest.init (MultipartServletWebRequest.java:83) at org.apache.wicket.protocol.http.servlet.ServletWebRequest.newMultipartWe bRequest(ServletWebRequest.java:500) at org.apache.wicket.markup.html.form.Form.handleMultiPart(Form.java:1651) at org.apache.wicket.markup.html.form.Form.onFormSubmitted(Form.java:850) at org.apache.wicket.ajax.form.AjaxFormSubmitBehavior.onEvent(AjaxFormSubmi tBehavior.java:135) Ideas? J.D. Corbin | IQNavigator, Inc. | Technology 6465 Greenwood Village Blvd, Suite 800, Centennial, CO 80111 | Office 303.563.1503 | Mobile 303.912.0958 | www.iqnavigator.com | jcor...@iqnavigator.com - To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org For additional commands, e-mail: users-h...@wicket.apache.org
Re: Modal Popups and Forms
how can there be a parent form if the markup is rendered into a div that is a child of the body. the problem is you are creating a mismatch between wicket component hierarchy and the browser's dom. the wicket serverside thinks that it will be getting a multipart form, while the wicket clientside js that performs the ajax submit doesnt think it should be submitting multipart because the form you are submitting inside the modal div does not have any multipart content. wicket modal specifically reparents form elements in the dom to prevent just this. you will have to play around with it to make it work. you can try: forcing form inside the modal to be multipart by calling setmultipart true, adding a hidden input type=file, etc. -igor On Tue, Dec 29, 2009 at 10:43 AM, Corbin, James jcor...@iqnavigator.com wrote: Hi, I have a modal popup (implemented using YUI 2.8). The modal popup contains a form and the popup's markup is rendered (via YUI js) explicitly to document.body. The reasoning for rendering the YUI javascript to document.body is to address some issue we had with css inheritance that was causing rendering issues (conflicts with default YUI skinning) when we render the markup inline. If I change the YUI popup javascript to render inline, the issue doesn't happen, but I don't want to render the markup for the popup inline, because it potentially inherits styling that interferes with the YUI styling for the popup. Rendering the markup to document.body solves that issue. So what I know so far that I cannot change, or don't want to change, is that the YUI popup implementation needs to render its markup to document.body. I verified that the markup generated for the popup's form is indeed a div element (outside of the form tags as I would have expected) In this case, there is only one form tag (parent form where popup is initiated from) on the page and it is indeed has its encoding set to multi-part (verified in the generated markup). Note the markup for the popup dialog does not have any elements that should require multi-part encoding, but the parent form from which the popup was initiated, does. How come when I submit the dialog, I get the following exception? I guess I'm not sure what is going on and how Wicket is handling this case. java.lang.IllegalStateException: ServletRequest does not contain multipart content at org.apache.wicket.protocol.http.servlet.MultipartServletWebRequest.init (MultipartServletWebRequest.java:113) at org.apache.wicket.protocol.http.servlet.MultipartServletWebRequest.init (MultipartServletWebRequest.java:83) at org.apache.wicket.protocol.http.servlet.ServletWebRequest.newMultipartWe bRequest(ServletWebRequest.java:500) at org.apache.wicket.markup.html.form.Form.handleMultiPart(Form.java:1651) at org.apache.wicket.markup.html.form.Form.onFormSubmitted(Form.java:850) at org.apache.wicket.ajax.form.AjaxFormSubmitBehavior.onEvent(AjaxFormSubmi tBehavior.java:135) Ideas? J.D. Corbin | IQNavigator, Inc. | Technology 6465 Greenwood Village Blvd, Suite 800, Centennial, CO 80111 | Office 303.563.1503 | Mobile 303.912.0958 | www.iqnavigator.com | jcor...@iqnavigator.com - To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org For additional commands, e-mail: users-h...@wicket.apache.org
RE: Modal Popups and Forms
AJAX and forms highlight some issues with HTML forms in general. Unless you have declared a brand new form for your modal popup, and are absolutely sure that you are submitting that new form, you will be submitting the original form that was on the base page. Keep in mind that to the browser, the modal popup is part of the same DOM as the information beneath what the user sees--unless you actually created a new window. Browsers do not do well with forms embedded in forms, and they cause all kinds of issues. Make sure that YUI did not manufacture a DIV inside the original form. If it did, then your browser is defaulting to sending the outermost form. Use Firebug to inspect the DOM. -Original Message- From: Corbin, James [mailto:jcor...@iqnavigator.com] Sent: Tuesday, December 29, 2009 1:43 PM To: users@wicket.apache.org Subject: Modal Popups and Forms Hi, I have a modal popup (implemented using YUI 2.8). The modal popup contains a form and the popup's markup is rendered (via YUI js) explicitly to document.body. The reasoning for rendering the YUI javascript to document.body is to address some issue we had with css inheritance that was causing rendering issues (conflicts with default YUI skinning) when we render the markup inline. If I change the YUI popup javascript to render inline, the issue doesn't happen, but I don't want to render the markup for the popup inline, because it potentially inherits styling that interferes with the YUI styling for the popup. Rendering the markup to document.body solves that issue. So what I know so far that I cannot change, or don't want to change, is that the YUI popup implementation needs to render its markup to document.body. I verified that the markup generated for the popup's form is indeed a div element (outside of the form tags as I would have expected) In this case, there is only one form tag (parent form where popup is initiated from) on the page and it is indeed has its encoding set to multi-part (verified in the generated markup). Note the markup for the popup dialog does not have any elements that should require multi-part encoding, but the parent form from which the popup was initiated, does. How come when I submit the dialog, I get the following exception? I guess I'm not sure what is going on and how Wicket is handling this case. java.lang.IllegalStateException: ServletRequest does not contain multipart content at org.apache.wicket.protocol.http.servlet.MultipartServletWebRequest.init (MultipartServletWebRequest.java:113) at org.apache.wicket.protocol.http.servlet.MultipartServletWebRequest.init (MultipartServletWebRequest.java:83) at org.apache.wicket.protocol.http.servlet.ServletWebRequest.newMultipartWe bRequest(ServletWebRequest.java:500) at org.apache.wicket.markup.html.form.Form.handleMultiPart(Form.java:1651) at org.apache.wicket.markup.html.form.Form.onFormSubmitted(Form.java:850) at org.apache.wicket.ajax.form.AjaxFormSubmitBehavior.onEvent(AjaxFormSubmi tBehavior.java:135) Ideas? J.D. Corbin | IQNavigator, Inc. | Technology 6465 Greenwood Village Blvd, Suite 800, Centennial, CO 80111 | Office 303.563.1503 | Mobile 303.912.0958 | www.iqnavigator.com | jcor...@iqnavigator.com - To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org For additional commands, e-mail: users-h...@wicket.apache.org
RE: Modal Popups and Forms
Hi Igor, I misspoke. Obviously with rendering the popup markup to the body, there is no parent form. I was able to get passed this by doing exactly what you mention as in forcing the dialog's form to be multipart via the setter method. I didn't like that because it seemed like a hack to hardcode the setting in the dialog form because the dialog's form doesn't truly have any elements that require the form to be multi-part. I'll look for other options. However, I understand what you are saying and think the better solution is to try and address the styling problems introduced by using YUI as the popup implementation. J.D. -Original Message- From: Igor Vaynberg [mailto:igor.vaynb...@gmail.com] Sent: Tuesday, December 29, 2009 11:56 AM To: users@wicket.apache.org Subject: Re: Modal Popups and Forms how can there be a parent form if the markup is rendered into a div that is a child of the body. the problem is you are creating a mismatch between wicket component hierarchy and the browser's dom. the wicket serverside thinks that it will be getting a multipart form, while the wicket clientside js that performs the ajax submit doesnt think it should be submitting multipart because the form you are submitting inside the modal div does not have any multipart content. wicket modal specifically reparents form elements in the dom to prevent just this. you will have to play around with it to make it work. you can try: forcing form inside the modal to be multipart by calling setmultipart true, adding a hidden input type=file, etc. -igor On Tue, Dec 29, 2009 at 10:43 AM, Corbin, James jcor...@iqnavigator.com wrote: Hi, I have a modal popup (implemented using YUI 2.8). The modal popup contains a form and the popup's markup is rendered (via YUI js) explicitly to document.body. The reasoning for rendering the YUI javascript to document.body is to address some issue we had with css inheritance that was causing rendering issues (conflicts with default YUI skinning) when we render the markup inline. If I change the YUI popup javascript to render inline, the issue doesn't happen, but I don't want to render the markup for the popup inline, because it potentially inherits styling that interferes with the YUI styling for the popup. Rendering the markup to document.body solves that issue. So what I know so far that I cannot change, or don't want to change, is that the YUI popup implementation needs to render its markup to document.body. I verified that the markup generated for the popup's form is indeed a div element (outside of the form tags as I would have expected) In this case, there is only one form tag (parent form where popup is initiated from) on the page and it is indeed has its encoding set to multi-part (verified in the generated markup). Note the markup for the popup dialog does not have any elements that should require multi-part encoding, but the parent form from which the popup was initiated, does. How come when I submit the dialog, I get the following exception? I guess I'm not sure what is going on and how Wicket is handling this case. java.lang.IllegalStateException: ServletRequest does not contain multipart content at org.apache.wicket.protocol.http.servlet.MultipartServletWebRequest.init (MultipartServletWebRequest.java:113) at org.apache.wicket.protocol.http.servlet.MultipartServletWebRequest.init (MultipartServletWebRequest.java:83) at org.apache.wicket.protocol.http.servlet.ServletWebRequest.newMultipartWe bRequest(ServletWebRequest.java:500) at org.apache.wicket.markup.html.form.Form.handleMultiPart(Form.java:1651) at org.apache.wicket.markup.html.form.Form.onFormSubmitted(Form.java:850) at org.apache.wicket.ajax.form.AjaxFormSubmitBehavior.onEvent(AjaxFormSubmi tBehavior.java:135) Ideas? J.D. Corbin | IQNavigator, Inc. | Technology 6465 Greenwood Village Blvd, Suite 800, Centennial, CO 80111 | Office 303.563.1503 | Mobile 303.912.0958 | www.iqnavigator.com | jcor...@iqnavigator.com - To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org For additional commands, e-mail: users-h...@wicket.apache.org - To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org For additional commands, e-mail: users-h...@wicket.apache.org
