i need edit in popup using jquery
This is my code that i am strucking in getting editing the details. while entering edit button i need to show the field and value which should be edited in dialog box
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<title>jQuery UI Dialog - Modal form</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
body { font-size: 62.5%; }
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain { width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>
<script>
$(function() {
var id = $( "#id" ),
ename = $( "#ename" ),
design = $( "#design" ),
dob=$("#dob"),
doj=$("#doj"),
allFields = $( [] ).add( id ).add( ename ).add( design ).add( dob ).add( doj );
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 350,
width: 350,
modal: true,
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
$( "#create-user" )
.button()
.click(function() {
$( "#dialog-form" ).dialog( "open" );
});
});
function deleteRecord(eid){
var f=document.Delete;
f.method="post";
f.action='Delete?eid='+eid;
f.submit();
}
function editRecord(eid,ename,des,dob,doj)
{
f.method="update";
f.action='edit1.jsp?sno='+sno;
f.submit();
}
$(function() {
var id = $( "#id" ),
ename = $( "#ename" ),
design = $( "#design" ),
dob=$("#dob"),
doj=$("#doj"),
allFields = $( [] ).add( id ).add( ename ).add( design ).add( dob ).add( doj );
$( "#dialog-form1" ).dialog({
autoOpen: false,
height: 400,
width: 500,
modal: true,
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
$( "#view")
.button()
.click(function() {
$( "#dialog-form1" ).dialog( "open" );
});
});
$(function(eid,ename,des,dob,doj) {
allFields = $( [] ).add( eid ).add( ename ).add( des ).add( dob ).add( doj );
$( "#dialog-form2" ).dialog({
autoOpen: false,
height: 400,
width: 500,
modal: true,
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
$( "#edit")
.button()
.click(function() {
$( "#dialog-form2" ).dialog( "open" );
});
});
function checkRows() {
var rowsIndex;
var rows = document.getElementById('historyTable').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
for (i = 1; i < rows.length; i++) {
if(rows[i].getElementsByTagName('td')[0].getElementsByTagName('input')[0].checked) {
// here "i" is the row number if checked
}
}
}
function listbox_remove(sourceID) {
//get the listbox object from id.
var src =document.getElementById(sourceID)
//iterate through each option of the listbox
for(var count= src.options.length-1; count >= 0; count--) {
//if the option is selected, delete the option
if(src.options[count].selected == true) {
try {
var f=document.Delete;
f.method="post";
f.action='Delete?eid='+eid;
f.submit();
} catch(error) {
src.remove(count);
}
}
}
}
</script>
</head>
<body>
<br>
<br>
<br>
<center>
<div id="users-contain" class="ui-widget">
<h1>Employee Details</h1>
<br>
<br>
<h4>Hai <s:property value="username"/></h4>
<br>
<br>
<form name="Delete">
<table border=1>
<tr class="ui-widget-header ">
<td>EID</td>
<td>Employee Name</td>
<td>Designation</td>
<td>DOB</td>
<td>Date of Joining</td>
<td>Mark to Select</td></tr>
<s:iterator value="employees">
<tr>
<td><s:property value="eid" /></td>
<td><s:property value="employeename" /></td>
<td><s:property value="designtn" /></td>
<td><s:property value="dob" /></td>
<td><s:property value="doj" /></td>
<td><input type="checkbox" id="hai"/></td>
<td><input type="button" name="delete" value="Delete" style="background-color:#FFFFFF;font-weight:bold;color:#000000;" onclick="deleteRecord(<s:property value="eid"/>);" ></td>
<td><input type="button" id="edit" name="edit" value="Edit" style="background-color:WHITE;font-weight:bold;color:BLACK;" onclick="deleteRecord(<s:property value="eid"/>,<s:property value="employeename" />,<s:property value="designtn" />,<s:property value="dob" />,<s:property value="doj" />);" ></td>
<%--<td><button id="create-user1">EDIT</button></td>--%>
<!-- <td><button id="bt">EDIT</button></td>-->
</tr>
</s:iterator>
</table>
</form>
</div>
<button onclick="listbox_remove('hai');">Delete</button>
<button id="create-user">ADD</button>
<div id="dialog-form" title="Add New Employee Details">
<p>All form fields are required.</p>
<fieldset>
<form action="Addition">
<label for="id">EID</label>
<s:textfield name="eid" id="id" value="" class="text ui-widget-content ui-corner-all"/>
<label for="ename">Employee Name</label>
<s:textfield name="employeename" id="ename" value="" class="text ui-widget-content ui-corner-all"/>
<label for="design">Designation</label>
<s:textfield name="designtn" id="design" value="" class="text ui-widget-content ui-corner-all"/>
<label for="dob">DOB</label>
<s:textfield name="dob" id="dob" value="" class="text ui-widget-content ui-corner-all"/>
<label for="doj">Date of Joining</label>
<s:textfield name="doj" id="doj" value="" class="text ui-widget-content ui-corner-all"/>
<s:submit value="Add Employee"/>
</form>
</fieldset>
</div>
<div id="dialog-form2" title="Edit Employee Details">
<p>All form fields are required.</p>
<fieldset>
<form action="Update">
<label for="id">EID</label>
<s:textfield name="eid" id="id" value="id" class="text ui-widget-content ui-corner-all"/>
<label for="ename">Employee Name</label>
<s:textfield name="employeename" id="ename" value="ename" class="text ui-widget-content ui-corner-all"/>
<label for="design">Designation</label>
<s:textfield name="designtn" id="design" value="design" class="text ui-widget-content ui-corner-all"/>
<label for="dob">DOB</label>
<s:textfield name="dob" id="dob" value="dob" class="text ui-widget-content ui-corner-all"/>
<label for="doj">Date of Joining</label>
<s:textfield name="doj" id="doj" value="doj" class="text ui-widget-content ui-corner-all"/>
<s:submit name="Update"/>
</form>
</fieldset>
</div>
<button id="view">VIEW</button>
<div id="dialog-form1" title="Employee Details">
<fieldset>
<table border=1>
<tr class="ui-widget-header ">
<td>EID</td>
<td>Employee Name</td>
<td>Designation</td>
<td>DOB</td>
<td>Date of Joining</td>
<s:iterator value="employees">
<tr>
<td><s:property value="eid"/></td>
<td><s:property value="employeename"/></td>
<td><s:property value="designtn"/></td>
<td><s:property value="dob"/></td>
<td><s:property value="doj"/></td>
</tr>
</s:iterator>
</table>
</fieldset>
</center>
</body>
</html>
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<title>jQuery UI Dialog - Modal form</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
body { font-size: 62.5%; }
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain { width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>
<script>
$(function() {
var id = $( "#id" ),
ename = $( "#ename" ),
design = $( "#design" ),
dob=$("#dob"),
doj=$("#doj"),
allFields = $( [] ).add( id ).add( ename ).add( design ).add( dob ).add( doj );
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 350,
width: 350,
modal: true,
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
$( "#create-user" )
.button()
.click(function() {
$( "#dialog-form" ).dialog( "open" );
});
});
function deleteRecord(eid){
var f=document.Delete;
f.method="post";
f.action='Delete?eid='+eid;
f.submit();
}
function editRecord(eid,ename,des,dob,doj)
{
f.method="update";
f.action='edit1.jsp?sno='+sno;
f.submit();
}
$(function() {
var id = $( "#id" ),
ename = $( "#ename" ),
design = $( "#design" ),
dob=$("#dob"),
doj=$("#doj"),
allFields = $( [] ).add( id ).add( ename ).add( design ).add( dob ).add( doj );
$( "#dialog-form1" ).dialog({
autoOpen: false,
height: 400,
width: 500,
modal: true,
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
$( "#view")
.button()
.click(function() {
$( "#dialog-form1" ).dialog( "open" );
});
});
$(function(eid,ename,des,dob,doj) {
allFields = $( [] ).add( eid ).add( ename ).add( des ).add( dob ).add( doj );
$( "#dialog-form2" ).dialog({
autoOpen: false,
height: 400,
width: 500,
modal: true,
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
$( "#edit")
.button()
.click(function() {
$( "#dialog-form2" ).dialog( "open" );
});
});
function checkRows() {
var rowsIndex;
var rows = document.getElementById('historyTable').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
for (i = 1; i < rows.length; i++) {
if(rows[i].getElementsByTagName('td')[0].getElementsByTagName('input')[0].checked) {
// here "i" is the row number if checked
}
}
}
function listbox_remove(sourceID) {
//get the listbox object from id.
var src =document.getElementById(sourceID)
//iterate through each option of the listbox
for(var count= src.options.length-1; count >= 0; count--) {
//if the option is selected, delete the option
if(src.options[count].selected == true) {
try {
var f=document.Delete;
f.method="post";
f.action='Delete?eid='+eid;
f.submit();
} catch(error) {
src.remove(count);
}
}
}
}
</script>
</head>
<body>
<br>
<br>
<br>
<center>
<div id="users-contain" class="ui-widget">
<h1>Employee Details</h1>
<br>
<br>
<h4>Hai <s:property value="username"/></h4>
<br>
<br>
<form name="Delete">
<table border=1>
<tr class="ui-widget-header ">
<td>EID</td>
<td>Employee Name</td>
<td>Designation</td>
<td>DOB</td>
<td>Date of Joining</td>
<td>Mark to Select</td></tr>
<s:iterator value="employees">
<tr>
<td><s:property value="eid" /></td>
<td><s:property value="employeename" /></td>
<td><s:property value="designtn" /></td>
<td><s:property value="dob" /></td>
<td><s:property value="doj" /></td>
<td><input type="checkbox" id="hai"/></td>
<td><input type="button" name="delete" value="Delete" style="background-color:#FFFFFF;font-weight:bold;color:#000000;" onclick="deleteRecord(<s:property value="eid"/>);" ></td>
<td><input type="button" id="edit" name="edit" value="Edit" style="background-color:WHITE;font-weight:bold;color:BLACK;" onclick="deleteRecord(<s:property value="eid"/>,<s:property value="employeename" />,<s:property value="designtn" />,<s:property value="dob" />,<s:property value="doj" />);" ></td>
<%--<td><button id="create-user1">EDIT</button></td>--%>
<!-- <td><button id="bt">EDIT</button></td>-->
</tr>
</s:iterator>
</table>
</form>
</div>
<button onclick="listbox_remove('hai');">Delete</button>
<button id="create-user">ADD</button>
<div id="dialog-form" title="Add New Employee Details">
<p>All form fields are required.</p>
<fieldset>
<form action="Addition">
<label for="id">EID</label>
<s:textfield name="eid" id="id" value="" class="text ui-widget-content ui-corner-all"/>
<label for="ename">Employee Name</label>
<s:textfield name="employeename" id="ename" value="" class="text ui-widget-content ui-corner-all"/>
<label for="design">Designation</label>
<s:textfield name="designtn" id="design" value="" class="text ui-widget-content ui-corner-all"/>
<label for="dob">DOB</label>
<s:textfield name="dob" id="dob" value="" class="text ui-widget-content ui-corner-all"/>
<label for="doj">Date of Joining</label>
<s:textfield name="doj" id="doj" value="" class="text ui-widget-content ui-corner-all"/>
<s:submit value="Add Employee"/>
</form>
</fieldset>
</div>
<div id="dialog-form2" title="Edit Employee Details">
<p>All form fields are required.</p>
<fieldset>
<form action="Update">
<label for="id">EID</label>
<s:textfield name="eid" id="id" value="id" class="text ui-widget-content ui-corner-all"/>
<label for="ename">Employee Name</label>
<s:textfield name="employeename" id="ename" value="ename" class="text ui-widget-content ui-corner-all"/>
<label for="design">Designation</label>
<s:textfield name="designtn" id="design" value="design" class="text ui-widget-content ui-corner-all"/>
<label for="dob">DOB</label>
<s:textfield name="dob" id="dob" value="dob" class="text ui-widget-content ui-corner-all"/>
<label for="doj">Date of Joining</label>
<s:textfield name="doj" id="doj" value="doj" class="text ui-widget-content ui-corner-all"/>
<s:submit name="Update"/>
</form>
</fieldset>
</div>
<button id="view">VIEW</button>
<div id="dialog-form1" title="Employee Details">
<fieldset>
<table border=1>
<tr class="ui-widget-header ">
<td>EID</td>
<td>Employee Name</td>
<td>Designation</td>
<td>DOB</td>
<td>Date of Joining</td>
<s:iterator value="employees">
<tr>
<td><s:property value="eid"/></td>
<td><s:property value="employeename"/></td>
<td><s:property value="designtn"/></td>
<td><s:property value="dob"/></td>
<td><s:property value="doj"/></td>
</tr>
</s:iterator>
</table>
</fieldset>
</center>
</body>
</html>
Topic Participants
irshadece16
jakecigar