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

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"/>

Related

Web application doesn't work on Edge Browser 41

I am working on Intranet web application. it has developed using Strust2 and run on the weblogic 12c server. application working on dev environment without any issue IE(11) and Edge(41) Microsoft browser.
But after deploying Production it only working IE(11).it doesn't work on Edge.we can launch login page after that but can't navigate on Edge.
Edge browser console we can see below error.
CSP14321 Resource violated directive 'default-src 'self'' in Content-security-Policy:inline script https://xx.xxx.x.xx/dms/login.action at line
19 column 30.Resource will be blocked
Note: Our Web Application supports work with IE11 and Edge.
I tried with the different approach but couldn't navigate from the login page
1.i remove the meta tags like
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
2.add meta tags like
<meta http-equiv="Content-Security-Policy" content="default-src 'self'"/>
above approach doesn't work.to change Content Security Policy no any configurations files in our application .plase help with this
This is the login page.
<%# taglib prefix="s" uri="/struts-tags"%>
<%# taglib prefix="sx" uri="/struts-dojo-tags"%>
<%# page contentType="text/html;charset=UTF-8" language="java"%>
<%# page import="tvm.ka.TvsGlobals"%>
<%# page errorPage="/tvs/ka/common/KvsCommonError.jsp"%>
<head>
<title><s:text name="title.login" /></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="<%=KvsConfigMgr.strCSS%>" type="text/css" />
<script language="JavaScript" src="<%=kvsConfigMgr.strJS%>KvsCommon.js">
</script>
<script language="JavaScript" src="<%=KvsConfigMgr.strJS%>KvsLogin.js">
</script>
<script language="JavaScript">
var MSG_USERID = "<s:text name="msg.login.userid"/>";
var MSG_PASSWORD = "<s:text name="msg.login.password"/>";
</script>
</head>
<body background="<%=KvsConfigMgr.strLstBg%>" leftmargin="0"
topmargin="0" marginwidth="0" marginheight="0" onLoad="focusFirst()">
<s:form action="login" method="POST">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td valign="top"><div align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" background="<%=KvsConfigMgr.strIMG%>topbg.gif">
<table width="100%" border="0" cellpadding="0" cellspacing="0"
background="<%=KvsConfigMgr.strIMG%>topbg.gif">
<tr>
<td><table width="100%" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td width="13%"
background="<%=KvsConfigMgr.strIMG%>logo_bg.jpg"><img
src="<%=KvsConfigMgr.strIMG%>default_01.jpg" width="133"
height="77" alt=""></td>
<td width="87%"
background="<%=KvsConfigMgr.strIMG%>top_bg.jpg"><img
src="<%=KvsConfigMgr.strIMG%>default_02.jpg" width="645"
height="77" alt=""></td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div align="left"></div></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td width="40%"> </td>
<td class="errorText">
<%-- <s:if
test="${not empty ${KmsGlobals.GLOBAL_ERR_MSG_LIST}.null}"
scope="request">
<s:iterator value="${KmsGlobals.GLOBAL_ERR_MSG_LIST}.null"
indexId="count" id="errMsg" type="java.lang.String">
<s:property value="errMsg.null" />
<br>
</s:iterator>
</s:if> --%> <s:if test="hasActionErrors()">
<div class="error">
<s:actionerror />
</div>
</s:if>
</td>
</tr>
<tr>
<td class="bodyTextSmall"> </td>
<td>
<table border="0" cellspacing="0" cellpadding="5">
<tr>
<td>To begin, please key in your user id and<br />password
below, and click on login.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
<td>
<table border="0" cellspacing="0" cellpadding="5">
<tr>
<td><img src="<%=KvsConfigMgr.strIMG%>tran.gif" width="80"
height="8" /></td>
<td><img src="<%=KvsConfigMgr.strIMG%>tran.gif" width="150"
height="8" /></td>
<td><img src="<%=KvsConfigMgr.strIMG%>tran.gif" width="80"
height="8" /></td>
</tr>
<tr>
<td class="bodyTextBold">User ID</td>
<td><input type="text" name="strUserId" size="20"
tabindex="1" /></td>
<td> </td>
</tr>
<tr>
<td class="bodyTextBold">Password</td>
<td>
<%--
<!--html:password property="strPasswd" autocomplete="off" size="20" tabindex="2"/ -->
I-WAPT-8 Password autocomplete attribute was enabled
Application Penetration Test Fix
--%> <input type="password" name="strPasswd"
autocomplete="off" size="20" tabindex="2" />
</td>
<td><input class="button" style="width: 70px" type="submit"
value="Login" onClick="return validate()" tabindex="3" /></td>
</tr>
<tr>
<td colspan="3" class="errorText">For authorised use only.
Unauthorised use is strictly prohibited.</td>
</tr>
</table>
</td>
</tr>
</table>
<%-- <s:hidden name="dispatch" value="login" /> --%>
<input type="hidden" name="dispatch" value="login" />
</s:form>
<div id="version-tag"><%=KvsConfigMgr.strVer%></div>
<style>
#version-tag {
position: absolute;
bottom: 0;
left: 0;
FONT-WEIGHT: normal;
FONT-SIZE: 11px;
COLOR: rgba(0, 0, 0, 0.6);
FONT-FAMILY: Arial, Verdana, Helvetica, sans-serif;
vertical-align: text-top;
border-color: #0085E0;
}
</style>
</body>
Along with content-security-policys you cannot use inline Javascript like onLoad="focusFirst()" and
<script language="JavaScript">
var MSG_USERID = "<s:text name="msg.login.userid"/>";
var MSG_PASSWORD = "<s:text name="msg.login.password"/>";
</script>
https://developer.chrome.com/extensions/contentSecurityPolicy#JSExecution
Inline Javascript code will simply not be executed.
Instead, create a Javascript file with this code:
document.addEventListener('load', focusFirst);
Make sure focusFirst function is known at that point.
Depending on what focusFirst does it might improve the performance if you instead attach the listener to the DOMContentLoaded event (which triggers when all HTML is parsed, whereas load only triggers much later once all linked resources like images etc. have been loaded).
Please note that inline <script> blocks will also not be executed with a content security policy active.

