Displaying '.hidden' elements using JQUERY - javascript

I have this asp and HTML code:
<asp:Repeater ID="PervousResultsList" runat="server" EnableViewState="False">
<ItemTemplate>
<div class="row1">
<table style="cursor: pointer; width: 100%">
<tr>
<td rowspan="4">
<asp:Image ID="Image1" ImageUrl="~/Images/pushpinred.png" runat="server" Width="32"
Height="32" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td rowspan="7">
<input type="button" class="toggleRow" value="B" style="height: 30px; position: relative; float: left;" />
</td>
</tr>
<tr>
<td>text:</td>
<td rowspan="4">
<h1 style="color: gray"><%# Eval("Text") %></h1>
</td>
</tr>
<tr class="hidden">
<td>text:</td>
<td><%# Eval("Text") %></td>
</tr>
<tr class="hidden">
<td>X:</td>
<td><%# Eval("Lon") %></td>
</tr>
<tr class="hidden">
<td>Y:</td>
<td><%# Eval("Lat") %></td>
</tr>
<tr>
</table>
</div>
</ItemTemplate>
</asp:Repeater>
Javascript code:
$('.toggleRow').on('click', function () {
$(this).closest('table').children('.hidden').show();
return false;
});
When batten with class toggleRow clicked the javascript fired but I do not get any result (i.e I expect the hidden row will be displayed but the not).
Any idea why?

Since you have a table and tr, even though you are not creating tbody the browser will put all the tr elements in a tbody, so your selector $(this).closest('table').children('.hidden').show(); will not be able to find the tr as children of the able.
So try
$(this).closest('table').find('tr.hidden').show();
You also will have to add the toggleRow class to the button
<input type="button" id="btnToggleRow" value="B" style="height: 30px; position: relative; float: left;" class="toggleRow"/>

To display the row which are hidden use below code.
$('.toggleRow').on('click', function () {
$('.hidden').css("display","block");
return false;
});

Related

Checkbox check one at a time not working

