hi...
bootstrap edit modal in datatable is not working in mobile view. in normal view we can bind data to edit controls in modal from datatable row but in mobile view(with + and -.to expand and collapse),
when edit row is clicked modal pop up opens but data is not available in bootstrap modal controls.
how can i solve this?
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!-- Bootstrap -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<title></title>
<link href="../css/bootstrap.min.css" rel="stylesheet" />
<script src="../js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" />
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
<%-- url: '<%= Page.ResolveUrl("/WebServicedemo.asmx/GetFiles")%>',--%>
url: "/WebServicedemo.asmx/GetFiles",
method: 'post',
dataType: 'json',
success: function (data) {
$('#datatable').dataTable({
"processing": true,
"paging": true,
"searching": { "regex": true },
data: data,
columns: [
{ 'data': 'ID' },
{ 'data': 'F_Name' },
{ 'data': 'L_Name' },
{ 'data': 'Email_ID' },
{
"data": null,
"defaultContent": '<input type="button" id="btnEdit" class="btn btn-primary" value="Edit" />'
}
]
});
}, error: function (response) {
alert(response.responseText);
}
});
$('body').on('click', '[id*=btnEdit]', function () {
var data = $(this).parents('tr').find('td');
$('[id*=tbtUpdate]').show();
var id = data.eq(0).html();
var fname = data.eq(1).html();
var lname = data.eq(2).html();
var email = data.eq(3).html();
$('[id*=txtId]').val(id);
$('[id*=txtName]').val(fname);
$('[id*=txtLink]').val(lname);
$('[id*=txtemail]').val(email);
});
});
</script>
</head>
<body style="font-family: Arial">
<form id="form1" runat="server">
<table id="tbtUpdate" class="table">
<tr>
<td>Id</td>
<td><asp:TextBox ID="txtId" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>f_name</td>
<td><asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>l_name</td>
<td><asp:TextBox ID="txtLink" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>email</td>
<td><asp:TextBox ID="txtemail" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td align="center"><asp:Button Text="Update" runat="server" class="btn btn-primary" /></td>
<td></td>
</tr>
</table>
<br />
<div style="width: 100%; border: 1px solid black; padding: 3px">
<table id="datatable" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>Id</th>
<th>f_Name</th>
<th>l_name</th>
<th>emailid</th>
<th>Edit</th>
</tr>
</thead>
</table>
</div>
</form>
</body>
</html>
public class File
{
public int ID { get; set; }
public string F_Name { get; set; }
public string L_Name { get; set; }
public string Email_ID { get; set; }
}
[System.Web.Services.WebMethod]
public void GetFiles()
{
string cs = ConfigurationManager.ConnectionStrings["conn"].ConnectionString;
List<File> files = new List<File>();
using (SqlConnection con = new SqlConnection(cs))
{
SqlCommand cmd = new SqlCommand("SELECT ID,F_Name,L_Name,Email_ID FROM Employee", con);
cmd.CommandType = CommandType.Text;
con.Open();
SqlDataReader rdr = cmd.ExecuteReader();
while (rdr.Read())
{
File file = new File();
file.ID = Convert.ToInt32(rdr["ID"]);
file.F_Name = rdr["F_Name"].ToString();
file.L_Name = rdr["L_Name"].ToString();
file.Email_ID = rdr["Email_ID"].ToString();
files.Add(file);
}
}
JavaScriptSerializer js = new JavaScriptSerializer();
Context.Response.Write(js.Serialize(files));
}