How to generate another form on checkbox select event using loop in ASP.NET?

I created a form with validations to take member's details and register it. I want to create another form when user click on add another member by using it. Is it possible to have 2 form tag in one page in ASP.NET, and how to do it?
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="webAss1.WebForm4" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.auto-style1 {
width: 59%;
}
.auto-style2 {
width: 112px;
}
.auto-style3 {
width: 112px;
height: 29px;
}
.auto-style4 {
height: 29px;
}
</style>
</head>
<body>
<h2>MEMBER REGISTRATION FORM</h2>
<p>
Enter the details:</p>
<form id="form1" runat="server">
<table class="auto-style1">
<tr>
<td class="auto-style2">Name:</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
<td> </td>
</tr>
<tr>
<td class="auto-style2">Email:</td>
<td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</td>
<td> </td>
</tr>
<tr>
<td class="auto-style2">Contact no:</td>
<td>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
</td>
<td> </td>
</tr>
<tr>
<td class="auto-style3">Address:</td>
<td class="auto-style4">
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
</td>
<td class="auto-style4"></td>
</tr>
<tr>
<td class="auto-style2"> </td>
<td>
<asp:CheckBox ID="CheckBox1" runat="server" />
</td>
<td> </td>
</tr>
<tr>
<td class="auto-style2"> </td>
<td>
<asp:Button ID="Button1" runat="server" Text="Button" />
</td>
<td> </td>
</tr>
</table>
<div>
</div>
</form>
</body>
</html>
Please help
If you test another server side form in you page you will get this error:
A page can have only one server-side Form tag.
But you can add another form without runat="server. That is a client side form. But I think it is useless. Maybe do some help for validations.(Of course client side validations with $("#form_id").valid();)

Refresh partial page on user control text change event

