jquery button align right beside asp dropdown - asp.net

I am trying to show my jquery button on the same line as my dropdown, currently it is beneath, I tried setting the inline width on Div but nothing happened , any advice ?
<asp:Label runat="server" id="lblError"></asp:Label>
<div id="divChangeLabApproval" runat="server">
<br />
<asp:Label ID="lblNewLabStatus" runat="server" Text="New Lab Status: " />
<asp:DropDownList ID="ddlSetLabStatus" runat="server">
</asp:DropDownList>
<asp:Button ID="btnSaveLabChange" runat="server" Text="Save" OnClientClick="if (!OnSaveLabChangeClick()) return false;" OnClick="OnSaveLabChange" UseSubmitBehavior="false" />
<br />
</div>

Related

ModalPopupExtender only pops up the UpdatePanel once

The ModalPopupExtender wires the btnCancel button to trigger the a popup an UpdatePanel. The UpdatePanel is a cancel confirmation which contains a Yes button and a No button. After clicking the No button, the panel is closed but the btnCancel no longer trigger the popup when being clicked again. The Yes button works and triggers the server side YesButton_Click event. Here is my code. Thanks for your help.
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />
<asp:Button ID="btnCancel" Text="Cancel Task" runat="server" ToolTip="Cancel the displayed task and remove it from Tracker" CausesValidation="false" />
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnCancel"
PopupControlID="ConfirmationPanel" BackgroundCssClass="modalBackground" />
<asp:UpdatePanel ID="upd_yes_no" runat="server">
<ContentTemplate>
<asp:Panel ID="ConfirmationPanel" runat="server" CssClass="modalPopup" Style="display: none">
<div class="modalPopup-text">
Are you sure you want to cancel this task?<br />
<br />
<asp:Button ID="YesButton" runat="server" Text="Yes" CommandArgument="Yes" OnClick="YesButton_Click" />
<asp:Button ID="NoButton" runat="server" Text="No" CommandArgument="No" />
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
I'm not 100% positive but it appears that Extender and Extended controls must reside in the same UpdatePanel. So if you move your Cancel button and ModalPopupExtender control inside the UpdatePanel, it should work as expected.
<ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />
<asp:UpdatePanel ID="upd_yes_no" runat="server">
<ContentTemplate>
<span id="buttons">
<asp:Button ID="btnUndo" Text="Undo Edit" CommandArgument="undo" runat="server"
OnClick="undo" CausesValidation="false" />
<asp:Button ID="btnNewTask" Text="New Task" CommandArgument="newTask" runat="server"
ToolTip="Unchange current and create new task"
OnClick="NewTask" CausesValidation="false" />
<asp:Button ID="btnCancel" Text="Cancel Task" runat="server"
ToolTip="Cancel the displayed task and remove it from Tracker" CausesValidation="false" />
</span>
<ajax:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnCancel" PopupControlID="ConfirmationPanel" BackgroundCssClass="modalBackground" />
<asp:Panel ID="ConfirmationPanel" runat="server" CssClass="modalPopup" Style="display: none">
<div class="modalPopup-text">
Are you sure you want to cancel this task?
<br />
<br />
<asp:Button ID="YesButton" runat="server" Text="Yes" CommandArgument="Yes" OnClick="YesButton_Click" />
<asp:Button ID="NoButton" runat="server" Text="No" CommandArgument="No" />
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>

use html5 validator in asp.net webform when have two Button runat server

