We Keep Coding

Signature Pad Using C# Code Behind Will Not Allow Signature Insertion

#szimek I am trying to implement your Signature Pad in a C# Web Forms application. The signature pad displays and the Clear button is clickable, but the canvas won't open up to allow entry of the signature. I have had to change signature-pad ID to signaturepad, could that be the reason it isn't working? HELP!!
</div>
<hr class="double" />
<asp:HiddenField ID="hfimg" runat="server" />
<div id="signaturepad" class="signature-pad" runat="server">
<div class="signature-pad--body" runat="server">
<canvas></canvas>
</div>
<div class="signature-pad--footer" runat="server">
<div class="description">Sign above</div>
<div class="signature-pad--actions" runat="server">
<div>
<button type="button" class="button clear" data-action="clear">Clear</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/signature_pad#4.0.0/dist/signature_pad.umd.min.js"></script>
<script src="Content/app.js"></script>

How to fix Summernote issue in my .Net 5 app?

I am trying to use summernote on my contact form for the text area, and unfortunately I have the textarea showing twice int he contact form when running the application.
Here is the textarea bootstrap code:
<div class="control-group">
<div class="form-group floating-label-form-group controls">
<label asp-for="Message">Message</label>
<textarea rows="5" class="form-control" asp-for="Message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
#section Scripts{
<script>
//Default font size but not for placeholder...
$('#Message').summernote({
placeholder: "Please enter a message"
});
</script>
}
Note that I am using "summernote-bs4.min.css" & "summernote-bs4.min.js"

The problem is that for Bootstrap 4 I have to use the popper script to make it wor properly;
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" ></script>

jQuery Tabs Errors

I am trying to jQuery tabs in C#. Here is the script sources and stylesheet which I included:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="Styles/jquery-ui.css" />
<script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#reportTabs").tabs();
});
</script>
And here is where I set up my jQuery tabs:
<div id="reportTabs">
<ul>
<li>By Region</li>
<li>Execution Status Report</li>
<li>Due in 30 Days</li>
<li>Due in 30-90 Days</li>
<li>By Service Area</li>
</ul>
<div id="statusDiv" runat="server">
</div>
<div id="exeDiv" runat="server">
</div>
<div id="dueDiv" runat="server">
</div>
</div>
But somehow when I try to run the page, it tells me an error message which is: mismatching fragment identifier. I wonder which part went wrong?
Thanks in advance.

Change the HTML and try, hopefully it should work, I guess mainContent_ in href is playing culprit
<div id="reportTabs">
<ul>
<li>By Region</li>
<li>Execution Status Report</li>
<li>Due in 30 Days</li>
<li>Due in 30-90 Days</li>
<li>By Service Area</li>
</ul>
<div id="statusDiv" runat="server">
1
</div>
<div id="exeDiv" runat="server">
2
</div>
<div id="dueDiv" runat="server">
3
</div>
<div id="rangeDiv" runat="server">
4
</div>
<div id="areaDiv" runat="server">
5
</div>
</div>
Demo: http://jsfiddle.net/TLB79/
Please check external resources for JS and CSS URL

Bootstrap modal not rendering inside ASP.NET main form

I am trying to pull values entered by a user from a C# code file using a Bootstrap modal, which is in an ASPX page.
I found that Bootstrap is not allowing two forms in one page (blocking values of another form), and as we all know, we have a master form in master page, so I can't use another form for the modal, and my modal is rendering outside of the main form.
I used this code to render my modal inside the parent form:
function showDialog(id) {
$('#paiddialog').on('show.bs.modal', function (e) {
$(this).parent().appendTo("form");
});
$('#' + id).modal("show");
}
This is the modal's HTML:
<div id="paiddialog" class="modal fade" role="dialog" style="display: none;" aria-hidden="true">
<asp:UpdatePanel ID="panels" runat="server">
<ContentTemplate>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Update payment Information
</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label class="col-sm-4 control-label" for="form-field-1">
Select Assignment ID
</label>
<div class="col-sm-6">
<asp:DropDownList ID="ddlassignmentid" runat="server" DataTextField="iassignmentidref" AppendDataBoundItems="true" DataValueField="iassignmentid" DataSourceID="sdassignmentid" CssClass="form-control">
<asp:ListItem Text="Select" Value=""></asp:ListItem>
</asp:DropDownList>
<asp:LinkButton ID="btnbindassigdetails" runat="server" OnClick="btnbindassigdetails_Click" CssClass="btn btn-info">Pull info</asp:LinkButton>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<asp:LinkButton ID="btnupdate" OnClick="btnupdate_Click" runat="server" CssClass="btn btn-success large">Request Payment </asp:LinkButton>
<button aria-hidden="true" data-dismiss="modal" class="btn btn-default">
Close
</button>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
The rendered HTML is some thing like this
<html>
<head></head>
<body>
<form id="mainform" action="page.aspx">
<div class="pagecontent"></div>
</form>
<div class="model fade"></div>
</html>
But still no luck.

There is an ugly hack to allow another form tag.
</form><form action="blah.aspx" id="blah">
This will get a trailing form in there for you to work with. Not recommended but a way around the 1 form tag limit of .Net

For any new readers, i managed to fix this by adding bellow script
$(this).parent().appendTo("form");

Jquery accordion with repeater, row details are not visible when activating row

I am trying to use the jquery accordion with a repeater. I used the sample directly from the jquery documentation. When I click on the section links, the details open and expand, but you can't see any of the text. The html output looks right to me, not sure where this is going wrong.
<script>
$(document).ready(function () {
$("#accordion").accordion();
});
</script>
<div id="accordion">
<asp:Repeater ID="respondToExceptionsList" runat="server">
<ItemTemplate>
<h3>Section 1</h3>
<div>
sdfffffffffffffff
</div>
</ItemTemplate>
</asp:Repeater>
</div>
This is the html output.
<DIV id=accordion class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role=tablist jQuery1315324170464="2">
<H3 aria-expanded=true class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role=tab tabIndex=0 jQuery1315324170464="3">
<SPAN class="ui-icon ui-icon-triangle-1-s" jQuery1315324170464="13"></SPAN><A tabIndex=-1 href="#">Section 1</A></H3>
<DIV style="HEIGHT: 19px" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" role=tabpanel>sdfffffffffffffff </DIV>
</DIV>

This is related to the accordion height being set to zero. I am having the same issue using the accordion in an html repeater generated using angularjs. To fix the problem, the accordion must be refreshed after the data is loaded. I found the answer in the jquery forums here.