I have one Usercontrol Textbox with some radio buttons.
I want to refresh some of these buttons when I change the usercontrol textbox value.
In short, when I select Specific button it displays RM row & for All radio button selection it hides RM row. After selecting RM & checking Client radio button, it again displays two radio button below. By checking any of radio it displays the grid data below. For Prospect & Closed button it displays grid data below after checking it.
For all radio all the functionality is same except RM selection.
My all functionality is working as expected just need to add one more addition in it.
Now I want to refresh 5 radio buttons(Client, Prospect, Closed, Client, Family) which are below RM user control screen when I change the RM name from usercontrol textbox.
I tried using update panel but it couldn't work as it got mess for me so reverted all that changes. My current working code is as below:
<script type="text/javascript">
$110 = $;
$110(document).ready(function () {
//intial setting of panel
rdoBtnShowHidePanels();
$110("#trClient").hide();
$110("#btnSendSms").hide();
$110("#trCommMode").hide();
$110("input[type='radio'][name='First']").attr('checked', false);
$110("input[type='radio'][name='SelectRM']").change(function () {
$110("#trClient").hide();
$110("#jqxContact").hide();
$110("#trCommMode").hide();
if ($110("input[type='radio'][id='RdoSpecific']").is(":checked") == true) {
$110("input[type='radio'][name='First']").attr('checked', false);
$110("input[type='radio'][name='a']").attr('checked', false);
$110("#trRM").show();
$("input[id$=mcscRMSearch_txtSearch]").val('');
$110("input[type='radio'][name='First']").change(function () {
if ($110("input[type='radio'][id='RdoSpecific']").is(":checked") == true) {
if (ValidateRMSelection() == true) {
$110("#trRM").show();
if ($110("input[type='radio'][id='rdoClientAll']").is(":checked") == true) {
$110("#trClient").show();
$110("input[type='radio'][name='a']").change(function () {
$110("#hdnType").val("C");
$110("#jqxContact").show();
var getselectedrowindexes = $110('#jqxContact').jqxGrid('getselectedrowindexes');
$110('#jqxContact').jqxGrid('unselectrow', getselectedrowindexes);
$110('#jqxContact').jqxGrid('clearselection');
if ($110("input[type='radio'][id='RdoSpecific']").is(":checked") == true) {
BindGridBasedOnRadioButtons();
}
$110("#trCommMode").show();
return;
})
}
else {
$110("#hdnType").val("P");
$110("input[type='radio'][id='rdoclient']").prop("checked", false);
$110("input[type='radio'][id='rdofamily']").prop("checked", false);
$110("#trClient").hide();
$110("#jqxContact").show();
var getselectedrowindexes = $110('#jqxContact').jqxGrid('getselectedrowindexes');
$110('#jqxContact').jqxGrid('unselectrow', getselectedrowindexes);
$110('#jqxContact').jqxGrid('clearselection');
if ($110("input[type='radio'][id='RdoSpecific']").is(":checked") == true) {
BindGridBasedOnRadioButtons();
}
$110("#trCommMode").show();
return;
}
}
else {
alert("Select RM");
$110("#trClient").hide();
$110("#trCommMode").hide();
$110("#jqxContact").hide();
return;
}
}
})
}
else {
$110("#trRM").hide();
$110("#trCommMode").hide();
$110("input[type='radio'][name='First']").attr('checked', false);
$110("input[type='radio'][name='a']").attr('checked', false);
$110("input[type='radio'][name='First']").change(function () {
if ($110("input[type='radio'][id='rdoClientAll']").is(":checked") == true) {
$110("#jqxContact").hide()
$110("#trClient").show();
$110("input[type='radio'][name='a']").change(function () {
$110("#hdnType").val("C");
$110("#jqxContact").show();
var getselectedrowindexes = $110('#jqxContact').jqxGrid('getselectedrowindexes');
$110('#jqxContact').jqxGrid('unselectrow', getselectedrowindexes);
$110('#jqxContact').jqxGrid('clearselection');
BindGridBasedOnRadioButtons1();
$110("#trCommMode").show();
return;
})
}
else {
$110("#hdnType").val("P");
$110("input[type='radio'][id='rdoclient']").prop("checked", false);
$110("input[type='radio'][id='rdofamily']").prop("checked", false);
$110("#trClient").hide();
$110("#jqxContact").show();
var getselectedrowindexes = $110('#jqxContact').jqxGrid('getselectedrowindexes');
$110('#jqxContact').jqxGrid('unselectrow', getselectedrowindexes);
$110('#jqxContact').jqxGrid('clearselection');
BindGridBasedOnRadioButtons1();
$110("#trCommMode").show();
return;
}
})
}
})
<form id="Form1" method="post" runat="server">
<asp:ScriptManager ID="scmPhoneBook" runat="server">
</asp:ScriptManager>
<table id="Table1" cellspacing="1" cellpadding="0" width="100%" border="0">
<tr>
<td class="clsTitle" align="center" style="height: 25px">Contacts
</td>
</tr>
<tr>
<td class="clstd" align="left" style="width: 100%" colspan="2">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="clstdnext" align="left" style="width: 100%" colspan="2">
<asp:RadioButton ID="RdoSpecific" runat="server" GroupName="SelectRM" Text="Specific"></asp:RadioButton>
<asp:RadioButton ID="RdoAll" runat="server" GroupName="SelectRM" Text="All"></asp:RadioButton>
</td>
</tr>
<tr id="trRM">
<td class="clstd" width="2%">RM
</td>
<td class="clstd" width="98%">
<mwimcs:MultiColumnSearchControl
runat="server"
ID="mcscRMSearch"
CssClass="clsTextbox"
Width="300"
ControlType="137"
DataTextField="usr_name"
DataValueField="usr_id"
Top="-15px" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="clstdnext" align="left" style="width: 100%" colspan="2">
<asp:RadioButton ID="rdoClientAll" runat="server" GroupName="First" Text="Client"></asp:RadioButton>
<asp:RadioButton ID="RdoProspect" runat="server" GroupName="First" Text="Prospect"></asp:RadioButton>
<asp:RadioButton ID="RdoClosed" runat="server" GroupName="First" Text="Closed"></asp:RadioButton>
</td>
</tr>
<tr id="trClient">
<td class="clstd" align="left" style="width: 100%" colspan="2">
<asp:RadioButton ID="rdofamily" runat="server" GroupName="a" Text="Family"></asp:RadioButton>
<asp:RadioButton ID="rdoclient" runat="server" GroupName="a" Text="Client"></asp:RadioButton>
</td>
</tr>
<tr>
<td valign="top">
<div id="jqxContact"></div>
<asp:Panel ID="PnlClient" runat="server" Width="100%">
</asp:Panel>
</td>
<asp:DataGrid ID="dgCompany" runat="server" Width="100%" AutoGenerateColumns="False"
AllowSorting="True" AllowPaging="True" PageSize="25">
</asp:DataGrid>
</tr>
</table>
<br />
<table width="100%" cellpadding="0" cellspacing="1" border="0">
<tr height="10px">
<td class="clsLabel_err" colspan="2">
<asp:Label ID="lblErrorMsg" runat="server" CssClass="clsLabel_err"></asp:Label>
</td>
</tr>
<tr style="width: 100%" id="trCommMode">
<td class="clstdnext" style="width: 25%">Communication Mode:</td>
<td class="clstdnext" align="left" valign="middle">
<asp:RadioButtonList ID="rbtnlistSmsMail" runat="server" RepeatDirection="Horizontal"
Font-Names="Verdana" Font-Size="11px">
<asp:ListItem>
SMS
</asp:ListItem>
<asp:ListItem>
E-Mail
</asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
<tr>
<td colspan="2" id="pnlEmailDtls" runat="server">
<asp:Panel ID="pnlpnlEmailDtls" runat="server" Width="100%">
<table id="Table3" cellspacing="1" cellpadding="0" width="100%" border="0">
<tr>
<td class="clstd" style="width: 25%">Email From</td>
<td class="clsTd" style="width: 80%">
<cc1:MultiColumnComboBox ID="mmcEmail" runat="server" CssClass="clstd" HeaderCSS="clsReportTitle"
ItemsCSS="clstdnext" VerticalScrolling="True" DownArrowButtonCSS="clsButton"
DownArrowImageURL="url(Images/downarrow.gif)" DownArrowButtonHeight="12" DownArrowButtonWidth="20"
TextBoxCSS="clsTextbox">
<Columns>
<cc1:Column ColumnWidth="" DataField="email" KeyColumn="True" HeaderText="Email"></cc1:Column>
<cc1:Column ColumnWidth="" DataField="smtp" KeyColumn="False" HeaderText="SMTP"></cc1:Column>
</Columns>
</cc1:MultiColumnComboBox>
</td>
</tr>
<tr>
<td class="clstdnext" style="width: 20px">Subject</td>
<td class="clstdnext" style="width: 80px">
<asp:TextBox ID="txtSubject" runat="server" CssClass="clsTextbox" Width="327px">
</asp:TextBox>
</td>
</tr>
<tr>
<td class="clstd">Attachment 1)
</td>
<td class="clstd">
<input class="clsTextbox" id="fileupload1" style="width: 250px" type="file" size="48" runat="server"
name="fileupload1" />
</td>
</tr>
<tr>
<td class="clstdnext">Attachment 2)
</td>
<td class="clstdnext">
<input class="clsTextbox" id="fileupload2" style="width: 250px" type="file" size="48" runat="server"
name="fileupload2" />
</td>
</tr>
<tr>
<td class="clstd">Attachment 3)
</td>
<td class="clstd">
<input class="clsTextbox" id="fileupload3" style="width: 250px" type="file" size="48" runat="server"
name="fileupload3" />
</td>
</tr>
<tr>
<td class="clsReportTitle" align="center" style="width: 100%" colspan="2">Message
</td>
</tr>
<tr>
<%--<TD width="100%" colSpan=2>
<asp:TextBox id=txtMessage runat="server" CssClass="clsTextbox" Width="100%" TextMode="MultiLine" Height="250px"></asp:TextBox></TD>--%>
<td align="left" class="clstd" colspan="2">
<ftb:FreeTextBox ID="FreeTextBox1" EnableHtmlMode="false" ToolbarLayout="ParagraphMenu, FontFacesMenu, FontSizesMenu, FontForeColorsMenu,FontForeColorPicker, FontBackColorsMenu, FontBackColorPicker, Bold, Italic, Underline,Strikethrough, Superscript, Subscript|InsertImageFromGallery, CreateLink, Unlink, JustifyLeft, JustifyRight, JustifyCenter, JustifyFull,BulletedList, NumberedList, Indent, Outdent,Cut, Copy, Paste, Delete, Undo, Redo,Save,InsertRule, InsertDate,InsertTime,Preview"
Height="300px" runat="server" Width="100%">
</ftb:FreeTextBox>
</td>
</tr>
<tr>
<td style="width: 100%" class="clstd_btn" colspan="2">
<%--<input id="BtnSendEmail" type="button" class="clsButton" value="Send"/>--%>
<asp:Button ID="BtnSendEmail" runat="server" OnClientClick="return ValidationBeforeEmailSendClick();" CssClass="clsButton" Text="Send"></asp:Button>
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
<tr>
<td colspan="2" id="pnlSmsDtls" runat="server">
<asp:Panel ID="pnlpnlSmsDtls" runat="server" Width="100%">
<table cellspacing="1" cellpadding="0" width="100%" border="0">
<tr>
<td class="clstd" style="width: 25%">SMS Type
</td>
<td class="clstd">
<asp:DropDownList ID="ddlSmsType" CssClass="clsCombobox" runat="server">
<asp:ListItem Value="0">---Select---</asp:ListItem>
<asp:ListItem Value="1">Upcoming maturity/due date</asp:ListItem>
<asp:ListItem Value="2">New product offerings</asp:ListItem>
<asp:ListItem Value="3">Pick of the day</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td colspan="2" class="clstdnext">SMS Text
</td>
</tr>
<tr>
<td colspan="2" class="clstdnext" style="height: 40px">
<asp:TextBox ID="txtSmsText" runat="server" CssClass="clsTextbox" TextMode="MultiLine"
Width="100%" Height="100px">
</asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2" class="clstd_btn">
<input type="button" id="btnGo" value="Save" class="clsButton" />
<%--<asp:Button ID="btnGo" runat="server" CssClass="clsButton" Text="Save" />--%>
<asp:Button ID="btnSendSms" runat="server" CssClass="clsButton" Text="Send SMS"
Width="72px"></asp:Button>
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
</table>
<input type="hidden" id="hdnType" />
</form>
Its argent... kindly please help.
Thanks in advance.

