Within a repeater, there is a button that should remove the respective div followed by a database query using AJAX when clicked. The issue arises when attempting to remove the div in the success part of the AJAX call.
Here is the code snippet:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1" >
<ItemTemplate>
<div class="grid_4" data-gen="afc" data-gen-offset="bottom-in-view" id='<%#Eval("Id") %>'>
<a class="services-block" href="#">
<ul class="icon">
<li class="fontawesome-icon large circle-two fa fa-laptop"></li>
<li class="fontawesome-icon large circle-deg-two fa fa-laptop"></li>
</ul>
<p>
<asp:Label ID="lblGameTitle" runat="server" Text='<%# Eval("GameName") %>'></asp:Label></p>
<div class="text">
<asp:Label ID="lblOpponent" runat="server" Text='<%# Eval("OpponentOne") + " Vs. "+ Eval("OpponentTwo") %>'></asp:Label>
<br />
<asp:Label ID="lblDateTime" runat="server" Text='<%# "Date : "+ Eval("GameDate") + "<br />Time : " + Eval("GameTime") %>'></asp:Label>
<br />
<asp:RadioButton ID="rbtnBlue" runat="server" Text="High" GroupName="UrlColor" Checked="true" />
<asp:RadioButton ID="rbtnRed" runat="server" Text="Low" GroupName="UrlColor" />
<asp:Button ID="btnOpponentOne" runat="server" Text='<%# Eval("OpponentOne") %>' OnClientClick="opponentOne(this);"/>
<asp:Button ID="btnOpponentTwo" runat="server" Text='<%# Eval("OpponentTwo") %>' OnClientClick="opponentTwo(this);"/>
<asp:Button ID="btnDraw" runat="server" Text="Draw" OnClientClick="Draw(this);"/>
<br />
</div>
</a>
</div>
<asp:HiddenField ID="gid" runat="server" Value='<%# Eval("ID") %>' />
<asp:HiddenField ID="opOne" runat="server" Value='<%# Eval("OpponentOne") %>' />
<asp:HiddenField ID="opTwo" runat="server" Value='<%# Eval("OpponentTwo") %>' />
</ItemTemplate>
</asp:Repeater>
<%-- <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />--%>
</ContentTemplate>
</asp:UpdatePanel>
JavaScript function utilized for removing the div on button click:
function opponentOne(btn) {
var s = btn.id;
var start = s.indexOf("btnOpponentOne");
var end = s.lastIndexOf("_");
sub = s.substring(start, end);
s = s.replace(sub, "opOne");
var hidden = document.getElementById(s);
var id = hidden.value;
var divId = aaaa1(btn);
var check = CheckRadio(btn);
var tid = getParameterByName('tid');
var inputText = id + "~" + divId + "~" + check+"~"+tid;
if (confirm('Are you sure?')) {
$.ajax({
type: "POST",
url: "/play_match.aspx/AddPrediction",
data: '{\'InputText\':\'' + inputText + '\'}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
if (response.d == "Success") {
alert('done..............'+divId);
$('#' + divId).remove();
}
},
failure: function (response) {
alert('fail');
alert(response.d);
},
error: function (response) {
alert('error');
alert(response.d);
}
});
}
}