<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtb3" runat="server" required></asp:TextBox>
<asp:TextBox ID="txtb2" runat="server" required></asp:TextBox>
<asp:TextBox ID="txtb1" runat="server" required></asp:TextBox>
<asp:Button ID="btnBack" runat="server" Text="btn 2" OnClick="btnBack_Click" />
<asp:Button ID="btnSubmit" runat="server" Text="btn 1" OnClick="btnSubmit_Click" />
</div>
</form>
This is my code page. I have two button and need validation in submit button but don't need validate in back button. What to do that!!!
You can write javascript to prevent that for back button. Following is the snippet you need.
<script type="text/javascript">
function setNoValidate() {
for (var f = document.forms, i = f.length; i--;) f[i].setAttribute("novalidate", i);
document.forms[0].submit(); // replace 0 with with actual form name, like document.formSub
}
</script>
<asp:Button ID="btnBack" runat="server" Text="btn 2" OnClientClick="setNoValidate();" />
Update
You can use HTML5 attribute formnovalidate to escape HTML5 validation i.e. directly use <asp:Button ID="btnBack" runat="server" Text="btn 2" formnovalidate /> instead of above script. Explained here
Note: CausesValidation is to handle validation for asp.net validators not HTML5 validation.
Use formnovalidate tag to avoid validation ---
formnovalidate="formnovalidate"
<asp:Button ID="btnBack" runat="server" Text="btn 2" OnClick="btnBack_Click" formnovalidate="formnovalidate" />
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtb3" runat="server" required></asp:TextBox>
<asp:TextBox ID="txtb2" runat="server" required></asp:TextBox>
<asp:TextBox ID="txtb1" runat="server" required></asp:TextBox>
<asp:Button ID="btnBack" runat="server" Text="btn 2" OnClick="btnBack_Click" formnovalidate="formnovalidate" />
<asp:Button ID="btnSubmit" runat="server" Text="btn 1" OnClick="btnSubmit_Click" />
</div>
</form>
This is the right way to do :=)
<asp:Button ID="btnBack" runat="server" Text="btn 2"
OnClick="btnBack_Click" CausesValidation="False"/>
Just add formnovalidate="formnovalidate" on the button on which you dont want html5 validation to be fired.

Aligning .aspx buttons

I have an update panel that contains a label, a dropDownList and two buttons:
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="dropDownList" style="position:relative;" runat="server">
<label>
Select New File: </label>
<div id="ddl" runat="server">
<asp:DropDownList runat="server" ID="ddlCaseFiles" DataSourceID="dsMyCaseFiles" DataTextField="Display"
DataValueField="FileID" OnPreRender="ddl_PreRender" Width="524px" OnSelectedIndexChanged="ddlCaseFiles_SelectedIndexChanged" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="ddlCaseFiles"
ToolTip="Casefile Required" InitialValue="-1" Text="*" Display="Dynamic" />
<ajaxToolkit:ListSearchExtender ID="ddlExtCaseFiles" runat="server" PromptCssClass="ListSearchExtenderPrompt"
TargetControlID="ddlCaseFiles" BehaviorID="ddlExtCaseFiles" Enabled="True" />
</div>
<br />
<asp:Button ID="btnMoveCaseFile" runat="server" Text=""
style="float:left;" onclick="btnMoveCaseFile_Click"/>
<asp:Button ID="btnCancel" runat="server" Text="Cancel"
style="float:right" onclick="btnCancel_Click"/>
<br />
</div>
<asp:Label runat="server" ID="lblStatus"></asp:Label>
</ContentTemplate>
I am trying to get my buttons to line up like this:(button at the beginning of the DropDownList and a button at the End)
I've tried float-absolute etc.
I figured it out. Seems as though you have to add in px after the number.....
<asp:Button ID="btnMoveCaseFile" runat="server" Text=""
style="position:absolute; float:left; margin-left:104px;" onclick="btnMoveCaseFile_Click"/>
<asp:Button ID="btnCancel" runat="server" Text="Cancel"
style="position:relative; float:right; margin-right:63px;"
since I had margin-right:63; instead of margin-right:63px;

ASP.NET Panel Not Ending

