Results 1 to 10 of 14

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

Hybrid View

  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
    May 2008
    Posts
    17
    Rep Power
    7

    Default AjxPost Method

    I notice that it's been over a year and a half now, and no one has answered Jiggy's question.
    Is there some sample code somewhere that shows how to use AjxPost to post variables to another website or web service?
    I have not found any sample Zimlets that use AjxPost.

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
  •