Hi RichardSa,
This error was because you had forgotten to add the jquery-ui file reference in the page.
Refer below modified code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<title>Test</title>
<script type="text/javascript">
function ShowPopup() {
$("#dialog").dialog({
title: "Update record",
buttons: {
Close: function () {
$(this).dialog('close');
}
},
modal: true,
width: "480"
});
$("#dialog").parent().appendTo($("form:first"));
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Adminlbl" runat="server" Text="Richard" />
<asp:Label ID="electlbl" runat="server" Text="2021 Youth Elections" />
<asp:DataList runat="server" ID="dlquestion" CssClass="row" CellPadding="4" OnItemDataBound="dlquestion_ItemDataBound" Width="100%">
<ItemTemplate>
<div class="card p-3 mb5 bg-white rounded" style="border: 1px solid #d1d5d4; margin: 0 auto; padding: 10px; width: 100%; border-radius: 10px;">
<asp:Label ID="lblQuestion" Text='<%# Eval("BallotQuestion") %>' runat="server" Font-Bold="true" Font-Names="Varela Round" Font-Size="16pt" />
<asp:Repeater ID="rptOptions" runat="server">
<ItemTemplate>
<div runat="server" id="innerTable">
<div class="" id="middleTable">
<img alt="lock" src="images/home/lock.png" height="80" />
<br />
<div>
<asp:HiddenField ID="hfElectionID" runat="server" Value='<%# Eval("Id") %>' />
<asp:Label ID="Label1" runat="server" Text="NAME: " Font-Bold="true" Font-Size="13pt"></asp:Label>
<asp:Label ID="candlbl" runat="server" Text='<%# Eval("CandidateName") %>' />
</div>
<br />
<div>
<asp:Label ID="Label2" runat="server" Text="BIO: " Font-Bold="true" Font-Size="13pt"></asp:Label>
<asp:Label ID="biolabel" Text='<%# Eval("Shortbio") %>' runat="server" />
</div>
<br />
<br />
</div>
<%--<div>
<br />
<asp:Button ID="Button2" runat="server" Text="Edit" CssClass="btn btn-info" Font-Size="10pt" OnClick="OnEdit" />
<asp:Button ID="Button3" runat="server" Text="Delete" CssClass="btn btn-danger" Font-Size="10pt" />
</div>
<hr />--%>
</div>
</ItemTemplate>
</asp:Repeater>
<asp:Button ID="btnAddOption" runat="server" Text="Add Option" CssClass="btn btn-primary" OnClick="OnAddOption" />
</div>
</ItemTemplate>
</asp:DataList>
<div id="dialog" style="display: none">
<asp:HiddenField ID="hfBallotQuestion" runat="server" />
Candidate Name:
<asp:TextBox runat="server" ID="txtCandidateName" />
Shortbio:
<asp:TextBox runat="server" ID="txtShortbio" />
<asp:Button Text="Add" runat="server" OnClick="OnAdd" />
</div>
</div>
</form>
</body>
</html>
Code
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
string query = "SELECT DISTINCT BallotQuestion FROM Election WHERE AdminName = '" + Adminlbl.Text + "' AND ElectionName = '" + electlbl.Text + "'";
DataTable dt = GetData(query);
dlquestion.RepeatColumns = dt.Rows.Count;
dlquestion.DataSource = dt;
dlquestion.DataBind();
dlquestion.RepeatColumns = 1;
dlquestion.RepeatDirection = RepeatDirection.Vertical;
}
}
protected void dlquestion_ItemDataBound(object sender, DataListItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
string BallotQuestion = (e.Item.FindControl("lblQuestion") as Label).Text;
Repeater rptOptions = e.Item.FindControl("rptOptions") as Repeater;
string query = "SELECT Id,CandidateName, Shortbio FROM Election WHERE BallotQuestion = '" + BallotQuestion + "' AND AdminName = '" + Adminlbl.Text + "' AND ElectionName = '" + electlbl.Text + "'";
rptOptions.DataSource = GetData(query);
rptOptions.DataBind();
}
}
private DataTable GetData(string query)
{
SqlCommand cmd = new SqlCommand(query);
using (SqlConnection con = new SqlConnection("Data Source = 192.168.0.10\\SQL2014;database=test;uid=sa;pwd=pass@123;"))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataTable dt = new DataTable())
{
sda.Fill(dt);
return dt;
}
}
}
}
protected void OnAddOption(object sender, EventArgs e)
{
DataListItem item = (sender as Button).NamingContainer as DataListItem;
Label ballotQuestion = item.FindControl("lblQuestion") as Label;
hfBallotQuestion.Value = ballotQuestion.Text;
ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup();", true);
}
protected void OnAdd(object sender, EventArgs e)
{
string adminName = Adminlbl.Text;
string electtionName = electlbl.Text;
string ballotQuestion = hfBallotQuestion.Value;
string name = txtCandidateName.Text;
string shortbio = txtCandidateName.Text;
using (SqlConnection con = new SqlConnection("Server=192.168.0.10\\SQL2014;DataBase=Test;UID=sa;PWD=pass@123;"))
{
string query = "INSERT INTO Election (AdminName,ElectionName,BallotQuestion,CandidateName,Shortbio) VALUES (@AdminName,@ElectionName,@BallotQuestion,@CandidateName,@Shortbio)";
SqlCommand cmd = new SqlCommand(query);
cmd.Parameters.AddWithValue("@AdminName", adminName);
cmd.Parameters.AddWithValue("@ElectionName", electtionName);
cmd.Parameters.AddWithValue("@BallotQuestion", ballotQuestion);
cmd.Parameters.AddWithValue("@CandidateName", name);
cmd.Parameters.AddWithValue("@Shortbio", shortbio);
cmd.Connection = con;
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
Response.Redirect(Request.Url.AbsoluteUri);
}