I have created an ASP.NET page with an AJAX Accordion control. Within on the panes are several controls, some of which I've placed inside a Panel control, for various reasons.
However, controls which are on the page AFTER the closing tag for the panel are appearing INSIDE the panel when the page is rendered. For the life me I can't figure out why, and it's driving me crazy! Even clicking on the header of the Accordion Pane after the one containing the panel doesn't cause the Pane to expand, which it did before I added the Panel, seemingly because even IT is behaving as if it's within the Panel!
Any ideas what I'm doing wrong? How can I make the page believe that the panel ends!!?
<asp:Accordion ID="accQuestionnaire" runat="server" RequireOpenedPane="false" ContentCssClass="AccordionContent" HeaderCssClass="AccordionHeader" FadeTransitions="true"
transitionduration="250" HeaderSelectedCssClass="AccordionSelected" SelectedIndex="0" SuppressHeaderPostbacks="true" >
<Panes>
<%--START OF Tristan Link Pane (0)-------------------------------------------------------------%>
<asp:AccordionPane ID="pnTristanLink" runat="server" ContentCssClass="AccordionContent" ViewStateMode="Enabled" >
<Header>
Tristan Link
</Header>
<Content>
<div class="centrebuttonsdiv" >
<asp:Button ID="btnSearchTristan" runat="server" CssClass="largebutton" Text="Search Tristan" /><br />
</div>
<asp:Panel ID="pnlTristanSearch" runat="server" CssClass="panel" >
<div class="leftdiv"> <%--Matching Tristan results--%>
<asp:FormView ID="fvTristanSearch" runat="server" CssClass="FormView" >
<ItemTemplate>
<asp:Label ID="lblTristanSearchLabel" runat="server" CssClass="fieldtitle" Text="The information from Tristan for this Case Number is:" /><br /><br />
<asp:Label ID="lblAnimalNameLabel" runat="server" CssClass="fieldtitle" Text="Horse Name: " />
<asp:Label ID="lblAnimalName" runat="server" Text='<%# Eval("PetName") & " " & Eval("ClientNameLast") %>' /><br />
<asp:Label ID="lblGenderLabel" runat="server" CssClass="fieldtitle" Text="Sex: " />
<asp:Label ID="lblGender" runat="server" Text='<%# Eval("L_GenderDesc") %>' /><br />
<asp:Label ID="lblBreedLabel" runat="server" CssClass="fieldtitle" Text="Breed: " />
<asp:Label ID="lblBreed" runat="server" Text='<%# Eval("L_BreedDesc") %>' /><br />
<asp:Label ID="lblDOBLabel" runat="server" CssClass="fieldtitle" Text="DOB: " />
<asp:Label ID="lblDOB" runat="server" Text='<%# Eval("PetDOB", "{0:d}") %>' /><br /><br />
</ItemTemplate>
</asp:FormView>
</div>
<div class="rightdiv">
<br /><br />
<asp:Label ID="lblUnmatchedAppointments" runat="server" Text="Appointments for this horse with no Colic Study details:" Visible="false" /><br />
<asp:ListBox ID="lstUnmatchedAppointments" runat="server" DataSourceID="SQLUnmatchedAppointments" DataTextField="AppointmentDate" DataTextFormatString="{0:d}" DataValueField="AppointmentID"
Visible = "False" />
</div>
<div class="cleardiv" />
</asp:Panel>
<div class="centrebuttonsdiv" >
<asp:Label ID="lblTristanSearchInstructions" runat="server" Text="Select an appointment from the list above and click 'Save Section' to continue. Otherwise, click 'Clear Retrieved Information'
to search again" Visible="false" /><br />
<asp:Button ID="btnClearTristanSearch" runat="server" Text="Clear Retrieved Information" Visible="false" CssClass="largebutton" />
<asp:Button ID="btnSaveTristanLink" runat="server" Text="Save Section" OnClientClick="disablePanes()" Visible="false" Enabled="false" CssClass="largebutton" />
</div>
</Content>
</asp:AccordionPane>
I believe that changing this line:
<div class="cleardiv" />
to this
<div class="cleardiv"></div>
will solve that rendering problem; <div> is not typically a self-closing tag.

can't drag the modal popup

I created Ajax modal pop up. This is not support drag.
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:ModalPopupExtender ID="ModalPopupExtender" runat="server"
TargetControlID="Button1"
PopupControlID="Panel1"
BackgroundCssClass="modalBackground"
CancelControlID="btnCancel"
RepositionMode="None"
PopupDragHandleControlID="PopUpHeader" />
<asp:Button ID="Button1" runat="server" Text="First Modal Popup" />
<asp:Panel ID="Panel1" runat="server" Height="180px" Width="400px" CssClass="ModalWindow">
<div id="PopUpHeader" style="background-color:Yellow;">
Error Message
</div>
<div>
My name is error of proble. For comming is satun.
<br /><br /><br /><br />
</div>
<div>
<input type="button" id="btnCancel" runat="server" value="Close" style="float:right;margin-right:20px;" />
</div>
</asp:Panel>
How I get the drag and drop.
Firstly http://www.asp.net/ajax/ajaxcontroltoolkit/samples/modalpopup/modalpopup.aspx
And you must edit PopupDragHandleControlID="PopUpHeader" with PopupDragHandleControlID="Panel1"
PopupDragHandleControlID
is controling whict panel are you using with Modal Popup.

Resources