I’m not well-versed with Javascript, so please feel free to explain in detail. I’ve got this script that acts as a keystroke counter:
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
const textArea2 = document.getElementById('TextBox_Follow_Up_Answer2');
const label1 = document.getElementById('Label_Answer_Char_Count');
const label2 = document.getElementById('Label_Answer_Char_Count2');
const labelRemaining1 = document.getElementById('Label_Answer_Char_Remaining');
const labelRemaining2 = document.getElementById('Label_Answer_Char_Remaining2');
// Add input event listener for text area
textArea2.addEventListener('input', function () {
textCounter(textArea2, 3000, label1, labelRemaining1);
textCounter2(textArea2, 865, label2, labelRemaining2);
alert("Event Listener - DOMContentLoaded");
});
});
function textCounter(field, maxlimit, label, label2) {
if (field.value.length > maxlimit)
field.value = field.value.substring(0, maxlimit);
else {
label.innerHTML = maxlimit - field.value.length;
}
if (field.value.length > maxlimit - 500) {
label.style.color = "#FF0000";
label2.style.color = "#FF0000";
}
else {
label.style.color = "#000000";
label2.style.color = "#000000";
}
alert("textCounter Fired");
}
function textCounter2(field, maxlimit, label, label2) {
if (field.value.length > maxlimit)
// field.value = field.value.substring(0, maxlimit);
field.value = field.value;
else {
label.innerHTML = maxlimit - field.value.length;
}
if (field.value.length > maxlimit - 200) {
label.style.color = "#FF0000";
label2.style.color = "#FF0000";
}
else {
label.style.color = "#000000";
label2.style.color = "#000000";
}
alert("textCounter2 Fired");
}
$(document).ready(function () {
alert("Page Initial Load");
textCounter(textArea2, 3000, label1, labelRemaining1); // this works for initial page load only
textCounter2(textArea2, 865, label2, labelRemaining2);
});
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
alert("Page Reload");
textCounter(textArea2, 3000, label1, labelRemaining1); // this works after postback
textCounter2(textArea2, 865, label2, labelRemaining2);
});
</script>
On the same page, I have a button that creates an email based on certain info.
<td>
<asp:DropDownList ID="DropDownList_Response_Method" runat="server" Width="200px">
</asp:DropDownList>
<asp:Button ID="Button_Create_Email" runat="server" Text="Create Email" CssClass="action_button" Height="22px" Width="200px" OnClick="Button_Create_Email_Click" />
</td>
The code-behind for this button is:
protected void Button_Create_Email_Click(object sender, EventArgs e)
{
string question;
string article;
string section;
//use question 3 details
if (Label_Question_3_Text.Text != "")
{
question = WebUtility.HtmlDecode(Label_Question_3_Text.Text);
article = Label_Question_3_Article_Number.Text;
section = Label_Question_3_Section_Number.Text;
}
//use question 2 details
else if (Label_Question_2_Text.Text != "")
{
question = WebUtility.HtmlDecode(Label_Question_2_Text.Text);
article = Label_Question_2_Article_Number.Text;
section = Label_Question_2_Section_Number.Text;
}
//use question 1 details
else
{
question = WebUtility.HtmlDecode(Label_Question_1_Text.Text);
article = Label_Question_1_Article_Number.Text;
section = Label_Question_1_Section_Number.Text;
}
string answer = WebUtility.HtmlDecode(TextBox_Follow_Up_Answer2.Value);
string answer_article = TextBox_Answer_Article_Number.Text;
string answer_section = TextBox_Answer_Section_Number.Text;
//remove special characters
question = question.Replace("'", "");
question = question.Replace("<", " less than ");
question = question.Replace(">", " greater than ");
question = question.Replace(""", "");
question = question.Replace("&", "and");
question = question.Replace(";", "");
question = question.Replace("/", "");
question = question.Replace("%", " percent");
question = question.Replace("#", "number");
question = question.Replace(System.Environment.NewLine, " ");
answer = answer.Replace("'", "");
answer = answer.Replace("<", " less than ");
answer = answer.Replace(">", " greater than ");
answer = answer.Replace(""", "");
answer = answer.Replace("&", "and");
answer = answer.Replace(";", "");
answer = answer.Replace("/", "");
answer = answer.Replace("%", " percent");
answer = answer.Replace("#", "number");
answer = answer.Replace(System.Environment.NewLine, " ");
string account_name = Label_Account_Name.Text;
//string account_number = Label_Account_Number.Text;
Page.ClientScript.RegisterStartupScript(this.GetType(), "email", "parent.location='mailto:" + Label_Advocate_Name.Text + "?Subject=Coach Response for " + Label_Unique_ID.Text + " " + Label_Escalated.Text + " " + account_name +
"&body=Analyst Question: " + question +
"%0D%0AAnalyst Article Number: " + article +
"%0D%0AAnalyst Section Number: " + section +
"%0D%0A %0D%0AAnswer: " + answer +
"%0D%0AAnswer Article: " + answer_article +
"%0D%0AAnswer Section: " + answer_section +
"%0D%0A %0D%0AREMINDER: If this answers your question, please accept the answer in the Question Response Page." +
"'", true);
}
So, what currently happens with the above code is, when the page loads I get an alert for “Page Initial Load”. I type a letter in the textbox and I get alerts for “textCounter Fired”, “textCounter2 Fired” and “Event Listener – DOMContentLoaded”. The counter decreases by 1. I type the next letter, and I get the same alerts, and again the counter decreases by 1. All is working well.
I click the Email button. It bypasses the “If (!IsPostBack)” block in my code-behind, so I know we’re dealing with a page postback. I continue stepping through the code, keeping an eye on my webpage and so far the character count on the page is fine. When I get to the last closing bracket of Button_Create_Email_Click, the webpage jumps to the top and the counters are reset to their default number.
When I close the email, I get no prompts. The javascript has stopped working. The counter doesn’t move, no alerts appear. I assume the listener has stopped listening? I added that last section of my Javascript because I saw a post that said you needed an add_EndRequest on Postback, but it doesn’t seem to work since I never see the alert inside that function. Related to that, I see this in the Debug window: “Uncaught ReferenceError ReferenceError: Sys is not defined”