This code below displays data on modal using datalist, but my challenge is this, if i click the button comment to show the comments of that post and display it on modal, it only shows the first data in table, what can i do to display the right record when the button comment is clicked
see code below
<script>
$(document).ready(function () {
$("button[id*='button1']").click(function () {
var dat = $("table[id='DataList1'] ").clone;
var id = $(this).parent().parent().prevAll("tr").eq(1).find("span[id*='Idlabel']").html();
$.ajax({
type: "POST",
url: "Demo1.aspx/GetComents",
data: '{Id: "' + id + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
}
});
});
});
function Clear() {
$("table[id='DataList1'] ").find("table").each(function () {
if ($(this).find(".Id").html() != " ") {
$(this).remove();
}
});
$("table[id='DataList1'] ").find("tr").eq(0).show();
}
function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var comments = xml.find("Table");
var repeatColumns = parseInt("<%=DataList1.RepeatColumns == 0 ? 1 : DataList1.RepeatColumns %>");
var rowCount = Math.ceil(comments.length / repeatColumns);
var i = 0;
while (i < repeatColumns * rowCount) {
var row = $("table[id='DataList1'] ").find("tr").eq(0).clone();
for (var j = 0; j < repeatColumns; j++) {
var comment = $(comments[i]);
if (comment.length == 0) {
row.find("table:last").remove();
}
else {
row.find(".Id").eq(j).html(comment.find("Id").text());
row.find(".Name").eq(j).html(comment.find("Name").text());
row.find(".Con").eq(j).html(comment.find("Comments").text());
}
}
i++;
$("table[id='DataList1'] ").append(row);
}
$("table[id='DataList1'] ").find("tr").eq(0).css("display", "none");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:DataList ID="DataList2" runat="server">
<ItemTemplate>
<table class="table">
<tr>
<th colspan="2">
<asp:Label ID="Idlabel" runat="server" Text=' <%# Eval("Id") %>'></asp:Label>
</th>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="Namelabel" runat="server" Text=' <%# Eval("Name") %>'></asp:Label>|
<asp:Label ID="CountryLabel" runat="server" Text='<%#Eval("Contents")%>'></asp:Label>
</td>
</tr>
<tr>
<td>
<button type="button" data-toggle="modal"
data-target="#myModal" id="button1">
Comments</button>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>fff</p>
<asp:DataList ID="DataList1" runat="server" RepeatLayout="Table" RepeatColumns="1"
CellPadding="2" CellSpacing="2">
<ItemTemplate>
<table cellpadding="2" cellspacing="0" border="1" style="width: 200px; height: 100px; border: dashed 2px #04AFEF; background-color: #B0E2F5">
<tr>
<td>
<b><u><span class="Id"><%# Eval("Id") %></span></u></b>
</td>
</tr>
<tr>
<td>
<b>Name: </b><span class="Name"><%# Eval("Name") %></span><br />
<b>Comments:</b><span class="Con"><%# Eval("Comments") %></span><br />
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</form>
</body>
</html>
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.BindDataList();
BindDummyRow();
}
}
private void BindDummyRow()
{
DataTable dummy = new DataTable();
dummy.Columns.Add("Id");
dummy.Columns.Add("Name");
dummy.Columns.Add("Comments");
dummy.Rows.Add(" "," "," ");
DataList1.DataSource = dummy;
DataList1.DataBind();
}
private void BindDataList()
{
string constr = ConfigurationManager.ConnectionStrings["DB"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("select Id, Name,Contents from Posts"))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataTable dt = new DataTable())
{
sda.Fill(dt);
DataList2.DataSource = dt;
DataList2.DataBind();
}
}
}
}
}
[System.Web.Services.WebMethod]
public static string GetComents(string Id)
{
string constr = ConfigurationManager.ConnectionStrings["DB"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("select Id, Name,Comments from Comments where PostId=@PostId"))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Parameters.AddWithValue("@PostId", Int16.Parse(Id));
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataSet ds = new DataSet())
{
sda.Fill(ds);
return ds.GetXml();
}
}
}
}
}
Thanks
