I have an ASP.Net DropDownList inside a div that has data-toggle="button", and when I try to select an option in the dropdownlist, it disappears instantly before I can make a selection. I have to hold the mouse button down to make a selection.
I believe it is somthing to do with the data-toggle on the parent div because when I remove that, the dropdownlist works normal.
Here is the straightforward markup.
<asp:Repeater ID="ShippingTermsRepeater" runat="server" Visible="false">
<HeaderTemplate>
<div class="form-group onewCustomer clearfix">
<label>Shipping Terms</label>
<div class="btn-group radioDouble shipTermsRadio" data-toggle="buttons">
</HeaderTemplate>
<ItemTemplate>
<div class="btn btn-primary">
<input id="ShippingTermsSelector" runat="server" type="radio" name="ShippingTermsGroup"/>
<label for="ShippingTermsSelector">
<span class="onewCurrency fontBlack"><asp:Literal ID="CurrencyLabel" runat="server" /></span>
<span class="onewWHName fontBlack"><asp:Literal ID="WarehouseInternalNameLabel" runat="server" /></span>
<span class="onewAccount"><asp:Literal ID="CustomerAccountCodeLabel" runat="server" /></span>
<span class="onewTerms fontBlack"><asp:Literal ID="ShippingTermsLabel" runat="server" /></span>
</label>
<asp:DropDownList ID="ShippingTermsSelectList" runat="server" CssClass="form-control shippingTerms" AppendDataBoundItems="true">
</asp:DropDownList>
</div>
</ItemTemplate>
<FooterTemplate>
</div>
</div>
</FooterTemplate>
</asp:Repeater>
Has anyone encountered this issue before?
Adding stopPropagation(); to the click event has fixed it.
$('select.shippingTerms').click(function (e) {
e.stopPropagation();
})
Related
I have multiple tabs on my page and currently I am binding all dropdownlists on every tab at page load.
I want to bind the dropdownlists only when the tab is selected. I also want to clear the gridviews when the tab is changed.
This is my HTML code
<li>
<input type="radio" id="tab1d" name="tabs1" runat="server"/>
<label for="tab1d">Search</label>
<div id="tab-content1d" class="tab-content animated fadeIn" style="background-color:white; padding:10px; ">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label4" runat="server" Text="Select Platform"></asp:Label>
<asp:DropDownList ID="DropDownList3" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList3_SelectedIndexChanged" CssClass="inputs" Width="150px"></asp:DropDownList>
<asp:Label ID="Label10" runat="server" Text="Select Family Name"></asp:Label>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" CssClass="inputs" Width="150px" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"></asp:DropDownList>
<asp:Label ID="Label11" runat="server" Text="Select price Level"></asp:Label>
<asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="true" CssClass="inputs" Width="150px" ></asp:DropDownList>
<asp:Button ID="Button7" runat="server" Text="Search" CssClass="buttons" OnClick="Button7_Click"/><br /><br />
<div id="gdvLeft">
<asp:GridView ID="gdvFamilyname" runat="server" EnableViewState="True" class="grid" RowStyle-CssClass="rows"></asp:GridView>
</div>
<div id="gdvRight">
<asp:GridView ID="gdvQuantity" runat="server" EnableViewState="True" class="grid" RowStyle-CssClass="rows"></asp:GridView>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</li>
Hi Himani, Try like this -
<input type="radio" value="Click Me" onclick="rdioClick();" />
In Javascript -
function rdioClick() {
var GridView1 = document.getElementById('GridView1');
GridView1.innerHTML = "";
}
Thanks :)
I've got a log-in page with a drop down list, which you can pick a background color for the website. But I'm having trouble linking the masterpage's body with the selected value on the drop down list.
<body style="overflow: auto;" runat="server" id="bodyMasterPage">
Here's the opening tag of my MasterPage body, and here's the dropdownlist I've got.
<div class="col-sm-3 col-sm-offset-4">
<div class="input-group input-group-sm">
<asp:Label runat="server" ID="lblColor" ClientIDMode="Static" AssociatedControlID="ddlColor" class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></asp:Label>
<asp:DropDownList runat="server" ID="ddlColor" ClientIDMode="Static" aria-describedby="lbColor" data-taggle="dropdown" data-style="DropDownListHint-datastyle" class="btn dropdown-toggle DropDownListHint-datastyle">
<asp:ListItem Text="Бял" Value="White" Selected="True" />
<asp:ListItem Text="Зелен" Value="Green" />
</asp:DropDownList>
</div>
</div>
use Master.FindControl Method
var body = Master.FindControl("bodyMasterPage");
I am having lot of space between newly added radiobuttons(yes and No) of the RadioButtonList and the first part of the existing region(divName) is aligned properly.
can any body help me in aligning the newly added second region(div1)
<div id="divpanelFacts" runat="server">
<fieldset id="panelFacts">
<table width="100%">
<tr>
<td>
<div id="divName" runat="server" visible="false">
<span>
<label runat="server" id="Label1">
<span id="pNameSpan" runat="server">*</span>P Name</label>
<asp:TextBox ID="textPName" runat="server" MaxLength="20"></asp:TextBox>
</span>
</div>
</td>
<td>
<div id="div1" runat="server" visible="false">
<asp:Label ID="lbl1" runat="server" Text="Would like to use this option for document purpose"></asp:Label>
<asp:RadioButtonList ID="rbl1" runat="server" TextAlign="Left" RepeatDirection="Horizontal">
<asp:ListItem Value="Yes" Text="Yes" />
<asp:ListItem Value="No" Text="No" Selected="True" />
</asp:RadioButtonList>
</div>
</td>
</tr>
</table>
</fieldset>
</div>
Your table width is at 100%, which means it's going to stretch it, and table I think takes precedence.
I am trying to get a combobox to update with the correct value when a button has been clicked.
So when the user chooses a year in the combobox then enters a day in the 'HolidayYearAllocation' input box and clicks the button, the combobox called 'AssignUserHoliday' needs to update with the year selected.
Here is the code where i select the year, and then enter an amount and click the button
<asp:UpdatePanel ID="UpdateBulkHoliday" runat="server" class="BulkHolidayAllocation">
<ContentTemplate>
<div class="BulkHolidayAllocationHeader">
<asp:Label ID="lbl_bulkholidayallocationheader" runat="server" Text="Bulk Holiday Allocation" />
</div>
<div class="SelectYearHolidayAllocation">
<asp:Label ID="lbl_selectyearholidayallocation" runat="server" Text="Select Year" CssClass="applicationfont" />
<asp:DropDownList ID="ddl_selectyearholidayallocation" runat="server" CssClass="smallinputbox" />
</div>
<div class="EnterYearHolidayAllocation">
<asp:Label ID="lbl_enteryearholidayallocation" runat="server" Text="Enter Amount of Days" CssClass="applicationfont" />
<input id="txt_enteryearholidayallocation" runat="server" class="smallinputbox" />
</div>
<div class="SubmitYearHolidayAllocation">
<input id="btn_submityearholidayallocation" runat="server" type="button" class="Button" value="Add" onserverclick="btn_submityearholidayallocation_ServerClick" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
Here is the update panel wrapped around the code i want to update after button click.
<asp:UpdatePanel id="Update" runat="Server">
<ContentTemplate>
<div class="UserSettingsSection2">
<div class="AssignUserHoliday">
<asp:Label ID="lbl_assignuserholiday" runat="server" Text="Assign User Holiday" CssClass="applicationfont" />
<asp:DropDownList ID="ddl_assignuserholiday" runat="server" CssClass="smallinputbox" Enabled="false" AutoPostBack="true" OnDataBound="ddl_assignuserholiday_DataBound" OnSelectedIndexChanged="ddl_assignuserholiday_SelectedIndexChanged" />
</div>
<div class="SetNewUserHoliday">
<asp:Label ID="lbl_setnewuserholiday" runat="server" Text="New Holiday Amount" CssClass="applicationfont" />
<input id="txt_setnewuserholiday" runat="server" class="smallinputbox" />
</div>
<div class="SubmitNewUserHoliday">
<input id="btn_submitnewuserholiday" runat="server" class="Button" type="button" value="Change" visible="false" onserverclick="btn_submitnewuserholiday_ServerClick" />
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
You will have to add following attribute to both update panel UpdateMode="Conditional" and call Update.Update() in the btn_submityearholidayallocation_ServerClick method once you have assigned the values to the controls in the second panel.
I have two labels and two text boxes and I want put those control on a line without position absolute
<div id="divlbluser" >
<asp:Label CssClass="lbl" ID="lblUser" runat="server" Text="نام کاربری:"></asp:Label>
</div>
<div id="divtxtuser" >
<asp:TextBox CssClass="txt" ID="txtUser" runat="server"></asp:TextBox>
</div>
<div id="divlblpass" >
<asp:Label CssClass="lbl" ID="lblPass" runat="server" Text="رمز عبور:"></asp:Label>
</div>
<div id="divtxtpass">
<asp:TextBox runat="server" CssClass="txt" ID="txtPass"></asp:TextBox>
</div>
Don't put them in separate divs.
<div>
<asp:TextBox CssClass="txt" ID="txtUser" runat="server"></asp:TextBox>
<asp:Label CssClass="lbl" ID="lblPass" runat="server" Text="رمز عبور:"></asp:Label>
<asp:TextBox runat="server" CssClass="txt" ID="txtPass"></asp:TextBox>
</div>
See example jsFiddle
Use CSS
<style>
#divtxtuser, #divlblpass, #divtxtpass { float: left; }
</style>