Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: How to submit zimlet form data using POST request method....??

  1. #1
    Join Date
    Feb 2007
    Posts
    32
    Rep Power
    8

    Default How to submit zimlet form data using POST request method....??

    Hello,

    I have made a zimlet form.

    In this form i have provided some Dwt Widgets like Buttons,Drop downs,textfields.

    Now when i fill up the form on the click event of a button i want to submit the details filled into the widgets to the server using a POST method since i will be having so much data that it will not get handled through GET method.

    So how can i achieve this POST thing....??


    Thanks.

  2. #2
    Join Date
    Sep 2005
    Location
    Sunnyvale, CA
    Posts
    269
    Rep Power
    10

    Default AjxPost?

    There is a class called AjxPost in the toolkit that might be of use for you. Basically create a new instance of this class passing in an IFRAME which will handle the posting to the server without forcing the browser to navigate away.

    You then call execute passing in a callback function and the FORM element. Pretty simple.

    Here's some example code:

    Code:
      var iframe = document.createElement("IFRAME");
      var post = new AjxPost(iframe);
      var callback = new AjxCallback(this, this._myCallback);
      var form = document.getElementById("myFormId");
      post.execute(callback, form);
    When the client successfully posts the form data to the server, "_myCallback" will get called so you can finish processing whatever. If the server returns an error, the callback method will contain the error code.

    HTH.
    Bugzilla - Wiki - Downloads - Before posting... Search!

  3. #3
    Join Date
    Feb 2007
    Posts
    32
    Rep Power
    8

    Default Have two queries in using the AjaxPost

    Hello PShah,

    The below mentioned code snippets show how i have made my form using Dwt elements.

    Code:
    ............
    
    
    FormDisplay.prototype._createHTML = 
    function() {
    	//alert("Inside _createHTML");
    	var html = new Array();
    	var i = 0;
    	
    	this._formNameId = Dwt.getNextId();
    	this._skillsElementId = Dwt.getNextId();
    
    
    	
    	html[i++] = "<table width=\"100%\" cellpadding=\"3\" cellspacing=\"3\">";
    
    	html[i++] = "<tr>";
    	html[i++] = "<td>Name</td>";
    	html[i++] = "<td id='";
    	html[i++] = this._formNameId;	
    	html[i++] = "'>";	
    	html[i++] = "</td>";
    	
    	html[i++] = "<td></td> ";
    	html[i++] = "<td id='";
    	html[i++] = this._skillsElementId;	
    	html[i++] = "'>";	
    	html[i++] = "</td>";
    
    	html[i++] = "</tr>";
    
    	//The Buttons at the end of the form are getting added over here
    	html[i++] = "<tr>";
    	
    	html[i++] = "<td align='center' id='";
    	html[i++] = this._userBtnId;	
    	html[i++] = "'></td>";	
    
    
    	html[i++] = "</tr>";	
    	
    	html[i++] = "</table>";
    	
    	this.getHtmlElement().innerHTML = html.join("");
    };
    
    
    FormDisplay.prototype._createDwtObjects = 
    function () {
    	//alert("Inside _createDwtObjects");
    
    	this._formNameField = new DwtInputField({parent:this, type:DwtInputField.STRING,
    										 initialValue:"My Form", size:20, maxLen:50,
    										 errorIconStyle:DwtInputField.ERROR_ICON_NONE,
    										 validationStyle:DwtInputField.ONEXIT_VALIDATION});
    
    	Dwt.setSize(this._formNameField.getInputElement(), "100%", "20px");	
    	this._formNameField.reparentHtmlElement(this._formNameId);
    	delete this._formNameField;	
    
    	
    	//Skills dropdown
    	var skillsOptions = [new DwtSelectOption("selectSkills",true,"--Select Skills--"),
    						 new DwtSelectOption("primary",false,"Primary"),
    						 new DwtSelectOption("secondary",false,"Secondary")];
    
    	this._skillsSelectElement = new DwtSelect(this,skillsOptions);
    	this._skillsSelectElement.addChangeListener(new AjxListener(this, this._skillsChangeListener));
    	var skillsCell = document.getElementById(this._skillsElementId);
    	if(skillsCell)
    		skillsCell.appendChild(this._skillsSelectElement.getHtmlElement());
    
    	//Save Button
    	var userBtn1= new DwtButton(this);
    	userBtn1.setText("Save");
    	userBtn1.setSize("15");
    	/*Added Listener below*/
    	userBtn1.addSelectionListener(new AjxListener(this, this._saveBtnListener));				
    	var userBtn1Cell = document.getElementById(this._userBtnId);
    	if(userBtn1Cell)
    			userBtn1Cell.appendChild(userBtn1.getHtmlElement());
    
    		
    };
    
    //Save button listener
    FormDisplay.prototype._saveBtnListener = 
    function (ev) {
    
    
    }
    
    ...............

    Now i have two queries:

    1) I want to submit the value of the InputField,Dropdown to a jsp page.
    So if i need to use AjaxPost what i need to add in my code below.

    2)
    Also as in normal requests from html forms we can obtain the request parameters using the syntax request.getParameter("name of html element").

    I searched for the methods setting the name of my form elements but i didn't found one.So in the jsp form if i want to obtain the values of my dropdown and input field on the click of my save button, how to achieve that since i am not getting what name is to be used my jsp form when accessing paramaters using syntax request.getParameter("name of html element").


    Please help in resolving the above mentioned queries.
    Thanks

  4. #4
    Join Date
    Sep 2005
    Location
    Sunnyvale, CA
    Posts
    269
    Rep Power
    10

    Default

    jiggy,

    You have asked very good questions. I'll try to help as much as I can:

    First, I noticed in your code, you are deleting "this._formNameField" when in fact, you probably meant to delete "this._formNameId".

    Now, because you're using Dwt widgets, you'll have to get access to the HTML elements they are wrapping. This is done differently based on the widget we're trying to inspect.

    For DwtInputFields, you'll want to call the getInputElement method like this:
    Code:
    this._formNameField.getInputElement().name = "foo"
    For DwtSelect, its a bit more work since its made up of DIV's (no FORM elements). So you'll want to add a hidden input element and set the name to whatever and the value to be the value of the selected DwtSelect. Here's some code to explain what I mean:

    Add this part somewhere in the "createHTML" method:
    Code:
    this._hiddenInputId = Dwt.getNextId();
    html[i++] = "<input type='hidden' id='" + this._hiddenInputId + "' name='foobar'>";
    
    // Save the hidden element of course:
    this._hiddenInput = document.getElementById(this._hiddenInputId);
    Then, in your save listener, set the value of the DwtSelect into your hidden input element:

    Code:
    this._hiddenInput.value = this._skillsSelectElement.getValue();
    I'm assuming you added the actual FORM element somewhere to wrap the HTML code containing your form elements. If not, you can just add it in the "_createHtml" method and save the form object just like you did the other objects. Remember, you'll also need a hidden IFRAME somewhere to submit the post.

    Finally, in the save listener, add in the code from my first post and hopefully, it just works
    Bugzilla - Wiki - Downloads - Before posting... Search!

  5. #5
    Join Date
    Feb 2007
    Posts
    32
    Rep Power
    8

    Default

    Thanks pShah,

    I will definitely give a try to it and come back if any problems occur.
    Thanks for ur cooperation.

  6. #6
    Join Date
    Feb 2007
    Posts
    32
    Rep Power
    8

    Default Zimlet form submission not working with AjaxPost properly

    Hello Pshah,

    I tried out the thing you said to me.

    In my _createHTML method i wrapped my form elements with the following:

    Code:
    html[i++] = "<form id='myFormID' target='http://localhost:7070/myWebApp/confirm.jsp'>";
    Then in my save btn listener i added the following:

    Code:
    this.hiddenSkillsValue.value = this._skillsSelectElement.getValue();
    	
     var iframe = document.createElement("IFRAME");
     var post = new AjxPost(iframe);
     var callback = new AjxCallback(this, this._myCallback);
     var form = document.getElementById("myFormID");
     post.execute(callback, form);

    But when i click on my Save btn a new browser window opens up with the address http://localhost:7070/zimbra/mail?ev...ds&requestId=0

    Nothing gets printed on my server console also .

    This is my confirm.jsp code:

    Code:
    <%
    	System.out.println("Hello this is a sample jsp form");
                //This is the name of my input field i have set in my _createHTML()
    	String formName = request.getParameter("evalFormName");
    	out.println("formName = " + formName);
    	System.out.println("formName = " + formName);
    	String skillsValue = request.getParameter("hidSkillsVal");
    	out.println("skillsValue = " + skillsValue);
    	System.out.println("skillsValue = " + skillsValue);
    	
    %>

    Please let me know what am i missing??

    Thanks..

  7. #7
    Join Date
    Sep 2005
    Location
    Sunnyvale, CA
    Posts
    269
    Rep Power
    10

    Default

    First thing I noticed, you need to set the "action" attribute on the FORM element. Not "target" - which is probably whats causing the new window to get spawned.

    You also may need to add the newly created IFRAME to your DOM somewhere. For now, just try adding it the BODY via something like "document.body.appendChild(iframe)".

    And eventually, you'll want to make it hidden.

    Jiggy, there's some basic HTML concepts here that I think you need to learn before tackling such a problem like this. Unfortunately, this is beyond the scope of how much I can help you.

    I hope this was enough to help push you forward.
    Bugzilla - Wiki - Downloads - Before posting... Search!

  8. #8
    Join Date
    Feb 2007
    Posts
    32
    Rep Power
    8

    Default Thanks pshah

    Thanks pshah,

    It is working now.
    Thanks a lot for your cooperation.

  9. #9
    Join Date
    Feb 2007
    Posts
    32
    Rep Power
    8

    Default Problem occuring despite of making Iframe hidden and appending it to the a DIV

    Hello Pshah,

    As mentioned in my subject despite of making iframe hidden and appending it to a div element in my document a new window is opening with the address of the URL and the request parameters appeneded to it when submitting the form.
    Also the control is not being transferred to my call back function...
    Can you please let me know where it is going wrong.

    This is the snippet of code i am using:
    Code:
           var iframe = document.createElement("IFRAME");
    		 iframe.width="0px";
    		 iframe.height="0px"; 	
    		 iframe.border="0px"; 	
                     var hiddenCell = document.getElementById(this._hidDivId);
    		 if(hiddenCell){
    				hiddenCell.appendChild(iframe);
    		  }
    		 var post = new AjxPost(iframe);
    		 var callback = new AjxCallback(this, this._myCallback);
    		 var form = document.getElementById("formId");
    		 post.execute(callback, form);
    
    MyForm.prototype._myCallback = 
    function () {
    	alert("_myCallback");
    
    }
    
    Thanks
    The form definition i am specifying is like this:

    Code:
    <form id='formId' action='http://localhost:7070/myApp/confirm.jsp'>
    ...
    ...
    </form>

  10. #10
    Join Date
    Aug 2007
    Posts
    2
    Rep Power
    8

    Default

    i got the same problem...can someone help me?
    thank's a lot

Similar Threads

  1. Replies: 21
    Last Post: 02-04-2010, 10:06 AM
  2. zmprov mc default zimbraFeatureNotebookEnabled TRUE
    By nbhanji in forum Installation
    Replies: 11
    Last Post: 04-29-2008, 11:39 AM
  3. Replies: 5
    Last Post: 01-11-2008, 05:34 AM
  4. Replies: 13
    Last Post: 07-20-2007, 04:21 AM
  5. Post instsallation problems
    By Assaf in forum Installation
    Replies: 14
    Last Post: 01-29-2007, 11:38 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •