Check the modified working code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.starrr
{
display: inline-block;
}
.starrr a
{
font-size: 16px;
padding: 0 1px;
cursor: pointer;
color: #FFD119;
text-decoration: none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="starrr.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
ApplyRating();
});
function ApplyRating() {
document.getElementById('star1').style.display = 'block';
$('.your-choice-was').hide();
$('.choice').text("");
$('[id*=star1]').starrr({
change: function (e, value) {
if (value) {
$('.your-choice-was').show();
$('.choice').text(value);
//SendData();
div = document.getElementById('star1');
div.style.display = 'none';
} else {
$('.your-choice-was').hide();
}
}
});
};
function SendData() {
var pData = [];
pData[0] = $('.choice').text();
var jsonData = JSON.stringify({ pData: pData });
$.ajax({
url: "Home.aspx/Quality",
data: jsonData,
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (msg) {
//alert(msg.d);
},
error: function (result) {
alert("ERROR " + result.status + ' ' + result.statusText);
}
});
};
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" />
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="grvResult" runat="server" AutoGenerateColumns="false" OnRowCommand="grvResult_OnRowCommand">
<Columns>
<asp:BoundField DataField="Id" HeaderText="N° Ticket" />
<asp:BoundField DataField="Name" HeaderText="User" />
<asp:ButtonField CommandName="cncQuality" ButtonType="Button" Text="Quality" />
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<div id="QualifyModal" class="modal fade" data-backdrop="static" data-keyboard="false"
tabindex="-1" role="dialog">
<div class="modal-dialog modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
x</button>
</div>
<div class="modal-body">
<asp:HiddenField ID="hfQuality" runat="server" />
<div class="row">
<div class="col-md-12 text-center">
<asp:UpdatePanel ID="upQualify" runat="server">
<ContentTemplate>
<asp:Label ID="lbQuality" runat="server" Font-Bold="true"></asp:Label>
<br />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class='starrr' id='star1'>
</div>
<div>
<a class="Quality"><span class='your-choice-was' style='display: none;'>
<br />
Your rating is: <span class='choice'></span></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
//On UpdatePanel Refresh.
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
prm.add_endRequest(function (sender, e) {
if (sender._postBackSettings.panelsToUpdate != null) {
ApplyRating();
}
});
};
</script>
</form>
</body>
</html>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country") });
dt.Rows.Add(1, "John Hammond", "United States");
dt.Rows.Add(2, "Mudassar Khan", "India");
dt.Rows.Add(3, "Suzanne Mathews", "France");
dt.Rows.Add(4, "Robert Schidner", "Russia");
grvResult.DataSource = dt;
grvResult.DataBind();
}
}
protected void grvResult_OnRowCommand(object sender, GridViewCommandEventArgs e)
{
//int index = Tools.ToInteger(e.CommandArgument);
//GridViewRow gvr = grvResult.Rows[index];
if (e.CommandName.Equals("cncQuality"))
{
//lbQualify.Text = "User: " + gvr.Cells[1].Text;
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append(@"<script type='text/javascript'>");
sb.Append(" $(function () {$('[id*=QualifyModal]').modal('show');});");
sb.Append(@"</script>");
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "MyQualityModal", sb.ToString(), false);
}
}