My requirement here is to make user only check one checkbox at a time. I tried with the below code:-
$('input.chkclass').on('change', function () {
$('input.chkclass').not(this).prop('checked', false);
});
and HTML
<table id="trchkOptions" style='display: none' runat="server">
<tr>
<td style="width: 5%">
</td>
<td>
<span style="display: inline-block; width: 5%;">
<input id="chkOption1" class="chkclass" value="testing" runat="server" type="checkbox" name="chkOption1" /></span>
Option 1 To
RA 1, RA 2, CC
</td>
<td style="width: 5%">
</td>
</tr>
<tr>
<td style="width: 5%">
</td>
<td>
<span style="display: inline-block; width: 7%;">
<input id="chkOption2" class="chkclass" value="testing" runat="server" type="checkbox" name="chkOption2" /></span>Option
2 To
Hemant Shah, Vimal Shah, Rushank Shah, CC
</td>
<td style="width: 5%">
</td>
</tr>
<tr>
<td style="width: 5%">
</td>
<td>
<span style="display: inline-block; width: 5%;">
<input id="chkOption3" class="chkclass" value="testing" runat="server" type="checkbox" name="chkOption3" /></span>
Option 3 To,
RA 1, RA 2, CC
</td>
<td style="width: 5%">
</td>
</tr>
<tr>
<td style="width: 5%">
</td>
<td>
<asp:Button ID="btnSendFeedback" runat="server" Width="30%" Text="Submit" OnClick="btnSendFeedback_Click" />
</td>
</tr>
</table>
here is a live preview
But it is not working.
Note I don't want to use radiobutton here. I want it with checkbox only.
Kindly suggest what is wrong
Try
$('input.chkclass').not(this).attr('checked', false);
instead
$('input.chkclass').not(this).prop('checked', false);
It may work.
Demo:
$('input.chkclass').on('change', function() {
$('input.chkclass').not(this).prop('checked', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="trchkOptions" style='display: block' runat="server">
<tr>
<td style="width: 5%">
</td>
<td>
<span style="display: inline-block; width: 5%;">
<input id="chkOption1" class="chkclass" value="testing" runat="server" type="checkbox" name="chkOption1" /></span>
</td>
<td style="width: 5%">
</td>
</tr>
<tr>
<td style="width: 5%">
</td>
<td>
<span style="display: inline-block; width: 7%;">
<input id="chkOption2" class="chkclass" value="testing" runat="server" type="checkbox" name="chkOption2" /></span>
</td>
<td style="width: 5%">
</td>
</tr>
<tr>
<td style="width: 5%">
</td>
<td>
<span style="display: inline-block; width: 5%;">
<input id="chkOption3" class="chkclass" value="testing" runat="server" type="checkbox" name="chkOption3" /></span>
</td>
<td style="width: 5%">
</td>
</tr>
<tr>
<td style="width: 5%">
</td>
<td>
<asp:Button ID="btnSendFeedback" runat="server" Width="30%" Text="Submit" OnClick="btnSendFeedback_Click" />
</td>
</tr>
</table>
Do Like That..
Uncheck other checkbox during one checkbox
Disable other checkbox during one check
1.
$('input.chkclass').on('change', function () {
$('input.chkclass').prop('checked', false);
$(this).prop('checked', ture);
});
2.
$('input.chkclass').on('change', function () {
$('input.chkclass').prop('checked', false);
$('input.chkclass').prop('disabled',true);
$(this).prop('disabled',false);
$(this)..prop('checked', true);
});

Jquery click runs only once on web page - Web Forms C#

On my login page I want to display a simple table row that says loading. I put a simple script tag with a jquery function in the aspx page to show the table row when the login button is clicked. Everything works fine the first time the user clicks the login button. The login button and table row to display are inside an UpdatePanel container.
When the user clicks login again , with good or bad credentials, the table row does not display.
Here is my code on the page:
<%# Page Language="c#" AutoEventWireup="false" StylesheetTheme="Theme1" Codebehind="Default.aspx.cs" Inherits="....Default" %>
<%# MasterType VirtualPath="~/..." %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<style type="text/css" media="screen">
* {margin:0;padding:0}
html,body{height:100%}
</style>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
</head>
<div style="height: 100%; width: 100%; display: table; vertical-align: middle;">
<table cellpadding="0" cellspacing="0" border="0" style="height: 100%" width="100%">
<tr>
<td valign="middle" align="center">
<form id="frmLogin" runat="server" autocomplete="off">
<asp:scriptmanager ID="Scriptmanager1" runat="server"></asp:scriptmanager>
<asp:Panel ID="Panel1" runat="server" Width="371px" BackColor="white" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px">
<asp:UpdatePanel ID="upLogin" runat="server" RenderMode="block" UpdateMode="always">
<ContentTemplate>
<table cellpadding="0" width="100%" style="background-color: white" cellspacing="0" border="0">
<tr>
<td colspan="2" align="right" class="reportHeader" style="height: 30px; padding-right: 10px">
<%= this.VersionName %>
</td>
</tr>
<tr>
<td valign="middle" style="height: 140px" class="Yellow">
<table cellpadding="0" cellspacing="0" border="0" style="height: 100%" width="100%">
<tr>
<td colspan="3"><b>Please Log In:</b></td>
</tr>
<tr>
<td>Username:</td>
<td><b><asp:TextBox Width="150" ID="txtUserName" runat="server" AutoCompleteType="Disabled" /></b></td>
</tr>
<tr>
<td>Password:</td>
<td>
<asp:TextBox Width="150" TextMode="password" ID="txtPassword" runat="server" AutoCompleteType="Disabled" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" valign="middle" align="left" style="height: 30px; background-color: #f2dcac;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" valign="bottom" style="padding-left: 5px">
<a class="menuLink" href="email.aspx">I forgot my password</a></td>
<td align="right" valign="bottom">
<asp:Button Text="Log In" CssClass="actionButton" ID="btnLogin" runat="server" onclick="BtnLoginClick1" /></td>
</tr>
</table>
</td>
</tr>
<tr id="trInvalidLoginMessage" visible="false" runat="server">
<td align="center" colspan="2" style="background-color: #f2dcac;">
<font class="pageError">Invalid login. Please try again.</font>
</td>
</tr>
<tr id="trLoading" visible="False" style="display: none; text-align: center">
<td align="center" colspan="2" style="background-color: #f2dcac">
<font class="pageBodyBold"><h3>Loading...</h3></font>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</form>
</td>
</tr>
</table>
</div>
<script type="text/javascript" language="javascript">
Sys.Application.add_load(page_load);
function page_load() {
var txt = $get('<%= this.txtUserName.ClientID %>');
txt.focus();
}
$(function () {
if (<%= Page.IsPostBack.ToString().ToLower() %> == false) {
$("#trLoading").css("display", "none");
$("#loading-div").css("display", "none");
}
$("#btnLogin").click(function () {
if ($("#trLoading").css("display") == 'none') {
$("#trLoading").css("display", "inline");
}
else {
$("#trLoading").css("display", "none");
}
});
});
</script>
</body>
</html>
Is it possible to get a jquery click event handler to work on the login button?
After some more searching, I found a solution posted in this answer.
Link to question
The solution was to use the OnClientClick attribute for the button and also disable submit behavior.
Code for button:
<asp:Button Text="Log In" CssClass="actionButton" ID="btnLogin" runat="server" onclick="BtnLoginClick1" OnClientClick="if (!Page_ClientValidate()){ return false; } this.disabled = true; this.value = 'Logging in...';" UseSubmitBehavior="False"/>

Showing a repeater in a popup div on hover

l would like to show the following repeater in a popup div . the repeater being bind to a data table at the back end (Vb.net code)
l would like to show it as part of the data-content on hover for the following image
<div class="widget-canvas">
<asp:Repeater ID="Rptjobs" runat="server">
<HeaderTemplate>
<table id="tblClients2" align="center" cellpadding="2" cellspacing="0" border="0" width="260px">
<tr>
<td>JOBDESCRIPTION</td>
<td>TOTAL</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr >
<td valign="top" >
<%#DataBinder.Eval(Container.DataItem, "JOBDESCRIPTION")%>
</td>
<td valign="top" >
<a style="padding-left:10px;" href="" class ="dashtext"> <%#DataBinder.Eval(Container.DataItem, "TOTAL")%></a>
</tr>
<br />
</ItemTemplate>
<AlternatingItemTemplate>
<tr >
<td valign="top">
<%#DataBinder.Eval(Container.DataItem, "JOBDESCRIPTION")%>
</td>
<td valign="top" >
<a style="padding-left :10px;" href="" class ="dashtext"> <%#DataBinder.Eval(Container.DataItem, "TOTAL")%></a>
</tr>
</AlternatingItemTemplate>
FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
<td><img src="Images/preview.png" style="width:18px; height:18px;" class="popTertiary" rel="popover" data-original-title=<%#DataBinder.Eval(Container.DataItem, "CURRENTSTATUS")%> data-content=""></td>

Why my div is not sliding up?

Why my Div is not sliding up ? Where i am doing wrong ?
here is my jquery details. Am I referring to correct url or somewhere i am having problem?
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var $fieldRevItems = $("#dvDetails");
$('#<%=btnClose2.ClientID %>').click(function (e) {
$('#<%=txtSearch.ClientID %>').val('');
$fieldRevItems.slideUp(600);
e.preventDefault();
});
});
</script>
and here is my html details(which is nothing but a div containing one table)
<div id="dvDetails">
<table id="tblDetails" width="30%" style="border: Solid 3px #D55500; height: 100%"
cellpadding="0" cellspacing="0">
<tr style="background-color: #D55500">
<td colspan="2" style="height: 10%; color: White; font-weight: bold; font-size: larger" align="center">
User Details
</td>
</tr>
<tr>
<td align="right">
UserId:
</td>
<td>
<asp:Label ID="lblID" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td align="right">
UserName:
</td>
<td>
<asp:Label ID="lblusername" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td align="right">
FirstName:
</td>
<td>
<asp:TextBox ID="txtfname" runat="server" />
</td>
</tr>
<tr>
<td align="right">
LastName:
</td>
<td>
<asp:TextBox ID="txtlname" runat="server" />
</td>
</tr>
<tr>
<td align="right">
City:
</td>
<td>
<asp:TextBox ID="txtCity" runat="server" />
</td>
</tr>
<tr>
<td align="right" style="width: 100%">
Designation:
</td>
<td>
<asp:TextBox ID="txtDesg" runat="server" />
</td>
</tr>
<tr>
<td align="center" style="width: 100%">
<asp:Button ID="btnClose2" runat="server" Text="Close" />
</td>
</tr>
</table>
</div>
The selector is fine. But, you not need to use $ for anything, you should:
$(function () {
var fieldRevItems = $("#dvDetails");
$('#<%=btnClose2.ClientID %>').click(function (event) {
event.preventDefault();
$('#<%=txtSearch.ClientID %>').val('');
fieldRevItems.slideUp(600);
});
});
Your selectors appear to be the issue: $('#<%=btnClose2.ClientID %>') and $('#<%=txtSearch.ClientID %>'). Are you able to trigger any events based on those selectors?
The selectors referenced in your JavaScript should be those presented in your output source code. If you're attempting to pass a dynamic value from another language into the JS (as seems to be the case given your code), then you would need to either convert that value into a JavaScript variable to be passed into jQuery without quotes, or embed your JavaScript within the other language's template file, and then concatenate the echoed output directly as the jQuery selector.
Long story short, you're passing dynamic-looking code into jQuery as a string, instead of passing in a valid selector.

Open a ModalPopupExtender on an UpdatePanel using javascript

I'm trying to open a ModalPopup with JavaScript, and i've searched here on stackoverflow and the general advice seems be to use something like this:
$('#inputAdd').live("click", function () {
$('#addRow').show();
$find('<%=mpeIndications.BehaviorID %>').show();
});
Where #inputAdd is an html input image that i have in the ModalPopup, its objective is to show a row (#addRow) where a TextBox is shown. However, when i click on the #inputAdd button, it show the row, but then the ModalPopup hide, I think the reason maybe because there is an UpdatePanel that include the ModalPopup, I am right? In that case which may be a solution? I've putted some of the code I've in the .ascx. Thanks.
<table class="content-box">
<tr>
<td valign="top">
<asp:UpdatePanel runat="server" ID="upAppointments">
<ContentTemplate>
<table>
<tr>
<td>
<asp:Button runat="server" ID="btnIndicationsHidden" Style="display: none;" />
<asp:Panel runat="server" ID="pnlIndications" CssClass="modalPanel" Style="display: none;">
<table class="content-box">
<tr>
<td>
<table style="width: 100%;">
<tr>
<td>
<asp:Panel runat="server" ID="pnlShowCurrentIndication" Style="padding: 13px 8px 8px 8px">
<table style="width: 100%; border: 0;">
<tr>
<td style="width: 30%; vertical-align: top;" rowspan="2">
<asp:RadioButtonList runat="server" ID="gvProfiles" OnDataBound="gvProfiles_DataBound"
DataTextField="Name" DataValueField="Id" Style="white-space: nowrap;" />
</td>
<td style="padding-left: 10px;" class="contentBox">
<table style="width: 100%;">
<tbody id="showTable">
<tr>
<td id="indicacionestd" runat="server">
Indicaciones:
</td>
</tr>
<tr>
<td>
<asp:BulletedList ID="blIndicaciones" DataTextField="Valor" runat="server">
</asp:BulletedList>
</td>
</tr>
<tr>
<td id="contraindicacionestd" runat="server">
Contraindicaciones:
</td>
</tr>
<tr>
<td>
<asp:BulletedList ID="blContraindicaciones" DataTextField="Valor" runat="server">
</asp:BulletedList>
</td>
</tr>
</tbody>
<tbody style="display: none;" id="addRow">
<tr>
<td style="text-align: left; white-space: nowrap;" class="colSepGran">
Nombre:
</td>
</tr>
<tr class="filSepGranRA">
<td class="colSepGran">
<asp:TextBox runat="server" ID="txbName" CssClass="txtNoWidth" Width="150px" ToolTip="Especifique el nombre del perfil"></asp:TextBox>
<act:FilteredTextBoxExtender runat="server" ID="ftbeName" FilterMode="ValidChars"
FilterType="UppercaseLetters, LowercaseLetters, Custom" TargetControlID="txbName"
ValidChars="ñ Ñ ' á é í ó ú Á É Í Ó Ú ü Ü ." />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle;">
<table style="width: 100%;">
<tr>
<td>
</td>
<td>
<input type="image" src="../../App_Themes/Theme/Images/AppIcons/add.png/" id="inputAdd"
title="Adicionar perfil">
</td>
<td>
<input type="image" src="../../App_Themes/Theme/Images/AppIcons/add_document.png"
id="inputAddSimple" title="Adicionar indicación" />
</td>
<td>
<input type="image" src="../../App_Themes/Theme/Images/AppIcons/edit.png" id="inputEdit"
title="Editar perfil" />
</td>
<td>
<asp:ImageButton runat="server" ID="imbRemoveProfile" ToolTip="Eliminar perfil" ImageUrl="~/App_Themes/Theme/Images/AppIcons/delete.png" />
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
</table>
</td>
</tr>
</table>
</asp:Panel>
<act:ModalPopupExtender ID="mpeIndications" runat="server" PopupControlID="pnlIndications"
BackgroundCssClass="modalBackground" TargetControlID="btnIndicationsHidden" CancelControlID="imbCloseIndications"
BehaviorID="mpeIndications">
</act:ModalPopupExtender>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
Then try this approach:
Add a hidden link for ModalPopup Extender to attach to(which will NEVER be used)
<a href="#" style="display:none;visibility:hidden;"
onclick="return false" ID="dummyLink" runat="server">dummy</a>
Add the ID of the hidden link to the ModalPopupExtender
<act:ModalPopupExtender ID="mpeIndications" runat="server" PopupControlID="pnlIndications"
BackgroundCssClass="modalBackground"
TargetControlID="dummyLink"
CancelControlID="imbCloseIndications"
BehaviorID="mpeIndications">
Showing the modal popup
$find('MyMPE').show();
http://www.geekzilla.co.uk/View38736C2B-BAD3-418A-A5B0-DAC4F1A5A83A.htm
Model Dialog Asp.Net With Jquery

Categories