form submission in ajax without refreshing whole page.

[11年前 に sanchita dutta によって更新されました。]

HOW IT IS POSSIBLE?
please help.

[11年前 に jaid shaik によって更新されました。]

Hi sanchita,

check this link


Thanks
Jaid.Shaik

[11年前 に Manish Yadav によって更新されました。]

you can also use jquery Ajax for submitting form

view.jsp file

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@page import="javax.portlet.PortletURL"%>
<portlet:resourceurl var="ajaxUrl" />
<script>
function ajaxcall()
{	
var  empname= document.SubmitForm.empname.value;
var employeeId=document.SubmitForm.employeeId.value;
var ajaxdata=name+":"+employeeId;

	jQuery.ajax({
		        type     : "POST",
		    	url      : "<%=ajaxUrl%>",
		    	data     : "ajaxdata=" +ajaxdata,
		    	success  : function(data){ 
				
				//write your logic here
				
				}
					
		    	},
				async    :    false,
			    });

	
}

<form name="SubmitForm" id="SubmitForm" action='#' method="post"  > 
<input type="text" size="30" id="empname" name="empname">
<input type="text" size="30" id="employeeId" name="employeeId">
<button type="button" id="submitButton" onclick="ajaxcall()" >Submit Form</button>
</form>
</code></pre><br /><br /><strong>JavaActtionClass</strong><br /><br /><pre><code>
public void serveResource(ResourceRequest resourceRequest, ResourceResponse res) throws PortletException, IOException {
	    	final String METHOD_NAME="serveResource";
			String userString=resourceRequest.getParameter("ajaxdata");
		
			PrintWriter out = res.getWriter();
			
			
			 if(null!=userString&&!userString.isEmpty())
			{
					String [] str= userString.split(":");
					String empname=str[0];
					String employeelID=str[1];
                                         
                                        int status= SubmitRecoredInDB(empname,employeelID)
					//write your logic here for returning values you can use 
					
					you can use out.print()
                                        if(status==1)
					out.print("your message successfully submited");
                                        else
                                          out.print("execption occurs while submitting record in Database");
					
					} catch (SystemException e) {
						
						e.printStackTrace();
					}
			}
			out.flush();
			out.close();
		}
</code></pre></script>

[9年前 に mohammad azaruddin によって更新されました。]

HI Manish

Suppose my form contain 10 input fields and i want validate all fields via ajax so do i need to pass all the parameter in the constructor of Ajax or is there any way to achieve this...?

[9年前 に Tariqul Islam によって更新されました。]

Please check this here.Its may help liferay developer.
http://tariqliferay.blogspot.com/2015/03/ajax-form-submit-in-liferay.html

[9年前 に David H Nebinger によって更新されました。]

Tariqul Islam:

Please check this here.Its may help liferay developer.
http://tariqliferay.blogspot.com/2015/03/ajax-form-submit-in-liferay.html

Not the best example. By using an action URL the portal will invoke the action and the render logic even though you are totally discarding the results of the render in your javascript function.

These kinds of things it is much better using a resource URL. Much lighter overhead on the server side, you can return targeted HTML fragments for inserting into DOM or javascript objects to manipulate, ...

But never an action URL unless you're stuck in JSR 186 land...

[9年前 に Tariqul Islam によって更新されました。]

Thanks.
For my current project i follow microblogportlet. Here use action request . I also use resource request for ajax form submit in my several projects.
I my my current project after sucess of action request i refersh my portlet as microblog portlet. Bellow is my code..
on: {
success: function(event, id, obj) {
updatePortletConten();
}
}
function updatePortletConten(){

var updateUrl = '<portlet:renderURL windowState="<%= LiferayWindowState.EXCLUSIVE.toString() %>"><portlet:param name="mvcPath" value="/html/home/view.jsp" /></portlet:renderURL>';
var retrflag= $.ajax({
url: updateUrl,
dataType: "html",
data: {},
type: "get",
async: false,
success: function(data){

$('#p_p_id<portlet:namespace /> .portlet-body').html(data);
//here response data will come and we need to update in the page.

},
beforeSend: function(){
// it will execute before Ajax call start

},
complete: function(){


},
error: function(){
}

});

}
Again thanks @David H Nebinger
I update my blog and show both action and resource request.
I know in action request portlet render method is execute...and resource request in jsr 286

[9年前 に David H Nebinger によって更新されました。]

So you're doing two calls? One for the ajax submission and another for the render? And your ajax submission is using the Action URL anyway?

Me, I'd use a resource url and return the DOM fragment from the ajax method so it's available in the success function. Then you can apply the changes directly into the DOM.

Every decision has a consequence. Any hack can throw together code that would work, including both the examples that you provided. But understanding the implications of the decisions to use an action, render, or resource URL is important. They can mean the difference between only supporting 20 users on a server vs supporting 100.

At the end of the day, the overhead from bad implementation choices reduce your server capacity and this leads to forum posts about why more memory is needed or more CPU or a cluster, etc.

Doing things the right way from the get go is more important than just slinging something together that appears to work.

[9年前 に Tariqul Islam によって更新されました。]

Again thanks,
I will remember your suggestions in my future projects.