I have a div2 which I will show only when RadioButtonList1 value is "Yes" in div1 through javascript function getvalue().Initially I am not showing div2 using c# code.
<fieldset id="disc" class="nt_generic">
<div runat="server" id="div1">
<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal"
OnClick="getvalue()">
<asp:ListItem Value="Yes" Text="Yes" />
<asp:ListItem Value="No" Text="No" Selected="True" />
</asp:RadioButtonList>
</div>
<div id="div2" runat="server">
<radC:RadComboBox ID="rcb1" EnableLoadOnDemand="true" runat="server" Skin="WebBlue">
<Items>
<radC:RadComboBoxItem ID="CondoComboBoxItem" runat="server" Text="A Ground" Value="B" Selected="true" />
<radC:RadComboBoxItem ID="HomeComboBoxItem" runat="server" Text="B Ground" Value="A" />
</Items>
</radC:RadComboBox>
</div>
</fieldset>
function getvalue()
{
var value = $('#<%=RadioButtonList1.ClientID %> input[type=radio]:checked').val();
if(value == "Yes")
{
if (document.getElementById("<% = div2.ClientID %>") != null)
document.getElementById("<%= div2.ClientID %>").style.display = "inline-block";
}
else
if (document.getElementById("<% = div2.ClientID %>") != null)
document.getElementById("<%= div2.ClientID %>").style.display = "none";
}
when I am using the above code as explained the div2 is displaying first and hiding afterwords which i don't want that.
If i add visible=false to div2 like below
<div id="divTankLocated" runat="server" visible="false">
There is no hide and display of div2, but javascript function getvalue() is not working, and can't display div2 on change of RadioButtonList1 value.
can some body help me in coming across the above 2 points?
At least part of your problem is due to javascript's automatic semicolon insertion.
ex this:
if(value == "Yes")
{
}
is turned into:
ex this:
if(value == "Yes");
{
}
which means that the then section of your if statement is executed every time. In order to prevent it, you have to put your opening {'s on the previous line. Doing that and adding { } pairs to all of your other if statements turns your javascript into this:
function getvalue() {
var value = $('#<%=RadioButtonList1.ClientID %> input[type=radio]:checked').val();
if(value == "Yes") {
if (document.getElementById("<% = div2.ClientID %>") != null) {
document.getElementById("<%= div2.ClientID %>").style.display = "inline-block";
}
} else if (document.getElementById("<% = div2.ClientID %>") != null) {
document.getElementById("<%= div2.ClientID %>").style.display = "none";
}
}
Related
I have a User Control with a Datagrid. I need to check some Textboxes within by calling my Javascript File doing the compare when the user will Save its modifications. (it will trigger my validator, if it is wrong a popup will show)
My ASPX:
<script type="text/javascript" src='/scripts/production_cost.js'></script>
<ContentTemplate>
<asp:DataGrid ID="ProdCostGrid" runat="server" AutoGenerateColumns="False" BorderColor="#f0f0f0" BorderStyle="None" BorderWidth="0px" CellPadding="0">
<HeaderStyle HorizontalAlign="Center"></HeaderStyle>
<Columns>
<asp:BoundColumn Visible="False" DataField="Id" HeaderText="Id"></asp:BoundColumn>
<asp:TemplateColumn>
<ItemTemplate>
Amount: <asp:TextBox ID="ProductionCostLineField" Text='<%# ToText(Eval("ProductionCostEuro")) %>'
TabIndex="24" runat="server" Width="80px" MaxLength="13"></asp:TextBox> EUR
</ItemTemplate>
<ItemStyle Width="170px" HorizontalAlign="Right"></ItemStyle>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
//here I am suppose to put my Validator
<asp:CustomValidator ID="AmountCustomValidator" runat="server" Display="None" ErrorMessage="Amount must be filled" ClientValidationFunction="ValidateAmount" />
</ContentTemplate>
My Javascript in a different folder :
function ValidateAmount(source, args) {
args.IsValid = true;
$('input[id*="ProductionCostLineField"]').blur(function () {
var amount = this.value;
$('input[id*="ProductionCostInvoiceToLineField"]').each(function () {
var textInvoicedBy = this.value;
if (amount == '' || amount == '0') {
} else {
if (this.value != '' || amount == '' || amount == '0') {
args.IsValid = true;
}
if ((amount != '' || amount != '0') && textInvoicedBy == '') {
alert("You must inform the field 'Invoiced By'");
args.IsValid = false;
}
}
});
});
}
All the code is working but only one problem is that div can not hide after button click event is fire.
how to hide "addresspopup" div after button "btnAddress" is click.
I have use update panel in div block.
Below is my code please help as soon as possible.
page.aspx
<head>
<script type="text/javascript">
function Validate() {
document.getElementById("btnPincode").click();
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$(document).keyup(function(e) {
if (e.keyCode == 27) { // esc keycode
$('#addresspopup').hide();
}
});
});
function DisplayOption(options)
{
if(options=='Address'){
$("#addresspopup").show();
return true;
}
if(options=='AddressClose'){
$("#addresspopup").hide();
return true;
}
}
</script>
</head>
<body>
<a id="addnewaddress" href="#" onclick="javascript:DisplayOption('Address');" class="button_black big_btn fullscreen-container">Add New Address</a>
<div id="addresspopup" style="display:none;" runat="server">
<div class="arcticmodal-overlay" style="opacity: 0.6; background-color: rgb(0, 0, 0);"></div>
<div class="arcticmodal-container">
<div class="arcticmodal-container_i">
<div>
<div class="arcticmodal-container_i2">
<div id="addresspopup_mw" class="modal_window">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<a onclick="javascript:DisplayOption('AddressClose');" class="close arcticmodal-close"></a>
<header class="on_the_sides">
<div class="left_side">
<h4>Enter a new shipping address</h4>
</div>
</header><!--/ .on_the_sides-->
<div class="type_2">
<div id="errorpincode1" runat="server" visible="false" class="alert_box error mar-bottom10">
<asp:Label ID="lblErrorpincode1" runat="server" Text="Error"></asp:Label>
</div>
<ul>
<li>
<asp:TextBox ID="txtAddressName" runat="server" placeholder="Your name *"></asp:TextBox>
</li>
<li>
<asp:TextBox ID="txtAddress" runat="server" placeholder="Address *" Rows="4" TextMode="MultiLine"></asp:TextBox>
</li>
<li>
<asp:TextBox ID="txtLandmark" runat="server" placeholder="Landmark"></asp:TextBox>
</li>
<li>
<asp:TextBox ID="txtPincode" runat="server" MaxLength="6" OnBlur="javascript:Validate()" placeholder="Pincode *"></asp:TextBox>
<asp:Button ID="btnPincode" runat="server" Text="Button" onclick="btnPincode_Click" style="display:none" ></asp:Button>
</li>
<li>
<asp:TextBox ID="txtCity" runat="server" placeholder="City *"></asp:TextBox>
</li>
<li>
<asp:DropDownList ID="ddlState" runat="server" class="mar-bottom5">
</asp:DropDownList>
</li>
<li>
<asp:TextBox ID="txtPhone" runat="server" placeholder="Phone *"></asp:TextBox>
</li>
<li class="v_centered pad-top-10">
<asp:Button ID="btnAddress" runat="server" class="button_black big_btn fullscreen-container" Text="Save & Continue" OnClick="btnAddress_Click"></asp:Button>
</li>
</ul>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnAddress" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
page.cs file
protected void btnAddress_Click(object sender, EventArgs e)
{
if (txtAddressName.Text == "")
{
lblErrorpincode1.Text = "Please enter your Full Name";
errorpincode1.Visible = true;
SetFocus(txtAddressName);
return;
}
else
{
errorpincode1.Visible = false;
}
if (txtAddress.Text == "")
{
lblErrorpincode1.Text = "Please enter your Full Address";
errorpincode1.Visible = true;
SetFocus(txtAddress);
return;
}
else
{
errorpincode1.Visible = false;
}
if (txtPincode.Text == "")
{
lblErrorpincode1.Text = "Please enter your Pincode";
errorpincode1.Visible = true;
SetFocus(txtPincode);
return;
}
else
{
errorpincode1.Visible = false;
}
if (txtCity.Text == "")
{
lblErrorpincode1.Text = "Please enter your City";
errorpincode1.Visible = true;
SetFocus(txtCity);
return;
}
else
{
errorpincode1.Visible = false;
}
if (ddlState.SelectedIndex == 0)
{
lblErrorpincode1.Text = "Please select your State";
errorpincode1.Visible = true;
SetFocus(ddlState);
return;
}
else
{
errorpincode1.Visible = false;
}
if (txtPhone.Text == "")
{
lblErrorpincode1.Text = "Please enter your Phone Number";
errorpincode1.Visible = true;
SetFocus(txtPhone);
return;
}
else
{
errorpincode1.Visible = false;
}
string pin = " AND Pincode = " + txtPincode.Text + " ";
DataTable dt = bll.getCustomDeliverySearch(pin);
if (dt.Rows[0][5].ToString() == "False")
{
lblErrorpincode1.Text = "As of now we DO NOT Deliver at this Address. Please add Another Address.!";
errorpincode1.Visible = true;
return;
}
else
{
errorpincode1.Visible = false;
}
DateTime created;
DateTime modified;
created = DateTime.ParseExact(DateTime.Now.ToString("MM/dd/yyyy hh:mm:ss tt"), "MM/dd/yyyy hh:mm:ss tt", System.Globalization.CultureInfo.InvariantCulture);
modified = DateTime.ParseExact(DateTime.Now.ToString("MM/dd/yyyy hh:mm:ss tt"), "MM/dd/yyyy hh:mm:ss tt", System.Globalization.CultureInfo.InvariantCulture);
// QUERY for insert data here
Session["Name"] = FixString(txtAddressName.Text);
Session["Address"] = FixString(txtAddress.Text) + ", " + FixString(txtLandmark.Text);
Session["City"] = txtCity.Text;
Session["Pincode"] = txtPincode.Text;
Session["State"] = ddlState.SelectedValue;
Session["Mobile"] = txtPhone.Text;
BindData();
addresspopup.Attributes.Add("Style", "display:none;");
}
You can make a async call using ScriptManager during postback to hide your div section.
CodeBehind:
ScriptManager.RegisterStartupScript(this.Page, typeof(Page), "hideaddress", "javascript: $(function(){ hideAddress(); });", true);
Aspx
<body>
<div> ... </div>
<script type="text/javascript">
function hideAddress() {
$('#addresspopup').hide();
}
</script>
</body>
Add a script block above end of body tag. Also you need to comment out following line and use above mentioned code.
addresspopup.Attributes.Add("Style", "display:none;");
I have written in aspx file as
<asp:Button ID="btn" runat="server" Text="Add As a Sub Organization" OnClick="lnkChild_Click" ValidationGroup="GroupA" class="btn-u" CausesValidation="true" />
<asp:GridView ID="grdDuplicateOrganisationList" AutoGenerateColumns="false" runat="server" CssClass="table"
DataKeyNames="OrganisationId" GridLines="None">
<Columns>
<asp:TemplateField HeaderText="Organization">
<ItemTemplate>
<div style="text-align: left">
<asp:RadioButton runat="server" ID="rdoOrganisation" GroupName="Child" onclick="javascript:CheckOtherIsCheckedByGVID(this);"></asp:RadioButton>
<%# DataBinder.Eval (Container.DataItem, "Name") %>
</div>
</ItemTemplate>
</asp:TemplateField>
</columns>
</asp:GridView>
<script type="text/javascript">
// function alert() { return confirm("Your Message was sent successfully!") } $(function () { $("[data-toggle='popover']").popover() })
$(function () {
if (!($('#<%= grdDuplicateOrganisationList.ClientID %> tr td').find('input:radio').is(':checked'))) {
$('#<%= btn.ClientID%>').attr('disabled', true).attr('title', 'Select organization then click...');
}
});
$('#<%= grdDuplicateOrganisationList.ClientID %> tr td').find('input:radio').on('change', function () {
if ($(this).is(':checked')) {
$('#<%= btn.ClientID%>').attr('disabled', false).attr('title', '');
} else {
$('#<%= btn.ClientID%>').attr('disabled', true).attr('title', 'Select organization then click...');
}
});
</script>
Now I want that If user will click on radio button then btn should be enabled.
The above JavaScript does not work.
I haven't any idea about asp but the question is about Jquery so May be I could help you
<input type="radio" name="toggle" value="1">Toggle
<script type="text/javascript">
$("input[name=toggle]").on('click', function() {
var checked = $("input[name=toggle]").prop('checked');
console.log(checked);
if(checked) { $("#yourbtnId").show(); }
else { $("#yourbtnId").hide(); }
</script>
https://jsfiddle.net/o5myvgp9/1/
Edit
You can also set it on dom ready
$(function() {
var checked = $("input[name=toggle]").prop('checked');
console.log(checked);
if(checked) { $("#yourbtnId").show(); }
else { $("#yourbtnId").hide(); }
});
I have to invoke ImageButton (in repeater footer) click event from jQuery on response to ajax modalpopupextender button. I tried the below code but it's not working. It doesn't throw any error but PostBack is not happening.
var isCurrentPortalFormSaveClicked = false;
var controlsValuesOnload = '';
var controlsValuesWhileExit = '';
window.onbeforeunload = beforeUnload;
window.onload = getValues;
function getValues() {
controlsValuesOnload = $('form').serialize();
}
function beforeUnload() {
if (isCurrentPortalFormSaveClicked == true) return;
controlsValuesWhileExit = $('form').serialize();
if (controlsValuesOnload != controlsValuesWhileExit) {
return "Your changes have not been saved. To stay on the page so that you can save your changes, click Cancel.";
}
}
function confirmExit(callBackMethod, saveButtonId) {
controlsValuesWhileExit = $('form').serialize();
if (controlsValuesOnload != controlsValuesWhileExit) {
return ShowUnSavedChangesWarning(callBackMethod,saveButtonId);
}
else {
window.open('', '_self', '');
window.close();
return false;
}
}
function ShowUnSavedChangesWarning(callBackMethod, saveButtonId) {
saveButtonControl = saveButtonId;
callBack = callBackMethod;
$find('<%= modalPopUpConfirmExitWarning.ClientID %>').show();
return true;
}
function saveFormAndClose() {
HideUnSavedChangesWarning();
if (callBack != '' && callBack != null && callBack != undefined) {
return callBack();
}
else if (saveButtonControl != '' && saveButtonControl != undefined) {//if the control is other than ribbon save and close button.
saveButtonControl.click();
window.open('', '_self', '');
window.close();
}
else if ($('.saveandclose') != null && $('.saveandclose') != '' && $('.saveandclose') != undefined) {
$('.saveandclose')[0].click();
}
return false;
}
function closeForm() {
isCurrentPortalFormSaveClicked = true;
window.open('', '_self', '');
window.close();
return false;
}
function SaveNewNotes() {
//Save Notes
var notes = $('.newNote').first().val();
if (notes != null && notes != "") {
$('.saveNotes')[0].click();
}
return true;
}
ASPX:
<ajax:ModalPopupExtender ID="modalPopUpConfirmExitWarning" CancelControlID="btnCancel"
runat="server" PopupControlID="panelConfirmExitWarning" TargetControlID="btnHiddenConfirmExitWarning"
BackgroundCssClass="modalBackground">
</ajax:ModalPopupExtender>
<asp:Button runat="server" ID="btnHiddenConfirmExitWarning" Style="display: none" />
<asp:Panel ID="panelConfirmExitWarning" runat="server" Style="display: none" CssClass="ModalWindow">
<div class="window_header">
<span id="spanSubscirptionWindowHeader" runat="server" />
</div>
<div class="window_body">
<img src="../Images/Icon_Warning_New.png" />
<span id="spanConfirmExitExpiryWarning" runat="server" />
</div>
<div class="window_footer" align="right">
<asp:Button ID="btnSave" runat="server" Text="<%$ Resources:DealerWebPortal, DWP_SPAN_Ribbon_Save %>"
OnClientClick="return saveFormAndClose();" CssClass="popUp_button" />
<asp:Button ID="btnDontSave" runat="server" Text="<%$ Resources:DealerWebPortal, DWP_BTN_Page_Home_DontSave %>"
OnClientClick="return closeForm();" CssClass="popUp_button" />
<asp:Button ID="btnCancel" runat="server" Text="<%$ Resources:DealerWebPortal, DWP_BTN_Page_DealerEmailSubscription_Cancel %>"
CssClass="popUp_button" />
</div>
</asp:Panel>
Button (to trigger modalpopupextender):
<a id="lnkClose" class="close" runat="server" onclick="isCurrentPortalFormSaveClicked=true;return confirmExit(SaveNewNotes,null);"> </a>
Repeater:
<asp:Repeater runat="server" ID="rptrCaseNotes" OnItemCommand="rptrCaseNotes_ItemCommand">
<FooterTemplate>
<table>
<tr style="width: 650px">
<td style="vertical-align: middle; width: 50px">
<asp:ImageButton ID="AddNote" Width="16px" Height="16px" ImageUrl="~/Images/112_Plus_Blue_32x32_72.jpg"
runat="server" CommandName="Add" OnClick="OnAddNotes" OnClientClick="isCurrentPortalFormSaveClicked=true" CssClass="saveNotes" />
</td>
<td style="width: 600px">
<asp:TextBox runat="server" ID="NewNotes" Rows="6" Width="600px" Height="80px" TextMode="MultiLine"
MaxLength="2000" CssClass="newNote" />
</td>
</tr>
</table>
</FooterTemplate>
I have combobox in grid itemtemplate how can i set the value in javascript
<telerik:GridTemplateColumn AutoPostBackOnFilter="true"
CurrentFilterFunction="Contains" DataField="FAULT" FilterControlWidth="100%"
HeaderStyle-Width="80px" HeaderText="Fault" ReadOnly="true" ShowFilterIcon="false"
SortExpression="FAULT" UniqueName="FAULT">
<ItemTemplate>
<telerik:RadComboBox ID="cmbFault" runat="server" AllowCustomText="false" HighlightTemplatedItems="true"
Skin="Outlook" Visible="true" Width="70px">
<Items>
<telerik:RadComboBoxItem runat="server" Text="NF" Value="N" />
<telerik:RadComboBoxItem runat="server" Text="VF" Value="V" />
<telerik:RadComboBoxItem runat="server" Text="CF" Value="C" />
<telerik:RadComboBoxItem runat="server" Text="DF" Value="D" />
</Items>
</telerik:RadComboBox>
</ItemTemplate>
<HeaderStyle Width="80px" />
</telerik:GridTemplateColumn>
My java script
function vishali(){
if (difference > 5) {alert("enter into if");
document.getElementById('<%=cmbFault.ClientID %>').value = 'C';
}
else {
alert("enter into else");
document.getElementById('<%=cmbFault.ClientID %>').value = 'S';
}
}
but it is not working it is saying that cmbFault is not found in the context error please help me on this
You can do below javascript code in order to set from javascript.
function setCombo() {
var combo = $find("<%= cmbFault.ClientID %>");
combo.set_text("S");
}
And also you can have a look http://www.telerik.com/help/aspnet-ajax/combobox-client-side-radcombobox.html
To get the control inside GridTemplateColumn do the following.
JS:
function setCombo() {
var grid = $find("<%=RadGrid1.ClientID%>");
var tableView = grid.get_masterTableView();
var items = tableView.get_dataItems();
for(var i = 0; i<items.length; i++){
var rowValues = items[i];
var Textvalue=rowValues.findElement("cmbFault");//access Combobox
}
}