how to edit a value of a cell inside table in jsp

[harithapriya]

I have jsp page which displays a table with passPercentage colum.i have to directly edit the value in passPercentage by clicking on it.how to do that?

[harithapriya]

how to edit a value in column on click of it in jsp page

<%@ page language="java" contentType="text/html; 

<s:if test="tUserModuleList.size() != 0"> 

<h2>List of Users assigned to the Modules</h2>

  <table id="table_id" class="display">
  <thead>
	<tr>
		<th>UserName</th>
		<th>ModuleName</th>
		<th><p id="pass" title="click for bulkupdate"> PassPercentage</p> <div  align="center" style="max-width: 3px;">
		<input id="passP" name="passPercentage" type="text" style="display:none;"/></input>
		
		<!--<s:form action="editBulkUpdate">
		<s:property value="passPercentage"/>
 <s:submit value="BulkUpdate" ></s:submit> </s:form> -->
 
 </div> </th>
		<th>Enabled</th>
		<th>DisplayScore?</th>
		<th>Action</th>
		<th>Reports</th>
	</tr>
	</thead>
	<tbody>
	<s:iterator value="tUserModuleList" >
			<tr  >
				<td><s:property value="TUser.userName"/></td>
				<td><s:property value="TModule.moduleName"/></td>
				<td class="pass"><s:property value="passPercentage"/></td>
				<td><s:property value="enabled"/></td>
				<td><s:property value="displayScore"/></td>
			  
				<td><s:url action="editUserModule" id="editTag">
						<s:param name="userModuleId"><s:property value="userModuleId" /></s:param>
					</s:url>
		 	        <a href='<s:property value="%{editTag}" />' target="_self" class="roll">
		 					<span data-title="Edit">Edit</span></a>
		 					
		 		</td>
		 		<td><s:url action="generateReport" id="generate">
						<s:param name="userModuleId"><s:property value="userModuleId"/></s:param>
					</s:url>
		 	        <a href='<s:property value="%{generate}" />' target="_self" class="roll">
		 					<span data-title="Report">Report</span></a>		
		 		</td>
			</tr>
	</s:iterator>
	</tbody>
</table>
</s:if>
<s:else>
There are no Users with Modules assigned. Please allocate Users with Modules.
</s:else>

[Dormilich]

use contenteditable.

of course that doesn’t save anything you edited.

[harithapriya]

I need to save that data to database what i have edited .

[Dormilich]

then you need to send that data over to the server.

[harithapriya]

hi i have used jquery jeditable inline editing to just click on value and i am able to edit it.but i am not able to update in data base.do u have any suggestions?

<script type="text/javascript">
$(document).ready( function() {
	
	var id = -1;//simulation of id
	$("#table_id").dataTable({ 
		         bJQueryUI: true,
                 "sPaginationType": "full_numbers"
}).makeEditable({
						sUpdateURL: function(value, settings)
						{
                 							return(value); //Simulation of server-side response using a callback function
						},
                 			sAddURL: "saveBulkUpdate",
                 			sAddHttpMethod: "GET",
                        sDeleteHttpMethod: "GET",
        							"aoColumns": [ null, null, {},null, null, null, null, null, null]
        			
} );
});
</script>

[Dormilich]

having a look at the DataTables homepage, there is an example how to edit table cells.

other than that:

//Simulation of server-side response using a callback function

hook in there.

[harithapriya]

i have used same code which is present in link .but i am not able to call action class and update data base

[Dormilich]

i have used same code which is present in link

definitely not. the sample code uses .editable(), while you use .makeEditable() and the option names do not match at all.

[harithapriya]

can u please suggest me how to do same with makeeditable. i tried i can enter value on click of cell but it is not getting updated?

[Dormilich]

and where would I find the makeEditable plugin?