How to hide show the div on usercontrol using javascript

I have to develop the functionality for the que and rply for that i have create the user contol as per my requirment as fallow and i have add the div with the text box for rely and submit button on user control and keep the div disply style to none and i call the javascript on reply link which shows the that div.
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="SuppReview.ascx.cs" Inherits="LaaFoodWebApp.SuppReview" %>
<div>
<table style="width:100%;">
<tr>
<td rowspan="2" style="width: 15%; vertical-align: top;">
<asp:Label ID="lblMsgType" runat="server"></asp:Label>
<br />
<asp:Label ID="lblMsgId" runat="server"></asp:Label>
</td>
<td style="width: 70%; vertical-align: top;">
<asp:Label ID="lblMsgtBody" runat="server"></asp:Label>
</td>
<td style="width: 15%">
<asp:Label ID="lblVDate" runat="server"></asp:Label>
<br />
By
<asp:Label ID="lblname" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<a id="toggleReply" style="color: #15ADFF" href="#">Reply</a>
</td>
<td>
<asp:Label ID="lblEmail" runat="server"></asp:Label>
<br />
<asp:Label ID="lblPhone" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
</td>
<td>
<panel id="pnlreply" >
<div id="DivReply" style="display:none">
<table style="width:100%;">
<tr>
<td style="width: 15%">
Replys</td>
<td>
<asp:TextBox ID="TextBox1" runat="server" Height="50px" TextMode="MultiLine"
Width="100%"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td style="text-align: right">
<asp:Button ID="btnSubmit" runat="server" Text="Submit"
onclick="btnSubmit_Click" />
</td>
</tr>
</table></div></panel>
</td>
<td>
</td>
</tr>
</table>
</div>
But when i add those user control multiple time as per the count of replyes.
for (int i = 0; i< dt.Rows.Count; i++)
{
SuppReview SR = (SuppReview)Page.LoadControl("SuppReview.ascx");
SR.settxt(dt.Rows[i]);
reviews.Controls.Add(SR);
}
on the page
<%# Page Title="" Language="C#" MasterPageFile="~/SupplierMasterNew.Master" AutoEventWireup="true" CodeBehind="Supp_Views.aspx.cs" Inherits="LaaFoodWebApp.Supp_Views" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript">
$(function () {
$('#toggleReply').click(function () {
$('#DivReply').toggle('slow');
return false;
});
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="CPHcontent" runat="server">
<div style="width: 100%; height: 24px; background-color: #D2EEF2; padding-top: 10px;
font-size: large; color: #000000; text-align: left;">
View</div>
<asp:Panel ID="reviews" runat="server">
</asp:Panel>
</asp:Content>
On clicking on reply link int hide show the div (Contain text box for rely and submit button) multiple time and it not work for the other entry
You have multiple duplicate IDs on your page if you are adding this control multiple times!
Consider changing the IDs to classes.
also give your outer div in your control a class! e.g. <div class="wrapper">
Declare a function:
function toggleReply(sender) {
$(sender).parent('.wrapper').children('.DivReply').toggle('slow');
}
your link:
<a class="toggleReply" style="color: #15ADFF" href="javascript:void(0);" onclick="toggleReply(this);">Reply</a>

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