how do i pass data from a jsp full of jquery to java class
I'm writing a todo list portlet in liferay, i got the visual part done using some jsp pages filled with javascript, html and css and now I have to write the business logic. First thing i have to do is to pass some object from jquery to java class so i can write a connector for liferay and then make the persistence model. Can anyone help with this? Here is the code:
Query.noConflict();
function Todo (pMainFoldersDivId) {
this.mainFoldersDivId = pMainFoldersDivId;
this.folders = new Array();
this.addFolderPopup;
this.editFolderPopup;
this.manageFoldersPopup;
this.quickNotesPopup;
this.addQuickNote = function() {
this.quickNotesPopup = new QuickNotesPopup();
this.quickNotesPopup.show();
}
this.saveQuickNote1 = function() {
var qnote1 = jQuery('#quicknote1 textarea').val();
}
this.saveQuickNote2 = function() {
var qnote2 = jQuery('#quicknote2 textarea').val();
}
this.saveQuickNote3 = function() {
var qnote3 = jQuery('#quicknote3 textarea').val();
}
this.addNote = function() {
alert('addNote');
}
this.addFolder = function() {
if(typeof this.manageFoldersPopup != 'undefined') {
this.manageFoldersPopup.hide();
}
this.addFolderPopup = new AddFolderPopup();
this.addFolderPopup.show();
}
this.createFolder = function() {
var folderTitle = jQuery('#input-folder-title').val();
var folderIcon = jQuery('#select-folder-icon').val();
var folderBgImage = jQuery('#select-folder-bgimage').val();
var folder = new TwFolder('10', folderIcon, folderTitle, folderBgImage);
this.folders.push(folder);
this.addFolderPopup.hide();
this.renderFolders();
}
this.updateFolder = function() {
var folderId = jQuery('#input-folder-id').val();
var folderTitle = jQuery('#input-folder-title').val();
var folderIcon = jQuery('#select-folder-icon').val();
var folderBgImage = jQuery('#select-folder-bgimage').val();
var arrFolder = jQuery.grep(this.folders, function(folder,idx) {
return folder.id == folderId;
});
if(arrFolder.length > 0) {
var folder = arrFolder[0];
folder.title = folderTitle;
folder.icon = folderIcon;
folder.bgImage = folderBgImage;
this.renderFolders();
this.editFolderPopup.hide();
this.manageFolders();
}
}
this.editFolder = function(pFolderId) {
var arrFolder = jQuery.grep(this.folders, function(folder,idx) {
return folder.id == pFolderId;
});
if(arrFolder.length > 0) {
this.manageFoldersPopup.hide();
var folder = arrFolder[0];
this.editFolderPopup = new EditFolderPopup(folder);
this.editFolderPopup.show();
}
}
this.deleteFolder = function(pFolderId) {
var safe = confirm('Are you sure ?');
if(safe) {
for(var i=0; i<this.folders.length; i++) {
if(pFolderId == this.folders[i].id) {
this.folders.splice(i,1);
break;
}
}
this.renderFolders();
this.manageFoldersPopup.hide();
this.manageFolders();
}
}
this.manageFolders = function() {
this.manageFoldersPopup = new ManageFoldersPopup(this);
this.manageFoldersPopup.show();
}
this.renderFolders = function() {
var mainFoldersDiv = jQuery('#'+this.mainFoldersDivId);
mainFoldersDiv.empty();
var fLength = this.folders.length;
jQuery(this.folders).each(function(index, folder) {
var folderDivClass = 'inner-folder';
if(index == 0) folderDivClass = 'first-folder';
else if(index == fLength-1) folderDivClass = 'bottom-folder';
var folderDiv = '<div id="'+'tfolder-'+folder.id+'" class="'+folderDivClass+'">';
folderDiv += folder.getHtmlDiv();
folderDiv += '</div>';
mainFoldersDiv.append(folderDiv);
var titleLink = jQuery('#tfolder-'+folder.id+' .folder-title a');
titleLink.click(function() {
folder.onClick();
});
});
}
// Constructor
this.folders.push(new Folder('1','clock.png', 'Travel Diary', 'folder_blue.png'));
this.folders.push(new Folder('2','tag_blue.png', 'Secret Diary', 'folder_brown.png'));
this.folders.push(new Folder('3','post_note.png', 'My Ideas', 'folder_yellow.png'));
this.folders.push(new Folder('4','lock.png', 'Shopping Dubai Mall', 'folder_mov.png'));
this.folders.push(new Folder('5','report.png', 'To-Do List', 'folder_orange.png'));
this.renderFolders();
}
function Folder(pId, pIcon, pTitle, pBgImage) {
this.id = pId;
this.icon = pIcon;
this.title = pTitle;
this.bgImage = pBgImage;
this.items = new Array();
this.getHtmlDiv = function() {
var result = '<div style="background-image: url(\'<%= request.getContextPath() %>/images/'+this.bgImage+'\');" class="folder-image">';
result += '<span class="folder-icon"><img src="<%= request.getContextPath() %>/images/icons/'+this.icon+'" width="40" height="40" /></span>';
result += '<span class="folder-title"><a href="#">'+this.title+'</a></span>';
result += '<span class="folder-item-number">'+this.items.length+'</span>';
result += '</div>';
return result;
}
this.onClick = function() {
var popup = new OpenFolderPopup(this);
popup.show();
}
}
function Note(pId, pTitle, pContent, pDueDate, pFolder) {
this.id = pId;
this.title = pTitle;
this.content = pContent;
this.dueDate = pDueDate;
this.folder = pFolder;
}
function OpenFolderPopup(pFolder) {
this.folder = pFolder;
this.jqmdialog = jQuery('#tw-show-folder');
jQuery('#tw-show-folder .open-folder-header').css('background-image','url("<%= request.getContextPath() %>/images/'+this.folder.bgImage+'")');
jQuery('#tw-show-folder .open-folder-header .open-folder-icon img').attr('src','<%= request.getContextPath() %>/images/icons/'+this.folder.icon);
jQuery('#tw-show-folder .open-folder-title').html(this.folder.title);
this.jqmdialog.jqm({ modal: false });
this.show = function() {
this.jqmdialog.jqmShow();
}
}
function AddFolderPopup() {
this.jqmdialog = jQuery('#tw-add-folder');
this.jqmdialog.css('height','150px');
this.jqmdialog.css('top','15%');
this.jqmdialog.jqm({ modal: false });
try {
jQuery('#tw-add-folder .add-folder-update-icon').css('display','none');
jQuery('#tw-add-folder .add-folder-save-icon').css('display','block');
jQuery('#input-folder-title').val('');
jQuery('#select-folder-icon').val('accept.png');
jQuery('#select-folder-bgimage').val('folder_blue.png');
jQuery("#select-folder-icon, #select-folder-bgimage").msDropDown();
} catch(e) {
alert(e.message);
}
this.show = function() {
this.jqmdialog.jqmShow();
}
this.hide = function() {
this.jqmdialog.jqmHide();
}
}
function ManageFoldersPopup(pTodoObj) {
this.jqmdialog = jQuery('#tw-manage-folders');
this.jqmdialog.css('width','450px');
this.jqmdialog.css('height','400px');
this.jqmdialog.css('margin-left','-200px');
this.jqmdialog.css('top','1开发者_开发知识库0%');
this.jqmdialog.jqm({ modal: false });
var folderTable = jQuery('#table-manage-folders');
folderTable.empty();
jQuery(pTodoObj.folders).each(function(index, folder) {
var result = '<tr id="'+'tfolder-'+folder.id+'">';
result += '<td>';
result += '<div style="background-image: url(\'<%= request.getContextPath() %>/images/'+folder.bgImage+'\');" class="folder-image">';
result += '<span class="folder-icon"><img src="<%= request.getContextPath() %>/images/icons/'+folder.icon+'" width="40" height="40" /></span>';
result += '<span class="folder-title">'+folder.title+'</span>';
result += '<span class="folder-item-number">'+folder.items.length+'</span>';
result += '</td>';
result += '<td>';
result += '<a class="edit_folder" href="#"><img src="<%= request.getContextPath() %>/images/icons/process.png" width="40px"/></a>';
result += '</td>';
result += '<td>';
result += '<a class="delete_folder" href="#"><img src="<%= request.getContextPath() %>/images/icons/delete.png" width="40px"/></a>';
result += '</td>';
result += '</tr>';
folderTable.append(result);
jQuery('#table-manage-folders #tfolder-'+folder.id+' .edit_folder').click(function() {
pTodoObj.editFolder(folder.id);
});
jQuery('#table-manage-folders #tfolder-'+folder.id+' .delete_folder').click(function() {
pTodoObj.deleteFolder(folder.id);
});
});
this.show = function() {
this.jqmdialog.jqmShow();
}
this.hide = function() {
this.jqmdialog.jqmHide();
}
}
function EditFolderPopup(pFolder) {
this.jqmdialog = jQuery('#tw-add-folder');
this.jqmdialog.css('height','150px');
this.jqmdialog.css('top','15%');
this.jqmdialog.jqm({ modal: false });
try {
jQuery('#tw-add-folder .add-folder-update-icon').css('display','block');
jQuery('#tw-add-folder .add-folder-save-icon').css('display','none');
jQuery('#input-folder-id').val(pFolder.id);
jQuery('#input-folder-title').val(pFolder.title);
jQuery('#select-folder-icon').val(pFolder.icon);
jQuery('#select-folder-bgimage').val(pFolder.bgImage);
jQuery("#select-folder-icon, #select-folder-bgimage").msDropDown();
} catch(e) {
alert(e.message);
}
this.show = function() {
this.jqmdialog.jqmShow();
}
this.hide = function() {
this.jqmdialog.jqmHide();
}
}
function QuickNotesPopup() {
this.jqmdialog = jQuery('#tw-quicknotes-popup');
this.jqmdialog.css('width','445px');
this.jqmdialog.css('height','300px');
this.jqmdialog.css('margin-left','-220px');
this.jqmdialog.jqm({ modal: false });
jQuery('#quicknotes').tabify();
this.show = function() {
this.jqmdialog.jqmShow();
}
this.hide = function() {
this.jqmdialog.jqmHide();
}
}
You do a call using JQuery Ajax method to another JSP/servlet back in the server, passing the info that you want to pass as a parameter.
As a matter of security, make the sure that the JSP returns an answer with an error code to know if the transfer was ok.
精彩评论