I'm just wondering if there's a way to add a new checkbox item to an existing asp:checkboxlist control, when another checkbox is checked, without having to do a full postback of the page. Whether it's with javascript, jquery, ajax. Just wondering how (if at all) I can do something like this.
I've been doing some research and it appears I can do a partial postback using an asp:UpdatePanel. I've never used one of these before. Does anyone have an example of how they can be used? Here's what I have, but it's still doing a full postback
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<tr>
<td width="50%">
<asp:CheckBox runat="server" ID="chkEnglish" Font-Bold="true" TextAlign="Right" Text=" English" />
</td>
<asp:Panel runat="server" ID="pnlTopLanguages">
<td rowspan="3" valign="top">
<asp:CheckBoxList ID="chkTopLanguages" CssClass="cb chkTopLangs" TextAlign="Right" runat="server" />
<asp:TextBox runat="server" ID="txtOtherLanguages" onkeyup="SetButtonStatus(this)" onclick="return clearLanguageSearchText()" Text="Other Languages..."></asp:TextBox>
<asp:Button runat="server" ID="btnAddLang" Text="Add" OnClientClick="return CopyOtherLangs()" Enabled="false" /><br /><br />
<asp:CheckBox runat="server" ID="chkManyOtherLanguages" CssClass="cb" Font-Bold="true" Text="Many other languages" />
<cc3:AutoCompleteExtender ID="aceSearch" runat="server" MinimumPrefixLength="1" TargetControlID="txtOtherLanguages"
ServicePath="~/controls/wsCommunity.asmx" ServiceMethod="GetLanguageCompletionList"></cc3:AutoCompleteExtender>
</td>
</asp:Panel>
</tr>
</ContentTemplate>
</asp:UpdatePanel>
Building off Adils answer...to add a checkbox on check of another one, you can use:
$(".classOfCheckboxList").change(function() {
$(this).append("<input type='checkbox' id='newbox' class='currentclass' value='someval' />");
});
As Adil said, this new dynamically added box wont be accessible in the code-behind.
Related
The rich text box (SharePoint control) gets duplicated on partial postbackl. How to overcome this issue? This control is outside the update panel.
<asp:UpdatePanel ID="ExternalCCUpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<table>
<tr>
<td width="45px"></td>
<td>
<asp:ListBox Width="182px" Height="200px" Visible="true" ID="ccEmailListBox" SelectionMode="Multiple" runat="server" ToolTip="Select external user/group names"></asp:ListBox>
</td>
<td width="22px"></td>
<td width="60px">
<asp:Button Width="50px" ID="addToCCSelectedBoxButton" CausesValidation="false" CssClass="submitButton" Text="Add >" runat="server" OnClick="addToCCSelectedBoxButton_Click" /><br />
<asp:Button Width="50px" ID="removeFromCCSelectedListBox" CausesValidation="false" CssClass="submitButton" Text="< Remove" runat="server" OnClick="removeFromCCSelectedListBox_Click" />
</td>
<td width="22px"></td>
<td>
<asp:ListBox Width="182px" Height="200px" Visible="true" SelectionMode="Multiple" ID="ccEmailSelectedListBox" runat="server"></asp:ListBox>
</td>
<td>
<asp:UpdateProgress ID="ExternalCCUpdateProgress" runat="server" AssociatedUpdatePanelID="ExternalCCUpdatePanel" DynamicLayout="true">
<ProgressTemplate>
<img src="/progress.gif"></img><br />
Please Wait...
</ProgressTemplate>
</asp:UpdateProgress>
</td>
</tr>
</table>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="addToCCSelectedBoxButton" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="removeFromCCSelectedListBox" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<SharePoint:InputFormTextBox ID="RichTextBox"
RichText="true" Rows="20"
RichTextMode="FullHtml" runat="server"
TextMode="MultiLine">
</SharePoint:InputFormTextBox>
The problem occurs when the buttons are clicked inside the update panel. The functionality of the buttons are to add/remove entries from the list boxes.
Please try 2 different things. One - remove all the content from the update panel except the buttons and see if the problem persists. If it does I would consider looking at any master pages you have wrapped around this page and try and verify all your controls and html tags are property closed.
Second, try wrapping the richtextbox in a separate update panel and marking the mode conditional.
From the information you have I can't see what is causing the problem, but this may help fix the error or give you other places to look for the root cause.
I have an asp:TextBox in an ajax popup panel. I've searched for a way to make a new line when the user presses the "Enter/Return" key, but nothing has worked so far.
Here is my TextBox:
<asp:TextBox ID="CommentaireSaveTxt" MaxLength="4999" TextMode="MultiLine"
Width="250px" Height="100px" runat="server" />
I've read that sometimes the enter key defaults to a button without any indication that it will do so, but none of my ajax panel's buttons events are firing. As far as I know, nothing happens at all. I suspect there might be some kind of problem with my textbox being in the panel.
Here is my AJAX:
<ajaxToolkit:ModalPopupExtender ID="btnSauvegarder_ModalPopupExtender"
runat="server" TargetControlID="DummySauvegarder"
PopupControlID="btnSauvegarder_ModalPopupExtender_PNL"
CancelControlID="ButtonCancel"
BackgroundCssClass="modalBackground"
Enabled="True" DynamicServicePath="" />
<asp:Panel ID="btnSauvegarder_ModalPopupExtender_PNL"
Style="display: none;"
CssClass="modalPNL"
runat="server"
meta:resourcekey="btnSauvegarder_ModalPopupExtender_PNLResource1">
<table border="0">
<tr>
<td>
<img src="..\Images\IconQuestion.png" alt="Question" />
<asp:TextBox ID="CommentaireSaveTxt" MaxLength="4999" Rows="50"
TextMode="MultiLine" Width="250px"
Height="100px" runat="server" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblMessageSauvegarder" runat="server"
meta:resourcekey="lblMessageSauvegarderResource1">
</asp:Label>
</td>
</tr>
</table>
<div style="text-align: right;">
<asp:Button ID="ButtonOkSauvegarder" runat="server" Text="OK"
OnClick="ButtonOkSauvegarder_Click"
meta:resourcekey="ButtonOkDeleteResource1" />
<asp:Button ID="ButtonCancelSauvegarder" runat="server" Text="Cancel"
meta:resourcekey="ButtonCancelResource2" />
</div>
</asp:Panel>
EDIT :
After testing...
For some reason, it doesn't work anywhere in my page. When looking at the generated html code from the browser, the textarea does not have any property for "AcceptsReturn" to true. I don't know if that can help anyone in finding the trouble.
My whole page is contained into UpdatePanel and ContentTemplate if that has any matters. I really am out of clue with what my problem is. I tested with a partner and he has no problem making it work in his projet (another website).
I have required field validation control for a radiobutton list. So if no values are selected then it gives me a error which is fine. But when i redo select something and click the button then it does't not fires the server event of the button. Once i have the validation erro then whatever i do it disable the server side event.
any ideas why is it happening my code
<div id="studysub_popul" runat="server" visible="false">
<asp:Label ID="lbl_rdb_study_popul" runat="server"
CssClass="questions"
Text="2.Select your study subjects">
</asp:Label>
<asp:RadioButtonList ID="rdb_study_popul" runat="server"
AutoPostBack="True"
OnSelectedIndexChanged="rdb_study_popul_SelectedIndexChanged">
<asp:ListItem>Individuals</asp:ListItem>
<asp:ListItem>Population</asp:ListItem>
</asp:RadioButtonList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server"
ControlToValidate="rdb_study_popul"
Display="Dynamic"
ErrorMessage="Study Subject is required"
ValidationGroup="StudySubject">
</asp:RequiredFieldValidator>
</div>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btn_s_section" runat="server"
OnClick="btn_studysubject_section_Click"
Text="Next" ValidationGroup="StudySubject"
Visible="false" />
</td>
You should add a validating group to the RadioButtonList definition too.
<asp:RadioButtonList ID="rdb_study_popul" runat="server"
AutoPostBack="True"
OnSelectedIndexChanged="rdb_study_popul_SelectedIndexChanged"
ValidationGroup="StudySubject">
I'm facing a buggy behavior from ASP.NET Ajax Controls Toolkit ModalPopupExtender, when I call Alert() JavaScript function from server-side the modal appears in the back ground. I don't know why this is happens.
here is the code:
vb:
Sub ShowAlert(ByVal message As String)
ScriptManager.RegisterStartupScript(Me.UpdatePanel, UpdatePanel.GetType(), "notificationScript", "<script language='JavaScript'> alert('" & message & "'); </script>", False)
End Sub
aspx:
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<ContentTemplate>
<asp:Panel ID="pnlPartialInstructions" CssClass="modal" runat="server">
......
<asp:Panel ID="pnlPrintConfirmation" CssClass="modal" runat="server">
<table class="ui-accordion">
<tr>
<td colspan="2">
<asp:Label Text="Do you want to print the receipt?" ID="lblPrintConfirmation" runat="server"
meta:resourcekey="lblPrintConfirmationResource1" Font-Bold="True" Font-Names="tahoma"
Font-Size="Large" />
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnConfirmPrint" Text="Yes" CssClass="google-button google-button-blue"
runat="server" meta:resourcekey="btnConfirmSaveResource1" Font-Size="Large" />
</td>
<td>
<asp:Button ID="btnCancelPrint" Text="No" CssClass="google-button google-button-red"
runat="server" meta:resourcekey="btnCancelSaveResource1" Font-Size="Large" />
</td>
</tr>
</table>
</asp:Panel>
<asp:Button ID="HiddenForModel1" Text="" runat="server" CssClass="hide" CausesValidation="False" />
<ajaxToolkit:ModalPopupExtender ID="pnlPrintConfirmation_ModalPopupExtender" runat="server" DynamicServicePath=""
Enabled="True" TargetControlID="HiddenForModel1" PopupControlID="pnlPrintConfirmation"
BackgroundCssClass="ModalBackground" DropShadow="True" CancelControlID="btnCancelPrint"
RepositionMode="RepositionOnWindowResizeAndScroll">
</ajaxToolkit:ModalPopupExtender>
.....
</asp:UpdatePanel>
</ContentTemplate>
The issue is caused by the way the ModalPopupExtender works. It is emitting a JavaScript which will hide the Panel.
Now you are registering your alert() call as startup script, this will hold running the ModalPopupExtender script as long as the user will not exit the alert windown. The simplest fix is setting display:none on the Panel so it will not need the script to hide it:
<asp:Panel ID="pnlPrintConfirmation" CssClass="modal" Style="display:none;" runat="server">
...
</asp:Panel>
I have added two update panels to my page. I'm trying to update the first panel but not the second. The second panel contains validation controls which seem to be kicking in no matter what I try.
Code
<asp:ToolkitScriptManager runat="server" ID="ScriptManager" />
<asp:UpdatePanel ID="updatePnl" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:label ID="NoConsignments" runat="server" ForeColor="red" />
<br />
<asp:TextBox ID="StartDate" runat="server" /> <asp:TextBox ID="EndDate" runat="server" /> <asp:Button ID="Dates" OnClick="btDates" runat="server" Text="Search" />
<asp:calendarextender ID="Calendarextender2" targetcontrolid="StartDate" Format="dd/MM/yyyy" runat="server"></asp:calendarextender>
<asp:calendarextender ID="Calendarextender3" targetcontrolid="EndDate" Format="dd/MM/yyyy" runat="server"></asp:calendarextender>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Dates" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel>
I've left out some of the middle code of there is alot. If you would like any more code please let me know.
Am I missing something? or is this not the way that update panels should be used?
Thanks you so much for any help you can provide
I would guess that the validation controls in the second UpdatePanel are firing their client-side validation methods (so the update panel isn't posting back, which is correct).
You might be able to get around this by using the ValidationGroup property - assign the validation controls in the first update panel to one validation group (e.g. "ValidationGroupA"), and the validation controls in the second update panel to another validation group.
I haven't used UpdatePanels for a while, and you haven't included the mark up for the validators in the second panel.
However it looks to me like you might not be adding groups to your validation see this tutorial
e.g.:
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" ValidationGroup="First"/>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ValidationGroup="First" ErrorMessage="TextBox1 should not be blank"
ControlToValidate="TextBox1"/>
<asp:Button ID="Submit1" runat="server" ValidationGroup="First"
Text="Submit 1"/>
<asp:TextBox ID="TextBox3" runat="server" ValidationGroup="Second"/>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ErrorMessage=" TextBox3 should not be blank"
ControlToValidate="TextBox3" ValidationGroup="Second"/>
<asp:Button ID="Submit2" runat="server" ValidationGroup="Second"
Text="Submit 2"/>
</div>
</form>
</body>
Hope this helps and I haven't missed the point.
You have to specify ValidationGroups for your Buttons and Validators, f.e. Panel1 for your Searchbutton and Panel2 for your Validators in second UpdatePanel.
<asp:Button ID="Dates" ValidationGroup="Panel1" runat="server" Text="Search" />
....
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ValidationGroup="Panel2" ErrorMessage="RequiredFieldValidator"
ControlToValidate="TextBox1" />
</ContentTemplate>
</asp:UpdatePanel>