My whole design is like this as i explained below
I have a form where three buttons are there on main page
1.Create new TDC
2.Search TDC
3.TRACK History
image link for more clearity
http://www.gifyu.com/image/L36f
http://www.gifyu.com/image/L36Y
On click of Create new tdc popup is open where 8 radio buttons are there which all represent different forms,if I select one of them let’s say 1.uncoated wire
And then click “openForm” button on that popup ,then a page regarding to that form structure will open in a div with id “pdfForm” below those three buttons .
The form is generating dynamically using jquery.
<script type="text/javascript">
$(document).ready(function () {
$(function dynamicForm() {
//function dynamicForm() {
$("#openForm").click(function () {
$('#myModal').modal('hide');
$("#gvCustomers").hide();
// $('#grid').hide();
var radioValue = $("input[name='optionsRadios']:checked").val();
if (radioValue == 'uncoatedRdBtn') {
$("#pdfForm").prepend("<div id='pdfFormInsideL1'></div>");
$("#pdfFormInsideL1").prepend("<h3><strong>tdc</strong></h3>")
$("h3").addClass("text-center");
$("#pdfFormInsideL2").after("<div id='pdfFormInsideTblRight'></div>");………Form structure
var s = $(' <input type="button" ID="btnFrmSubmit" runat="server" Text="Submit" value="FrmSubmit" />');
$("#mainTbl").after(s);
});
});
});
Submit button is there for submitting form input to database
2.Now on clicking ‘TRACK History’ button a gridview is open at same place where dynamic form was generated below div with id “pdfForm” .and few items from form will be showed in that gridview
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" Font-Names="Arial" style="display: none"
Font-Size="10pt" RowStyle-BackColor="#A1DCF2" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor = "White">
<Columns>
<asp:HyperLinkField DataTextField="TDC_NO" HeaderText="TDC_NO" />
<asp:BoundField ItemStyle-Width="150px" DataField="REVISION" HeaderText="REVISION" />
</Columns>
</asp:GridView>
GridView Populate using jquery
<script type="text/javascript">
$(function () {
$("#THistory").click(function (event) {
event.preventDefault();
$("#pdfFormInsideL1").hide();
document.getElementById('<%=gvCustomers.ClientID%>').style.display = 'block';
//$("#gvCustomers").show();
$("#gvCustomers").attr("visibility", "visible");
$.ajax({
type: "POST",
url: "TDC.aspx/GetCustomers",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
});
function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var customers = xml.find("Table");
var row = $("[id*=gvCustomers] tr:last-child").clone(true);
$("[id*=gvCustomers] tr").not($("[id*=gvCustomers] tr:first-child")).remove();
$.each(customers, function () {
var customer = $(this);
$("td", row).eq(0).find("a").text($(this).find("TDC_NO").text());
$("td", row).eq(0).find("a").attr("href", "TDC.aspx?Id=" + $(this).find("TDC_NO").text());
$("td", row).eq(1).html($(this).find("REVISION").text());
$("[id*=gvCustomers]").append(row);
row = $("[id*=gvCustomers] tr:last-child").clone(true);
});
}
});
</script>
Method called at c# side
[WebMethod]
public static string GetCustomers()
{
string query = "SELECT TDC_NO,REVISION,REVISION_DATE, P_GROUP,FORMNAME from tdc_product1 ";
OracleCommand cmd = new OracleCommand(query);
return GetData(cmd).GetXml();
}
private static DataSet GetData(OracleCommand cmd)
{
string strConnString = ConfigurationManager.ConnectionStrings["conndbprodnew"].ConnectionString;
using (OracleConnection con = new OracleConnection(strConnString))
{
using (OracleDataAdapter sda = new OracleDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataSet ds = new DataSet())
{
sda.Fill(ds);
return ds;
}
}
}
}
Now on clicking HeaderText="TDC_NO" I want to call some jquery ajax method and on success of that I want to generate same form structure (which I created at beginning on clicking “openForm” button) whose tdc number I have clicked in gridview, at the same place inside div id “pdfform” using either through jquery or server side and also bind the data in it and again if the user edit any textbox and click submit button data will be saved in database.