Without reloading _server storing data into database using_Ajax and Embeded

Description:- As per my experience this is one of task that i had did .

In this we are creating a project on that some tabs are there , now if we click any one the tag the data should appeared on the same page using ajax

and data is been stored in database without reloading the server and lastly we can embeded the portlet in Custom_theme.

The following Steps:-

Step 1:- create the portlet AjaxCommunication

Step2:- Now Go to Portlet.xml and please replace below code instead of

<portlet>
..
..
</portlet>

to
<portlet>
<portlet-name>AjaxCommunication</portlet-name>
<display-name>AjaxCommunication</display-name>
<portlet-class>com.backend.controller.BackendController</portlet-class>
<init-param>
<name>view-template</name>
<value>/view.jsp</value>
</init-param>
<expiration-cache>0</expiration-cache>
<supports>
<mime-type>text/html</mime-type>
</supports>
<portlet-info>
<title>AjaxCommunication</title>
<short-title>AjaxCommunication</short-title>
<keywords>AjaxCommunication</keywords>
</portlet-info>
<security-role-ref>
<role-name>administrator</role-name>
</security-role-ref>
<security-role-ref>
<role-name>guest</role-name>
</security-role-ref>
<security-role-ref>
<role-name>power-user</role-name>
</security-role-ref>
<security-role-ref>
<role-name>user</role-name>
</security-role-ref>
</portlet>

Step 3: Now Open your project structure and find main.js file under js folder

And replace below code

$(document).ready(function(){
$(document).bind("contextmenu", function (e) {
e.preventDefault();
alert("Right Click is Disabled");
});
});
function submitForm(postURL,namespace){
var fname=$("#firstName").val();
var lastName=$("#lastName").val();
var address=$("#address").val();
postURL=postURL+"&"+namespace+"firstname="+fname;
postURL=postURL+"&"+namespace+"lname="+lastName;
postURL=postURL+"&"+namespace+"addr="+address;
console.log(fname+"==="+postURL);
$.ajax({
  url: postURL,
  type: 'POST',
  async : false,
  dataType: 'json',
  success: function(data){
  if(data.message=='success'){
alert(data.firstName+" has inserted into the database.");
  $("#firstName").val("");
  $("#lastName").val("");
  $("#address").val("");
  }
  },
  error: function(response){
alert("error***"+response);
  }
});
}

Step 4:-Now put all .java file under src folder(code is in bottom).

Step 5:-Create Service.xml(Service Builder) code as i had put the code.

<service-builder package-path="com.database">
<author>Abhishek-kumar</author>
<namespace>Emp</namespace>
<entity name="Employee" local-service="true" remote-service="false">

<column name="employeeId" type="long" primary="true" id-type="increment"/>



<column name="firstName" type="String" />
<column name="lastName" type="String" />
<column name="address" type="String" />



<order by="asc">
<order-column name="firstName" case-sensitive="false" />
</order>

<finder name="FirstName" return-type="Collection">
<finder-column name="firstName" case-sensitive="false" />
</finder>
<finder name="GetEmployee" return-type="Employee">
<finder-column name="employeeId"/>
</finder>
</entity>
</service-builder>

And build your services then

after generating local service's please find below file
com.backend.service.impl.BackendServiceImpl.java
and replace my file(BackendServiceImpl.java)
And Rebuild your service.

Step 6:-Now replace all jsp file under docroot directly

Step 7:-Deploy your project

now for embeded the portet for create a custom theme and also

go to mysql then
if you are using lportal;
use this
use lportal;
show tables;
select * from portlet;
then lastly you will get war file
copy the line and paste instead of Portlet_id and finally deploy your custom_theme.

And for in theme go to portel_normal.vm and use this code

$theme.runtime("---portletId---");

then deploy the theme.

You can get the code from :-

http://sourceforge.net/projects/ajaxcommunication-embeded/files/?source=navbar

hope this helps you....

Author

ABHISHEK-KUMAR

Liferay Top Contributor Q4 2015 Award Winner

http://abhishek2371.blogspot.in/

0 Comments

Please sign in to comment.

Menu Display

Blogs

Category Filter

Step 1:- create the portlet AjaxCommunication