when i click on the button which is inside the item template of gridview then onclientclick event should fire and then call the javascript function but my problem is that there no onclientclick event is fire in item template button.
<%# Page Language="C#" AutoEventWireup="true" EnableEventValidation="false" CodeFile="Default.aspx.cs"
Inherits="_Default" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
.dvBroker
{
display: none;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-image: url(image/broker_bg.png);
background-repeat: repeat;
}
.collection_heading2
{
font-family: verdana;
font-size: 12px;
font-weight: bold;
color: #000000;
background-image: url(image/gray_bg.gif);
background-repeat: repeat-x;
height: 20px;
width: 386px;
margin-left: 30%;
margin-top: 50px;
padding: 7px 7px 0px 7px;
border: 3px solid #000000;
border-bottom: none;
text-align: center;
}
.broker_window
{
border: 3px solid #000000;
height: 250px;
overflow: auto;
width: 400px;
background-color:White;
margin-left: 30%;
border-top: none;
padding-top: 10px;
text-align: left;
}
</style>
</head>
<body>
<script type="text/javascript" language="javascript">
function Show()
{
document.getElementById("dvStage").style.display='block';
return false;
}
function Close()
{
document.getElementById("dvStage").style.display='none';
return false;
}
</script>
<form id="form1" runat="server">
<asp:ScriptManager ID="sc1" runat="server" EnablePartialRendering="true">
</asp:ScriptManager>
<div>
<asp:Label ID="lblmsg" runat="server" ForeColor="#FF3300"></asp:Label>
<asp:LinkButton ID="lbnaddnewcharge" runat="server" OnClientClick="return Show();"
Text="Show"></asp:LinkButton>
</div>
<div>
ROLL NO:
<asp:TextBox ID="txtrollno" runat="server"></asp:TextBox>
<div>
STUDENT NAME:
<asp:TextBox ID="txtname" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="ADD" BorderStyle="Ridge" OnClick="btnadd_Click" /></div>
<asp:GridView ID="gvstudent" runat="server" AutoGenerateColumns="False" Width="857px"
OnRowDataBound="gvstudent_RowDataBound" OnSelectedIndexChanged="gvstudent_SelectedIndexChanged1">
<Columns>
<asp:BoundField HeaderText="ROLL NO" DataField="roll_no" />
<asp:BoundField HeaderText="NAME" DataField="name" />
<asp:BoundField HeaderText="TOTAL" DataField="total" />
<asp:BoundField HeaderText="STATUS" DataField="status" />
<asp:TemplateField>
<ItemTemplate>
<asp:Button CommandName="Click" ID="btnclick" OnCommand="btnclick_Click" CommandArgument='<%#Eval("roll_no") %>'
OnClientClick="return Show('aspnetForm','[gvstudent]');" runat="server" Text="Click" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div id="dvstage" class="dvBroker">
<div class="collection_heading2">
<div style="float: left">
SUBJECT
</div>
<div style="float: right">
<asp:ImageButton ID="btnclose" runat="server" ImageUrl="~/image/delete.png" OnClientClick="return Close();" />
</div>
</div>
<div class="broker_window">
<asp:UpdatePanel ID="up1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:PopupControlExtender ID="PopupControlExtender1" runat="server" TargetControlID="gvchild"
PopupControlID="btnclick" Position="Center">
</asp:PopupControlExtender>
<asp:GridView ID="gvchild" OnRowDataBound="gvChild_RowDataBound" runat="server" AutoGenerateColumns="false"
EmptyDataText="NO Row in grid view">
<Columns>
<asp:BoundField HeaderText="Subject" DataField="subject_name" />
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="txtsubject" runat="server" Text='<%#Bind("marks") %>'></asp:TextBox></ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Button ID="btnaddchild" runat="server" Text="ADD" OnClick="btnaddchild_Click" />
<asp:Button ID="btncancle" runat="server" Text="CANCLE" OnClick="btncancle_Click1" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</form>
</body>
</html>
Use a client-side framework like jQuery. Don't put all the onclick client-side events inline. It bloats your markup and it's harder to maintain. Bind the events instead, e.g. http://api.jquery.com/bind and/or http://api.jquery.com/live.
Since its ASP.NET WebForms, your HTML elements id attributes are rendered as the ClientID property of the server controls, so if that causes problems for you getting a reference to the elements to bind events to via id using a jQuery selector, use jQuery's selectors, http://api.jquery.com/category/selectors .
e.g.
$("input[id$='btnClose'").live("click", function(event) {
$("#dvStage").hide();
event.stopPropagation();
});
$("a[id$='lbnaddnewcharge']").live("click", function(event) {
$("#dvStage").show();
event.stopPropagation();
});
Related
I have ajax telerik tabs in my code and when I switch the tabs my controls loses whatever I have typed.
I tried "enableViewState" to true. It didn't work either.
What I want is the controls to retain values entered on tab switch
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" Width="100%" Align="Justify" >
<Tabs>
<telerik:RadTab PageViewID="RadPageView1" NavigateUrl="CreateNewUser.aspx?TabIndex=0" Text="Adviser Details" HoveredCssClass="hoveredTab" Font-Bold="true" />
<telerik:RadTab PageViewID="RadPageView2" NavigateUrl="CreateNewUser.aspx?TabIndex=1" Text="Fee Split" HoveredCssClass="hoveredTab" Font-Bold="true" />
<telerik:RadTab PageViewID="RadPageView3" NavigateUrl="CreateNewUser.aspx?TabIndex=2" Text="Signature" HoveredCssClass="hoveredTab" Font-Bold="true" />
<telerik:RadTab PageViewID="RadPageView4" NavigateUrl="CreateNewUser.aspx?TabIndex=3" Text="Reference Details" HoveredCssClass="hoveredTab" Font-Bold="true" />
</Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="RadMultiPage1" runat="server" Width="100%" RenderSelectedPageOnly="false">
<telerik:RadPageView ID="RadPageView1" runat="server" Height="100%" CssClass="RadPageViewBorder">
<div style="padding: 10px 10px 10px 10px; background-color: white;">
<uc1:AdvisorDetails ID="UCAdvisorDetails" runat="server" />
</div>
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageView2" runat="server" Width="100%" Height="100%" CssClass="RadPageViewBorder">
<div style="padding: 0px 0px 0px 0px; background-color: white;">
<uc1:AdvisorFeeSplit runat="server" ID="UCAdvisorFeeSplit" />
</div>
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageView3" runat="server" Width="100%" Height="100%" CssClass="RadPageViewBorder">
<div style="padding: 0px 0px 0px 0px; background-color: white;">
<uc1:AdvisorSignature ID="UCAdvisorSignature" runat="server" />
</div>
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageView4" runat="server" Width="100%" Height="100%" CssClass="RadPageViewBorder">
<div style="padding: 0px 0px 0px 0px; background-color: white;">
<uc1:AdvisorReferenceDetails runat="server" ID="UCAdvisorReferenceDetails" />
</div>
</telerik:RadPageView>
</telerik:RadMultiPage>
<div class="col100" style="padding-top: 35px; padding-left: 30px; padding-right: 30px;">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="btnAddUser" ValidationGroup="vgUser" runat="server" Width="120px" Text="Save" CssClass="btn-common" OnClick="btnAddUser_Click" />
<asp:Button ID="btnDeleteUser" ValidationGroup="vgUser" runat="server" Width="120px" Text="Delete" CssClass="btn-common" OnClick="btnDeleteUser_Click"/>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnAddUser"/>
<asp:PostBackTrigger ControlID="btnDeleteUser"/>
</Triggers>
</asp:UpdatePanel>
</div>
<div class="col100">
<span class="failureNotification">
<asp:Literal ID="litError" runat="server"></asp:Literal>
</span>
<span class="successNotification">
<asp:Literal ID="litSuccess" runat="server"></asp:Literal>
</span>
</div>
Can someone point out the issue pls ?
Your tabs have NavigateUrl property set, which means they render as links, which means they redirect, they do not use ajax.
That's why the values are not persisted.
Hi I am doing a social network service using asp.net/c#, I have little problems with message sending. Message are flowed top to bottom. Like this
But I want to display messages bottom to top Like facebook..
I am displaying messages using repeater control.
repeater control code
<asp:Repeater runat="server" ID="Repeater1">
<ItemTemplate>
<div style="border-top: thin none #BBCEB3; border-bottom: thin none #BBCEB3; padding: 10px; width: 548px; margin-top: 10px; right: 10px; left: 10px; border-left-width: thin; margin-left: 15px; background-color: #e9eaee; border-left-color: #BBCEB3; border-right-color: #BBCEB3;">
<br />
<div style="width: 58px; height: 40px">
<asp:Image ID="Image2" runat="server" Height="59px" ImageAlign="Top" ImageUrl="~/Profile/Image/Default.png" Width="55px" />
</div>
<div style="width: 307px; margin-left: 65px; margin-top: -60px">
<asp:Label ID="Label6" runat="server" Font-Bold="True" Font-Names="Arial" ForeColor="#000066"><%#Eval("SenderID") %> </asp:Label>
</div>
<div id="status" style=" width: 461px; margin-left: 78px; margin-top: 11px;"> <asp:Label ID="Label7" runat="server" Font-Italic="False" ForeColor="Black" Font-Size="Medium"><%#Eval("Messages") %> </asp:Label>
</div>
<div style="margin-left: 350px">
<asp:Label ID="Label11" runat="server" Text="Posted on: " Font-Size="Small"><%#Eval("Time") %> </asp:Label>
</div>
</div>
</ItemTemplate>
Textbox code
<asp:TextBox ID="Message" runat="server" OnTextChanged="TextBox3_TextChanged" style="margin-left: 12px; text-align: left;" TextMode="MultiLine" Width="564px" Height="100px"></asp:TextBox>
The order of Items in the repeater will be the same as in DataSource, so just Order it by Time descending before bind.
I have strange problem.
I am implementing zero clipboard in asp.net.
First I created a page without site master and implemented the zero clipboard and it worked perfectly.
Here is the code.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="Locker.test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
</form>
<script type="text/javascript" src="Scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="Scripts/jquery.zclip.js"></script>
<script type="text/javascript" src="Scripts/jquery.zclip.min.js"></script>
<script>
$(document).ready(function () {
$('#<%=Button1.ClientID%>').zclip({
path: 'ZeroClipboard.swf',
copy: function () { return $('#<%=TextBox1.ClientID%>').val(); }
});
});
</script>
</body>
</html>
Now when I implement this same code on the page that use Master page, it doesn't work. It trigger I reckon post back so that javascript doesn't get executed.
I checked if autopost back it true but it is set to false.
I am not sure what causing this.
Any help will be appreciated.
Here is the code of the page which use Master page.
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="searchResult.aspx.cs" Inherits="Locker.searchResult" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<style type="text/css">
.auto-style1 {
color: #FFFFFF;
font-size: large;
}
.auto-style2 {
color: #000000;
}
.auto-style3 {
color: #000000;
font-size: large;
}
</style>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
<p>
<p>
<strong> <span class="auto-style3">Information</span><span class="auto-style1"> </span></strong>
<div style="width:70%; margin: auto auto; text-align:left;">
<asp:Panel ID="Panel1" runat="server">
<br />
<asp:Label ID="Label4" runat="server" style="font-weight: 700; font-size: large" Text="Details for :" CssClass="auto-style2"></asp:Label>
<asp:Label ID="Label5" runat="server" style="font-weight: 700; font-size: large; color: #0000FF"></asp:Label>
<br />
<br />
<asp:Label ID="Label1" runat="server" Font-Bold="False" style="font-weight: 700; font-size: large" Text="Password :" CssClass="auto-style2"></asp:Label>
<asp:TextBox ID="TextBox2" runat="server" BorderStyle="Solid" Enabled="False" Font-Size="Medium" ForeColor="Black" Width="213px"></asp:TextBox>
<asp:Button ID="Button3" runat="server" Text="Button" />
<input type="text" id="test_description" value="hi" />
<script type="text/javascript" src="Scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="Scripts/jquery.zclip.js"></script>
<script type="text/javascript" src="Scripts/jquery.zclip.min.js"></script>
<script>
$(document).ready(function () {
$('#<%=Button3.ClientID%>').zclip({
path: 'ZeroClipboard.swf',
copy: function () { return $('#<%=TextBox2.ClientID%>').val(); }
});
});
</script>
<br />
<br />
<asp:Label ID="Label6" runat="server" style="font-weight: 700; font-size: large" Text="Description :" CssClass="auto-style2"></asp:Label>
<asp:TextBox ID="TextBox5" runat="server" BorderStyle="Solid" Enabled="False" Font-Size="Medium" Height="48px" TextMode="MultiLine" Width="213px"></asp:TextBox>
<br />
<br />
<asp:Label ID="Label7" runat="server" style="font-weight: 700; font-size: small" Text="Last Editor was " CssClass="auto-style2"></asp:Label>
<asp:Label ID="Label8" runat="server" style="font-weight: 700; font-size: small" CssClass="auto-style2"></asp:Label>
<br />
<br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Edit" Width="97px" />
<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Update" Visible="False" Width="97px" />
<br />
<br />
<asp:Label ID="Label12" runat="server" style="font-weight: 700; font-size: large; color: #0000FF" Visible="False"></asp:Label>
<br />
<br />
<br />
<br />
</asp:Panel>
</div>
</asp:Content>
If you want to prevent postback, you may set UseSubmitBehavior to false on your Button
<asp:Button ID="Button3" runat="server" Text="Button" UseSubmitBehavior="False"/>
See UseSubmitBehavior description
I have a Submit button on the page, which upon being clicked, shows a modal popup window. This modal popup window contains a checkbox that must be checked before the OK button of the modal can be clicked:
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function cvcbCertify_ClientValidate(sender, e) {
var elem = document.getElementById('<%= cbCertify.ClientID %>');
if (elem.checked)
e.IsValid = true;
else {
$('.pnlConfirm').show(); //not working?
e.IsValid = false;
}
}
<ajaxToolkit:ConfirmButtonExtender ID="cbeResponseReferralSignOff" runat="server"
TargetControlID="ResponseLocalSignOff" DisplayModalPopupID="popConfirm">
</ajaxToolkit:ConfirmButtonExtender>
<ajaxToolkit:ModalPopupExtender runat="server" ID="popConfirm" TargetControlID="ResponseLocalSignOff"
BackgroundCssClass="modalBackground" DropShadow="true" OkControlID="btnConfirmCertify"
CancelControlID="btnCancel" PopupControlID="pnlConfirm">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel runat="server" ID="pnlConfirm" Style="display: none; background-color: White;
border: solid 1px Gray; width: 90%; height: 100%; padding: 10px" CssClass="pnlConfirm">
<asp:Panel runat="server" ID="pnlConfirm" Style="display: none; background-color: White;
border: solid 1px Gray; width: 90%; height: 100%; padding: 10px" CssClass="pnlConfirm">
popup text here
<asp:CheckBox runat="server" ID="cbCertify" Text="I Certify" CssClass="cbCertify">
</asp:CheckBox>
<br />
<asp:CustomValidator runat="server" ID="cvcbCertify" ClientValidationFunction="cvcbCertify_ClientValidate">Required.</asp:CustomValidator>
<br />
<div style="text-align: center">
<asp:Button runat="server" ID="btnConfirmCertify" Text="OK" />
<asp:Button runat="server" ID="btnCancel" Text="Cancel" />
</div>
</asp:Panel>
The problem is the modal window closes when validation fails. How do I prevent this window from closing or repoppen this window?
The only way to do this is by using an UpdatePanel. Additionally this will allow you to use AsyncPostBackTrigger with a Conditional UpdateMode with control events as well.
For example
<asp:Panel runat="server" ID="pnlConfirm" Style="display: none; background-color: White;
border: solid 1px Gray; width: 90%; height: 100%; padding: 10px" CssClass="pnlConfirm">
<asp:UpdatePanel ID="upItem" runat="server">
<ContentTemplate>
popup text here
<asp:CheckBox runat="server" ID="cbCertify" Text="I Certify" CssClass="cbCertify">
</asp:CheckBox>
<br />
<asp:CustomValidator runat="server" ID="cvcbCertify" ClientValidationFunction="cvcbCertify_ClientValidate">Required.</asp:CustomValidator>
<br />
<div style="text-align: center">
<asp:Button runat="server" ID="btnConfirmCertify" Text="OK" />
<asp:Button runat="server" ID="btnCancel" Text="Cancel" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
Solution was to get rid of the ConfirmButtonExtender and make my own validation:
function Validate_Click() {
//using asp.net checkbox so have to go this route to get bool
var checked = $('#<%= cbCertify.ClientID %>').is(':checked');
if (checked) {
$('.lblConfirmCertifyError').hide();
return true;
}
else {
$('.lblConfirmCertifyError').show();
return false;
}
}
<asp:Panel runat="server" ID="pnlConfirm" Style="display: none; background-color: White;
border: solid 1px Gray; width: 90%; height: 100%; padding: 10px">
popup text here
<asp:CheckBox runat="server" ID="cbCertify" Text="I Certify" CssClass="cbCertify">
</asp:CheckBox>
<br />
<asp:Label runat="server" ID="lblConfirmCertifyError" Text="Required." ForeColor="Red"
Style="display: none" CssClass="lblConfirmCertifyError"></asp:Label>
<br />
<div style="text-align: center">
<asp:Button runat="server" ID="btnConfirmCertify" Text="OK" CssClass="btnConfirmCertify" OnClientClick="return Validate_Click()" />
<asp:Button runat="server" ID="btnCancel" Text="Cancel" />
<asp:Button runat="server" ID="btnDummy" Text="" Style="display: none" />
</div>
</asp:Panel>
Can any one tell me how can I make divs visible in ASP.NET. I tried to use a panel but it was interfering with other divs. Well, to explain my situation why I am asking is I want to show a form with submit button on a same page and thank you message after submitting it.
Any better suggestions on how can I do it? :)
Well here is code,
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script type="text/javascript">
function Show(moreInfo) {
document.getElementById(btnInfo).style.visibility='hidden';
document.getElementById(moreInfo).style.visible = 'visible';
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.heading
{
text-align: center;
border-style: double;
background-color:#F2A988;
font-family:Sans-Serif;
font-weight:bold;
}
#wrapper {
margin: 0 auto;
width: 400px;
text-align:left;
}
.style1
{
text-align: center;
font-family:Sans-Serif;
}
</style>
</head>
<body style="height: 642px; width: 911px; " id="wrapper">
<form id="form1" runat="server">
<div class="heading">
Sheridan Computer Club - Inquiry Form</div>
<br />
<asp:Calendar ID="Calendar1" runat="server" Font-Names="Arial"></asp:Calendar>
<br />
<asp:Button ID="btnInfo" runat="server" Font-Names="Arial"
style="font-weight: 700"
Text="I'd like to receive more information!" Width="261px" />
<div style="position:relative; top: 0px; left: 0px; width: 463px; height: 188px;">
Show the div</div>
<div id="meeting"
style="position:relative; top: -285px; left: 320px; width: 232px; height: 64px; text-align: center; margin-top: 0px; font-family: Arial; font-weight:bold;">
<br />
<asp:Label ID="lblDate" runat="server"></asp:Label>
<br />
</div>
<div style="width: 308px; position:relative; top: -479px; left: 283px; margin-top: 0px;"
class="style1">
Click Below to find out when
<br />
the club meets next</div>
<div style="position:relative; top: -515px; left: 624px; width: 274px; height: 289px; font-family:Sans-Serif;">
<b>View Members by Program:<br />
<asp:ListBox ID="ListBox1" runat="server" Height="175px" Width="263px">
</asp:ListBox>
</b></div>
<div style="position:relative; top: -739px; left: 346px; width: 192px; height: 32px; text-align: center; margin-top: 0px;">
<asp:Button ID="Button1" runat="server" Text="Next Meeting"
onclick="Button1_Click" />
</div>
</form>
</body>
</html>
You can use runat="server" attribute on that div and set its Visible property on the server side.
<div runat="server" ID="someDiv" >
</div>
You can decide if page should render it in PageLoad or other events.
someDiv.Visible = someCondition;
To make it visible to asp.net server side
<div runat="server" id="mydiv">
</div>
As an alternative to the Panel which generates a div, instead you can use the PlaceHolder control which does not generate div tags
Check this question:
Using Panel or PlaceHolder
You can use asp:Literal like this;
<div>
<asp:Literal runat="server" ID="litHide" Visible="false" />
</div>
And then when a form is submitted change the visbility of this literal like this;
if(litHide.visible==false)
{
litHide.visible = true;
}
this is the simples way and the benefit is that you dont get anything inside the div tag, infact you get just text.