I have created a form in a modal popup with 5 checkboxes where autopostback is set to true. Whenever I click on one of the checkboxes, the modal popup automatically closes.
I have also used an update panel and included ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openModal();", true); in the code behind to reopen the modal popup. However, I do not want the popup to reopen.
How can I achieve this?
It is imperative to reopen the popup each time. When Autopostback occurs, the entire page is refreshed leading to the loss of jquery/javascript variables and modals. To prevent this from happening, utilizing Ajax for communication regarding checkbox selections and corresponding actions is necessary.
Embed your checkboxes within the <asp:UpdatePanel> element:
<asp:UpdatePanel runat="server" ID="updatePanel">
<ContentTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" Text="Checkbox 1" OnCheckedChanged="CheckBox1_CheckedChanged" AutoPostBack="true" />
<asp:CheckBox ID="CheckBox2" runat="server" Text="Checkbox 2" OnCheckedChanged="CheckBox1_CheckedChanged" AutoPostBack="true" />
</ContentTemplate>
</asp:UpdatePanel>
Back-end code:
protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
{
lblResults.Text = String.Empty;
if (CheckBox1.Checked)
lblResults.Text = "Checkbox 1.";
if (CheckBox2.Checked)
lblResults.Text += "Checkbox 2.";
}
.ASPX file:
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="text/javascript">
$(function () {
$('#messageBox').modal('show');
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="modal fade" id="messageBox" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal</h4>
</div>
<div class="modal-body">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server" ID="updatePanel">
<ContentTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" Text="Checkbox 1" OnCheckedChanged="CheckBox1_CheckedChanged" AutoPostBack="true" />
<asp:CheckBox ID="CheckBox2" runat="server" Text="Checkbox 2" OnCheckedChanged="CheckBox1_CheckedChanged" AutoPostBack="true" />
<asp:Label runat="server" ID="lblResults" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
</body>
To ensure smooth page loading, insert the code snippet below before the page loads:
protected void Page_PreInit(object sender, EventArgs e) {
UpdatePanel updatePanel = Master.FindControl("your main Contetnt id") as UpdatePanel;
updatePanel.UpdateMode = UpdatePanelUpdateMode.Conditional;
updatePanel.ChildrenAsTriggers = false;
}
I'm using a GridView with TemplateFields. I attempted to align the header text of the TemplateField to center by using HeaderStyle-HorizontalAlign="Center", but it doesn't seem to be working as expected. <asp:TemplateField HeaderTex ...
I'm relatively new to working with Javascript and I am currently attempting to retrieve data from an External API located on a different website. My goal is to extract the information, parse it, and then display specific parts of it within my HTML pag ...
As I work on developing an Asp.Net application, a challenge has arisen. In order to prevent users from navigating back to the login page after logging in, I have implemented JavaScript code successfully. However, when clicking the browser's back butto ...
Here is the code snippet that I am currently working with: PHP <input style="color:red;font-size:12pt;font-style:italic;" readonly="" type="text" name="q22length" size="3" maxlength="3" value="50"/> <textarea onkeydown="textCounter(doc ...
Here are my cards I am attempting to give them a relative position and the parent div an absolute position, but it is not working as expected. Despite several attempts, I still cannot get the desired result of positioning the cards correctly within the p ...
Image1 Image2 While using visual studio code, I noticed that I can move a car forwards and backwards with the arrow keys on the keyboard. However, it doesn't seem to turn when I try to move in opposite directions. Is there a way to achieve this thro ...
My root div has a width of 100% and I need to ensure that all children do not overlap (overflow:hidden) or exceed the 100% width. While this works well with inner <div>s, using <table>s often causes the table to extend beyond the parent 100% d ...
Revised with HTTP and initial code inspired by requests/Refer to the end of the post: Lately, I have been seeking help from the amazing SO community as I navigate through my AngularJS learning journey. I used to be a traditional C programmer but recently ...
Is there a way to get rid of the unsightly double arrow in the select element? I have tried various solutions I found online, but none seem to be effective. <div class="form-group"> <label for="date">Date</label> <d ...
Is it possible to display multiple views for a single page/template? For instance, imagine a website where users can submit movie reviews and read others' reviews as well. Now, I need to add an edit button to the review pages but only want the button ...
I am attempting to modify the default font of certain text that is processed through google-code-prettify within an angular directive. The structure of the template served by my directive appears as follows: <pre class= "prettyprint" style= "border:1p ...
After making a php ajax call, I have received the following JSON data that needs to be displayed to the users: JSON {"headers":{},"body":"{\"comuni\":[{\"datapresub\":\"08\/08 ...
I've been having trouble getting a response when making a request using a third-party program. Can anyone help me figure out what I might be doing wrong? The response just doesn't seem to be sent at all. I've tried organizing the dependencie ...
Is there a way to change the opacity of only the background of a paragraph without affecting the text? When I try to adjust the opacity, it changes both the text and the background. How can I resolve this issue? HTML <div id="opener"> <p id="in ...
Can anyone assist me in creating a unique regex pattern to extract specific characters from the attribute values of HTML inputs? I'm dynamically cloning select elements and input text with button clicks, so I need to maintain the attribute name synta ...
Looking to create a CSS grid table with 5 columns and an undetermined number of rows. The goal is to display a pop-up element when an element in the first column is clicked, covering columns 2 through 5. This ensures that only the first column remains visi ...
Currently, I am developing a website using PHP and Twitter Bootstrap. The issue I'm encountering is that if I include session_start() first, the layout gets messed up because Bootstrap needs <!DOCTYPE html> to come before it. On the other hand ...
Here is the code snippet in question: if ($('.course-chkbox:checked').length === 0) { alert('no course is selected'); } I'm having trouble getting this to work in certain browsers. Can someone confirm if this is the correct way t ...
This is the code I am currently using .tag-container.bottom-border.col-middle h1.text-center {{ tag.name }} button.btn.btn-follow.pull-right(ng-hide="hasFollowed" ng-click="tagArticles.followTag()") Follow I am trying to align the tag name in th ...
I recently set up a page on my WordPress site using the Twenty Seventeen theme. At the top of the page, I created a toolbar for users to easily adjust the font size and background color. Check out the image below for reference: See Image for Bar Here&apo ...