I am sorry I am repeating this question. Rather, I am having to repeat it. The last time I posted this, I dint get an answer. I have googled for more than 3 hrs, dint find an answer. Heres the html for the linkbutton and the modal popup. The link button is inside/on a tab panel and auto postback is set to true.
<asp:LinkButton ID="lnkAddNewAddress" runat="server" OnClick="lnkAddNewAddress_Click">Click Here To Add New Address</asp:LinkButton>
<asp:ModalPopupExtender ID="lnkAddNewAddress_ModalPopupExtender" runat="server" BackgroundCssClass="modalBackground"
DynamicServicePath="" Enabled="True" PopupControlID="pnlMyAddressBook" TargetControlID="lnkAddNewAddress"
ViewStateMode="Enabled" >
</asp:ModalPopupExtender>
I want the clickevent of the linkbutton to fire which is not happening. However clicking on the link does open the modal popup extender (which is also something I want)... How do I get into the click event. I know that a postback is being avoided here because of the modal popup probably...but I dont the solution for it....
The code on save button:
if(hdnfld.Value.ToString()!=null)
{
if(hdnfld.Value.ToString()=="Save")
{
SaveNewAddress();
}
else
{
UpdateAddress();
}
<%# Page StylesheetTheme="" Title="" Language="C#" MasterPageFile="~/Site.Master"
AutoEventWireup="true" CodeBehind="frmMyAccountMyProfile.aspx.cs" Inherits="WebApplication1.frmMyAccountMyProfile" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script type="text/javascript">
function CheckType(type)
{
document.getElementById("hdnfld").value = type;
alert(document.getElementById("hdnfld").value);
return false;
}
</script>
<link href="Styles/myStyleSheet.css" rel="stylesheet" type="text/css" />
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div class="divwrap">
<table style="width: 100%; margin-right: 0px;">
<tr>.........
<td>
<asp:LinkButton ID="lnkAddNewAddress" runat="server" OnClientClick="return CheckType('Save');">Click Here To Add New Address</asp:LinkButton>
<asp:HiddenField ID="hdnfld" runat="server" />
<asp:ModalPopupExtender ID="lnkAddNewAddress_ModalPopupExtender" runat="server" BackgroundCssClass="modalBackground" DynamicServicePath="" Enabled="True" PopupControlID="pnlMyAddressBook" TargetControlID="lnkAddNewAddress"
ViewStateMode="Enabled">
</asp:ModalPopupExtender>
...........
<asp:Button ID="btnEdit" runat="server" CssClass="roundcorner btn" OnClick="btnEdit_Click" OnClientClick="return CheckType('Edit');" Text="Edit" />
<asp:Panel ID="pnlMyAddressBook" runat="server" BackColor="White" CssClass="roundcorner">
you can use hidden field instead of viewstate, if you really want to retain some value at code behind. You can access hidden field at client side as well as in code behind too.
<asp:LinkButton ID="lnkAddNewAddress" runat="server" OnClientClick="return CheckType('save');">Click Here To Add New Address</asp:LinkButton>
<asp:HiddenField ID="hdf_type" runat="server" />
Javascript code
function CheckType(type) {
document.getElementById("hdf_type").value = type;
return false;
}
Access value in code behind when clicked on save button, and perform your action save or update according to value in hidden field.
hdf_type.Value.ToString();
MORE HELP FOR YOU
HTML FILE SHOULD LOOK LIKE THIS
below i'm posting the whole code which is working fine for me.
<head runat="server">
<title></title>
<script type="text/javascript">
function CheckType(type) {
document.getElementById("hdf_type").value = type;
alert(document.getElementById("hdf_type").value);
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:LinkButton ID="lnkAddNewAddress" runat="server" OnClientClick="return CheckType('save');">Click Here To Add New Address</asp:LinkButton>
<asp:Button ID="btn" runat="server" OnClientClick="return CheckType('edit');" Text="Click Here To Add New Address" />
<asp:ModalPopupExtender ID="lnkAddNewAddress_ModalPopupExtender" runat="server" BackgroundCssClass="modalBackground"
DynamicServicePath="" Enabled="True" PopupControlID="pnlMyAddressBook" TargetControlID="lnkAddNewAddress"
ViewStateMode="Enabled">
</asp:ModalPopupExtender>
<div id="pnlMyAddressBook" style="height: 100px; width: 100px; display: none; background-color: Gray">
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /><br />
</div>
<asp:HiddenField ID="hdf_type" runat="server" />
</div>
</form>
getting value at code behind:
Try this:
<asp:LinkButton ID="lnkAddNewAddress" runat="server" OnClick="lnkAddNewAddress_Click">Click Here To Add New Address</asp:LinkButton>
<asp:ModalPopupExtender ID="lnkAddNewAddress_ModalPopupExtender" runat="server" BackgroundCssClass="modalBackground"
DynamicServicePath="" Enabled="True" PopupControlID="pnlMyAddressBook" TargetControlID="btnHidden">
</asp:ModalPopupExtender>
<asp:Button ID="btnHidden" runat="server" style="Display:none;" Text="Button"/>
In Code behind:
protected void lnkAddNewAddress_Click(object sender, EventArgs e)
{
lnkAddNewAddress_ModalPopupExtender.Show();
}
Related
The ModalPopupExtender wires the btnCancel button to trigger the a popup an UpdatePanel. The UpdatePanel is a cancel confirmation which contains a Yes button and a No button. After clicking the No button, the panel is closed but the btnCancel no longer trigger the popup when being clicked again. The Yes button works and triggers the server side YesButton_Click event. Here is my code. Thanks for your help.
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />
<asp:Button ID="btnCancel" Text="Cancel Task" runat="server" ToolTip="Cancel the displayed task and remove it from Tracker" CausesValidation="false" />
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnCancel"
PopupControlID="ConfirmationPanel" BackgroundCssClass="modalBackground" />
<asp:UpdatePanel ID="upd_yes_no" runat="server">
<ContentTemplate>
<asp:Panel ID="ConfirmationPanel" runat="server" CssClass="modalPopup" Style="display: none">
<div class="modalPopup-text">
Are you sure you want to cancel this task?<br />
<br />
<asp:Button ID="YesButton" runat="server" Text="Yes" CommandArgument="Yes" OnClick="YesButton_Click" />
<asp:Button ID="NoButton" runat="server" Text="No" CommandArgument="No" />
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
I'm not 100% positive but it appears that Extender and Extended controls must reside in the same UpdatePanel. So if you move your Cancel button and ModalPopupExtender control inside the UpdatePanel, it should work as expected.
<ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />
<asp:UpdatePanel ID="upd_yes_no" runat="server">
<ContentTemplate>
<span id="buttons">
<asp:Button ID="btnUndo" Text="Undo Edit" CommandArgument="undo" runat="server"
OnClick="undo" CausesValidation="false" />
<asp:Button ID="btnNewTask" Text="New Task" CommandArgument="newTask" runat="server"
ToolTip="Unchange current and create new task"
OnClick="NewTask" CausesValidation="false" />
<asp:Button ID="btnCancel" Text="Cancel Task" runat="server"
ToolTip="Cancel the displayed task and remove it from Tracker" CausesValidation="false" />
</span>
<ajax:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnCancel" PopupControlID="ConfirmationPanel" BackgroundCssClass="modalBackground" />
<asp:Panel ID="ConfirmationPanel" runat="server" CssClass="modalPopup" Style="display: none">
<div class="modalPopup-text">
Are you sure you want to cancel this task?
<br />
<br />
<asp:Button ID="YesButton" runat="server" Text="Yes" CommandArgument="Yes" OnClick="YesButton_Click" />
<asp:Button ID="NoButton" runat="server" Text="No" CommandArgument="No" />
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
Here I try to update the Label value base on click event of Linkbutton which is inside the repeater control. Scenario is When I click on Linkbutton same time Modal popup open and the Label text also change.
Below is my code.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="ModalPopupUpdatePanel.aspx.cs"
Inherits="ModalPopupUpdatePanel" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!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>ModalPopups and UpdatePanels</title>
<link rel="stylesheet" href="StyleSheet.css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="scriptMgr1">
</asp:ScriptManager>
<div style="width: 300px; left: 100px">
<div >
<asp:Label ID="Label2" runat="server">Update Panel that contains a ModalPopup and its associated PopupPanel inside it</asp:Label>
<asp:UpdatePanel runat="server" ID="updatePanel2" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<br />
<asp:Repeater runat="server" ID="btnresr" DataSourceID="SqlDataSource1">
<ItemTemplate>
<asp:LinkButton runat="server" ID="text" OnClick="Button5_Click" Text=' <%# DataBinder.Eval(Container.DataItem, "AgentName")%>' BackColor="Red"></asp:LinkButton>
</ItemTemplate>
</asp:Repeater>
<asp:Button runat="server" ID="button2" Text="Launch Modal Popup2" style="display:none"/>
<ajaxToolkit:ModalPopupExtender runat="server" ID="modalPopupExtender2" TargetControlID="button2"
PopupControlID="modalPanel2" OkControlID="okBtn2" CancelControlID="cancelBtn2"
BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:PTBWConnectionString %>"
SelectCommand="SELECT [AgentName], [AgentID] FROM [AgentMaster]">
</asp:SqlDataSource>
<asp:Panel runat="server" ID="modalPanel2" BackColor="AliceBlue" Style="display: none">
<asp:UpdatePanel runat="server" ID="updatePanel4" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:Label runat="server" ID="label5" ></asp:Label>
<asp:Button runat="server" ID="postbackBtn" Text="Click to Cause postback" OnClick="postbackBtn_Click" /><br />
<asp:Button runat="server" ID="cancelBtn2" Text="OK" />
<asp:LinkButton runat="server" ID="okBtn2" Text="Cancel" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</form>
</body>
</html>
and Code behind
using System;
using System.Web.UI.WebControls;
public partial class ModalPopupUpdatePanel : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void updateLabel_Click(object sender, EventArgs e)
{
}
protected void postbackBtn_Click(object sender, EventArgs e)
{
label5.Text = "After Postback";
}
protected void Button5_Click(object sender, EventArgs e)
{
LinkButton l = (LinkButton)sender;
label5.Text = "This is before postback,saroop";
modalPopupExtender2.Show();
}
}
I am block here please help me..Is there any Jquery way then also please here me
That is because the lable5 is not avaiable like that, it is nested inside the RepeaterItem.
Can you try this.
LinkButton l = (LinkButton)sender;
RepeaterItem rpt = (RepeaterItem)l.Parent();
Label label5 = (Label)rpt.FindControl("label5");
label5.Text = "This is before postback,saroop";
modalPopupExtender2.Show();
I have got *.ascx control with Ckeditor embedded by using CKEditor's control for ASP.NET (v 3.6.4). I have also ModalPopup control from AjaxControolToolkit4.5, attached to Link Button. When clicked, it shows panels with Radio Button list filled in with the aid of some code behind logic.
How should I change my *.ascx control to have a CKEditor'a plugin button in toolbar, firing this ModalPopup?
Code (not working):
<%# Control Language="C#" AutoEventWireup="true" CodeFile="CKEditorWithModalPopup.ascx.cs" Inherits="Controls_CKEditorWithModalPopup" %>
<%# Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<script type="text/javascript">
$(function () {
var a = {
exec: function (editor) {
javascript: __doPostBack('ctl03$LinkButton1', '') // explicite id for test
}
},
b = 'modalPopup';
CKEDITOR.plugins.add(b, {
init: function (editor) {
editor.addCommand(b, a);
editor.ui.addButton("modalPopup", {
label: 'Modal Popup',
icon: "~/Images/modal_popup.png",
command: b
});
}
});
});
</script>
<CKEditor:CKEditorControl ID="CKEditor1" BasePath="~/ckeditor" Toolbar="Basic" runat="server" />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="LinkButton1"
PopupControlID="Panel1" BackgroundCssClass="modalBackground" OkControlID="OkButton"
CancelControlID="CancelButton" DropShadow="true" PopupDragHandleControlID="Panel3" />
<asp:LinkButton ID="LinkButton1" runat="server" Text="Click here to change the paragraph style" />
<asp:Panel ID="Panel1" runat="server" Style="display: none" CssClass="modalPopup">
<asp:Panel ID="Panel3" runat="server" Style="cursor: move; background-color: #DDDDDD;
border: solid 1px Gray; color: Black">
<div>
<p>
Choose the phrase to insert:</p>
</div>
</asp:Panel>
<asp:RadioButtonList ID="rbList" runat="server" />
<p style="text-align: center;">
<asp:Button ID="OkButton" runat="server" Text="OK" />
<asp:Button ID="CancelButton" runat="server" Text="Cancel" />
</p>
</asp:Panel>
I found better solution for CKEditor modal popup functionality - I decided to write it as CKEditor plugin. It is much easier and maintainable approach.
Creating a CKEditor Plugin with a Custom Dialog Window
The purpose of this answer is to close the old question.
I have a requirement to show edit panel as second row of a datagrid upon addnew link click. for this I have taken a div which has set display:none. I am able to show as second row upon addnew link click. now the actual problem starts.
this div got a text box which is tied to calendar extender to behave as a claendar upon textbox click. but calendar is not showing up when the html of invisible div is inserted as second row of grid. please let me know if anyone need code for better understanding the problem. any help will be appreciated.
In your gridview put a templatedfield instead of a div. make that templated field hold a textbox and calender extender.
<asp:GridView ID="GridView1" runat="server">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="textbox1" runat="server"></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtender1" TargetControlID="textbox1" runat="server">
</asp:CalendarExtender>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
but If you want it when your inserting you should put
<asp:GridView ID="GridView1" runat="server">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="textbox1" runat="server"></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtender1" TargetControlID="textbox1" runat="server">
</asp:CalendarExtender>
</ItemTemplate>
<InsertItemTemplate>
<asp:TextBox ID="textbox1" runat="server"></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtender1" TargetControlID="textbox1" runat="server">
</asp:CalendarExtender>
</InsertItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
I hope this helps.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AjaxControlToolkit" %>
<!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></title>
<script src="jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
function AddCalendars()
{
//The last parameter should be the TargetControl's id. If you use "TextBox1", the TextBox1 would be associated.
var elem = $(".deneme");
for (var a = 0; a < elem.length; a++)
{
if ($find("CalendarExtender" + elem[a].id))
{
$find("CalendarExtender" + elem[a].id).dispose();
}
}
for (var i = 0; i < elem.length; i++)
{
$create(AjaxControlToolkit.CalendarBehavior, { "id": "CalendarExtender" + elem[i].id }, null, null, elem[i]);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<%--the dummy calendar which is used to download the related script file.--%>
<asp:TextBox ID="dummyTextBox" runat="server" Style="display: none"></asp:TextBox>
<AjaxControlToolkit:CalendarExtender ID="dummyCalendarExtender" runat="server" Enabled="True"
TargetControlID="dummyTextBox">
</AjaxControlToolkit:CalendarExtender>
<%--the dummy calendar which is used to download the related script file.--%>
<asp:Button ID="Button1" OnClientClick="AddCalendars();return false" runat="server"
Text="CreateCalendarFromClient" /><br />
input:<input id="deneme1" type="text" class="deneme" /><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
TextBox:
<asp:TextBox ID="deneme2" runat="server" cssclass="deneme" ClientIDMode="Static"></asp:TextBox>
</div>
</form>
</body>
</html>
I Have a TextBox outside the UpdatePanel and a Button inside the Updatepanel When i click on the Button it show value in TextBox.
I Have Write Following Code.
<%# Register TagPrefix="AjaxToolKit" Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit" %>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"
EnablePageMethods="true" />
<asp:TextBox ID="TextBox5" runat="server" />
<asp:UpdatePanel runat="server" ID="Up1">
<ContentTemplate>
<asp:Button ID="btn" runat="server" onclick="btn_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
----------Code Behind---------
protected void btn_Click(object sender, EventArgs e)
{
TextBox5.Text = "20000";
}
Your textbox value can't be updated untill you put it in an update panel.
<ContentTemplate>
<asp:TextBox ID="TextBox5" runat="server" />
<asp:Button ID="btn" runat="server" onclick="btn_Click" />
</ContentTemplate>
OR, it would be better if you register a trigger of the button and pull your button out from your update, like...
<asp:UpdatePanel runat="server" ID="upnl" UpdateMode="Conditional" >
<ContentTemplate>
<asp:TextBox ID="TextBox5" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btn" EventName="Click" />
</Triggers>
</asp:UpdatePanel>