1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    41
    Vote Rating
    0
    kaps77 is on a distinguished road

      0  

    Default Form not getting submitted containing elements in div

    Form not getting submitted containing elements in div


    Hi,
    I have just started using YUI ext and having problem in submitting form. Am using YUI ContentPanels that contains various form elements. All the panels are enclosed in form tag. When I submit the form the value of various form fields are not available at server side. But if i put the form tag inside a div corresponsing to a panel, the form field values for that panel are available on server side.
    Code:
    <form action="/applyChanges.do" name="frm" method="POST">
        	<div id="north">
        	 	<input id="txt1" type="text" name="txt1" value="sample" />
        	<input type="submit" />
        	</div>
           <div id="south">
        	 	<input id="txt2" type="text" name="txt1" value="sample" />
        	</div>
    </form>
    Is there any limitation in YUI that form tag should be inside a div tag and not vice-versa?
    Thanks,
    Kapil

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Your divs will be moved from their position in the DOM (inside the form) to where they need to be in the layout (not inside a form).

    Try constructing the layout using the form element as the container. That way, any content added will be inside the form.

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    41
    Vote Rating
    0
    kaps77 is on a distinguished road

      0  

    Default


    Thanks a lot. By setting the form as container the values are available at server side.

    kapil

  4. #4
    Ext User
    Join Date
    Mar 2007
    Posts
    41
    Vote Rating
    0
    kaps77 is on a distinguished road

      0  

    Default


    After solving this problem I have encountered another one. On click of a button from the main page, I open a YUI dialog. If I keep form as container of the main page the dialog appears as disabled but on changing the container of main page to document.body, the dialog appears enabled but in this case may main page is not getting submitted properly.
    Please help!!

    kapil

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Dialogs have to be rendered into document.body.

  6. #6
    Ext User
    Join Date
    Mar 2007
    Posts
    41
    Vote Rating
    0
    kaps77 is on a distinguished road

      0  

    Default


    Main Window becomes blank on rendering dialog in document.body. Earlier I was rendering dialog in a div but the dialog was appearing disabled.
    Thanks,
    Kapil

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Show us a page.

  8. #8
    Ext User
    Join Date
    Mar 2007
    Posts
    41
    Vote Rating
    0
    kaps77 is on a distinguished road

      0  

    Default


    Sorry I didn't understand your last post about rendering dialog in document.body
    All the samples given render dialog in a div. Am I missing something ??
    The js of my main page is:

    Code:
    var EditArticle = {
       	init : function(){
       		var layout;		 
            layout = new YAHOO.ext.BorderLayout("mainForm", {
    	        north: {
    	            split:false,
    	            autoScroll:true,
    	            titlebar: false
    	        },
    	        west: {
    	            split:true,
    	            titlebar: true,
    	            collapsible: true
    	        },
    	        east: {
    	            split:true
    	        },
    	       south: {
    	            split:false,
    	            initialSize: 23,
    	            titlebar: false
    	        }, 
    	        center: {
    	            titlebar: true,
    	            autoScroll:true
    	        }});
              
        	layout.beginUpdate();
    	layout.add('north', new YAHOO.ext.ContentPanel('toolbarPanel', 'North'));
    	layout.add('south', new YAHOO.ext.ContentPanel('imagePanel', 'south'));
        	layout.add('center', new YAHOO.ext.ContentPanel('textEditorPanel', 'center'));
    	layout.add('west', new YAHOO.ext.ContentPanel('previewPanel',{title: 'Preview', closable: true}));
            layout.endUpdate();
    
       	}
       }
    	YAHOO.ext.EventManager.onDocumentReady(EditArticle.init, EditArticle, true);
    The dialog that opens on the click of a button on main page is almost same as given in samples:
    Code:
    var HelloWorld = function(){
    
        var dialog, showBtn;
        
        var toggleTheme = function(){
            getEl(document.body, true).toggleClass('ytheme-gray');
        };
        
       
        // return a public interface
        return {
            init : function(){
                 showBtn = getEl('btnSave');
    			 
                 // attach to click event
                 showBtn.on('click', this.showDialog, this, true);
                 
            },
            
            showDialog : function(){
                if(!dialog){ // lazy initialize the dialog and only create it once
                    dialog = new YAHOO.ext.LayoutDialog("hello-dlg", { 
                            modal:true,
                            width:649,
                            height:730,
                            shadow:true,
                            west: {
    	                        split:true,
    	                        initialSize: 150,
    	                        titlebar: true
    
    	                    },
    	                    center: {
    	                         autoScroll:true 	                              
    	                    },
    	                    south: {
    	                         autoScroll:true 	                              
    	                    }
                    });
                    dialog.addKeyListener(27, dialog.hide, dialog);
                    var layout = dialog.getLayout();
                    dialog.beginUpdate();
                    layout.add('west', new YAHOO.ext.ContentPanel('west', {title: 'West'}));
    	            var innerLayout = new YAHOO.ext.BorderLayout('content', {
    	            		width:649,
                            height:650,
    	                    south: {
    	                        split:true,
    	                        initialSize:520,
    	                        fitToFrame:true
    	                    },
    	                    center: {
    	                   		split:true,
    	                        fitToFrame:false
    	                    },
    	                     north: {
    	                     	split:true,
    	                        titlebar: true,
    	                        autoScroll:true,
    	                        fitToFrame:false
    	                    }
    	                });
    	                innerLayout.add('north', new YAHOO.ext.ContentPanel('upper', ""));
    	                innerLayout.add('center', new YAHOO.ext.ContentPanel('rev-comment'));
    	                innerLayout.add('south', new YAHOO.ext.ContentPanel('lower'));
    	                layout.add('center', new YAHOO.ext.NestedLayoutPanel(innerLayout));
    	                layout.add('south', new YAHOO.ext.ContentPanel('south'));
    	            dialog.endUpdate();
                   
                }
    
               dialog.show(showBtn.dom);
           
            }
        };
    
    
    }();
    
    YAHOO.ext.EventManager.onDocumentReady(HelloWorld.init, HelloWorld, true);

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Where is the "hello-dlg" element?

    Send a link to your page so we can see it.

  10. #10
    Ext User
    Join Date
    Mar 2007
    Posts
    41
    Vote Rating
    0
    kaps77 is on a distinguished road

      0  

    Default


    hello-dlg is a div containing dialog components in the body of the main jsp.
    Will send you the link after setting up the web app.

    Thanks,
    Kapil

Similar Threads

  1. Form Elements Width Differences
    By thejoker101 in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 16 Jan 2009, 3:32 AM
  2. Toolbar api for getting elements
    By jeffiel in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 19 Mar 2007, 7:15 AM
  3. Form elements exception in grid
    By rajesh in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 5 Feb 2007, 6:11 AM
  4. Unusual behaviour with EventManager and Form elements
    By vickramj in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 22 Nov 2006, 5:20 PM
  5. form elements
    By kamranash in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 16 Nov 2006, 12:40 AM

Thread Participants: 1