<asp:ScriptManager ID="ScriptManager1" ScriptMode="Release" runat="server">
</asp:ScriptManager>
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
var elem = args.get_postBackElement();
alert("begin " + elem.value);
}
function EndRequestHandler(sender, args) {
alert("end request handler");
}
</script>
This is my simple attempt to retrieve the postback element, triggered from my UpdatePanel. My update panel looks like this:
<asp:UpdatePanel ID="UpdatePanel_Project" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:DropDownList ID="DropDownList_Project" runat="server">
</asp:DropDownList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList_Customer" />
</Triggers>
</asp:UpdatePanel>
I believe I have did everything correctly...
Any ideas?
You have to set the ClientIDMode property value of the control (the DropDownList_Customer drop down list in this case) to AutoID. Please view my reply here.
What is your postback trigger ? This control seems to be missing DropDownList_Customer
<asp:AsyncPostBackTrigger ControlID="DropDownList_Customer" />
I finally solved this pain, here's my solution.
Basically we just need to override Microsoft's _uniqueIDToClientID function so it doesn't ignore our Static client Ids on postback elements.
You'll just need to add the following code at the bottom of your page.
if (Sys.WebForms.PageRequestManager) {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm._uniqueIDToClientID = function (uniqueID) {
var clientID = uniqueID.replace(/\$/g, "_");
if (document.getElementById(clientID)) {
return clientID;
}
var lastDollar = uniqueID.lastIndexOf("$");
if (lastDollar === -1) {
return clientID;
}
if (lastDollar+1 > uniqueID.length) {
return clientID;
}
var staticID = uniqueID.slice(lastDollar + 1);
return document.getElementById(staticID) ? staticID : clientID;
};
}
Now, get_postBackElement() in your BeginRequestHandler will no longer be undefined!
Just make sure our code is executed after Microsoft's MicrosoftAjaxWebForms.js because we are overriding its _uniqueIDToClientID function.
Note: My function always returns the default WebForms ClientID if the element exists on the page. Only if the element cannot be found on
the page, does it check to see if an element with a static ID exists
on the page. If it exists, the staticID is used, otherwise it
defaults back to the default WebForms ClientID.
Related
I am getting an error when I try to post data from an asp textbox to the database. The reason for this is that the text is html due to using an html text editor.
However when I try to encode the html I get the following error: BC30451: 'Bind' is not declared. It may be inaccessible due to its protection level.
Below is the asp code I have for the textbox that's causing the error.
<asp:TextBox ID="TxtBx" runat="server" Text='<%# Server.HtmlEncode(Bind("Details").ToString())%>'/>
I'm sure it's something small but can't resolve it. I have also tried the below with the same outcome:
Text='<%# System.Web.HttpUtility.HtmlEncode(Bind("Details"))%>'
I have also attempted to create my own function in the backend to resolve this with the following asp and vb:
Text='<%# encodeIT(Eval("Details"))%>'
Public Function encodeIT(Details As String) As String
Return HttpUtility.HtmlEncode(Details)
End Function
Any help would be greatly appreciated.
Update 1
I have attempted a client solution but still doesn't appear to be working, not sure if I've missed something, been testing in a basic web project to avoid any compatibility issues that could crop up. I have removed the databind for the purpose of this test as ASP throws the same error regardless.
ASP
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<script src="../Scripts/tinymce/tinymce.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
tinymce.init({
menubar: false,
width: 800,
height: 250,
selector: "textarea"
});
var decodeStuff = (function () {
// preventing any overhead from creating more than one instance of the function
var element = document.createElement('div');
function decodeHtml(str) {
if (str && typeof str === 'string') {
// strip script and html tags
str = str.replace(/<script>[^>]*>([\S\s]*?)<\/script>/gmi, '');
str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '');
element.innerHTML = str;
str = element.textContent;
element.textContent = '';
}
return str;
}
return decodeStuff;
});
var text = decodeStuff('TxtBx');
});
</script>
<asp:Panel runat="server" ID="panel1">
<table>
<tr>
<td>
<asp:TextBox ID="TxtBx" runat="server" Width="100%" TextMode="MultiLine" Rows="20"></asp:TextBox>
</td>
</tr>
Code behind (VB) where I'm trying to call the function on post back.
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If DDL.Text <> "Select" Then
TxtBx.Text = DDL.Text``
End If
Page.ClientScript.RegisterClientScriptBlock(Page.GetType(), "TxtBx", "decodeHtml();", True)
End Sub
If this is only for internal use go into the web config file and within system.web you'll find httpRunTime and Pages add attributes requestValidationMode="2.0" and validateRequest="false" respectively.
Code:
<httpRuntime requestValidationMode="2.0"/>
<pages validateRequest="false"/>
I have a asp:Button, I want to call javascript function before ConfirmButtonExtender takes action. But my javascript code is not working. Please tell me how to use ConfirmButtonExtender with javascript.
<asp:Button ID="UpdatebuttonUpdaterID" runat="server" Text="Update" CssClass="create_role_button_in"
OnClick="UpdatebuttonUpdaterID_Click" OnClientClick="return OnClientClickUpdate();"/>
<ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender3" runat="server" TargetControlID="UpdatebuttonUpdaterID"
ConfirmText="Do you want to send this Conversion Rate for Approval?" ConfirmOnFormSubmit="true" OnClientCancel="CancelClick"/>
This is my javascript code.
function OnClientClickUpdate() {
alert("hello");
}
You can use the Behavior property of the ConfirmButtonExtender and add the javascript function to it, this way the javascript function will be called before the ConfirmText property of the ConfirmButtonExtender.
Modify your markup to the following:
<asp:Button ID="UpdatebuttonUpdaterID" runat="server" Text="Update" CssClass="create_role_button_in"
OnClick="UpdatebuttonUpdaterID_Click" OnClientClick="return OnClientClickUpdate();"/>
<ajaxToolkit:ConfirmButtonExtender BehaviorID="confirmBehavior" ID="ConfirmButtonExtender3" runat="server" TargetControlID="UpdatebuttonUpdaterID"
ConfirmText="Do you want to send this Conversion Rate for Approval?" ConfirmOnFormSubmit="true" OnClientCancel="CancelClick"/>
<script type="text/ecmascript">
Sys.Application.add_load(wireEvents);
function wireEvents() {
var behavior = $find("confirmBehavior");
behavior.add_showing(OnClientClickUpdate);
}
function OnClientClickUpdate() {
alert("hello");
}
</script>
Hope it helps, source for this answer Here.
You can give up using the confirm extender (unlees you really need it) and use javascript:
function OnClientClickUpdate()
{
alert("first click");
//do some stuff
return confirm("are you sure?");
}
here is example:
abcd.aspx
<asp:TextBox ID="txtFName" runat="server" ></asp:TextBox>
<asp:Button ID="btnLogin" runat="server" Text="Login"
onclick="btnLogin_Click" OnClientClick = "loginAlert()" />
javascriptfile.js
function loginAlert() {
var name = document.getElementById('<% txtFName.ClientID %>').value;
alert(name);
}
link to javascript file on .aspx page
<script src="../../JSfiles/javascriptfile.js" type="text/javascript"></script>
here name is not appear on popup box.
You can't use code nuggets (<% and %>) inside normal files (like your javascriptfile.js) since they're not interpreted by ASP.NET in any way. What you could do is to pass the Id of the text-box to a function:
function loginAlert(ctrl) {
var name = document.getElementById(ctrl).value;
alert(name);
}
Then the markup will look like the following:
<asp:Button ID="btnLogin" runat="server" Text="Login"
OnClick="btnLogin_Click" OnClientClick="loginAlert('<%=txtFName.ClientID%>')" />
UPDATE
I didn't pay attention to the fact that construct like <%=...%> don't work in server-side control declarations (because they're basically converted to Response.Write statements when the page is compiled). There're at least two ways to solve this problem:
You can make the reference to the DOM element for the name text-box globally available. Your markup will look like the following:
<script type="text/javascript">
var loginNameId = '<%=txtFName.ClientID%>';
</script>
<asp:Button ID="btnLogin" runat="server" Text="Login"
OnClick="btnLogin_Click" OnClientClick="loginAlert()" />
And your loginAlert will look like the following:
function loginAlert() {
var name = document.getElementById(loginNameId).value;
alert(name);
}
I personally don't like this solution since you pollute the global namespace with variables and it's not very elegant in general.
Alternatively you can use data attributes together with ASP.NET data binding.
Markup:
<asp:Button ID="btnLogin" data-name='<%# txtFName.ClientID %>' runat="server" Text="Login"
OnClick="btnLogin_Click" OnClientClick="loginAlert(this)" />
JavaScript:
function loginAlert(ctrl) {
var name = document.getElementById(ctrl.readAttribute('data-name')).value;
alert(name);
}
Code-behind:
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
DataBind();
}
The javascript file is not served by the ASP.Net parser. Thus, the <% %> is ignored and output as is.
The simpliest way is to provide the ID as parameter:
<asp:TextBox ID="txtFName" runat="server" ></asp:TextBox>
<asp:Button ID="btnLogin" runat="server" Text="Login"
onclick="btnLogin_Click" />
code behind :
btnLogin.OnClientClick = string.Format("loginAlert('{0}')", txtFName.ClientID);
and in the js file:
function loginAlert(txtId) {
var name = document.getElementById(txtId).value;
alert(name);
}
Markup <% %> wont work in JS files. If you put it on aspx page inside <script type='text/javascript'>...</script> then it will work.
Update:
If you want to get client id, then you can register it from code behind in a variable, as:
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "JsVariables", "var txtboxClientId='" + txtFName.ClientID + "';", true);
and in Js file use:
function loginAlert() {
var name = document.getElementById(txtboxClientId).value;
alert(name);
}
I have the following source in aspx:
<div>
<asp:HiddenField ID="hidValue" runat="server" />
<asp:Button runat="server" ID="hidButton" OnClick="hidButton_Click" />
<script type="text/javascript">
function ExtendPanel(PanelNumber) {
var hidValue = document.getElementById('<%=hidValue.ClientID %>');
hidValue.value = PanelNumber;
document.getElementById('<%=hidButton.ClientID%>').fireEvent("onclick");
}
</script>
</div>
In my code behind, I have the following C# function declared:
protected void hidButton_Click(object sender, EventArgs e)
{
int PanelNumber = int.Parse(hidValue.Value);
... do something with PanelNumber ...
}
When I click on the button using the mouse, "hidButton_Click" function is normally executed.
However, when the javascript function ExtendPanel(PanelNumber) is executed, the click event seems to be fired, but the function is not executed.
Replace this
document.getElementById('<%=hidButton.ClientID%>').fireEvent("onclick");
with
__doPostBack('hidButton','OnClick');
try this
document.getElementById('<%=hidButton.ClientID%>').click();
Try this one below
$('#<%=hidButton.ClientID%>').click();
I got the same issues and resolved to put
OnClientClick="javascript:return true;"
I have a User Control and a Content Page. In the Content Page, I have a RadDockLayout control inside Update panel like below. I have an Image button, Once user swaps the position of RadDock by Drag Drop. User presses save button to save the order in database.
<asp:updatepanel id="UpdatePanel1" runat="server">
<ContentTemplate>
<telerik:RadDockLayout runat="server" OnLoadDockLayout="RadDockLayout1_LoadDockLayout"
ID="RadDockLayout1" OnSaveDockLayout="RadDockLayout1_SaveDockLayout">
<telerik:RadDockZone runat="server" Orientation="Horizontal" ID="HealthZone" Visible="false"
BorderStyle="None" Style="margin: 0;">
</telerik:RadDockZone>
<telerik:RadDockZone runat="server" Orientation="Horizontal" ID="RadDockZone1" BorderStyle="None"
Style="margin: 0; width:540px;">
</telerik:RadDockZone>
<telerik:RadDockZone runat="server" Orientation="Horizontal" ID="AdZone" Visible="false"
BorderStyle="None" Style="margin: 0;" Width="324px">
</telerik:RadDockZone>
</telerik:RadDockLayout>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="imgsave" EventName="Click" />
</Triggers>
</asp:updatepanel>
During the save process, I call another function. which is also under User Control.
public void RePopulateOverview(UserControl overviewuc)
{
RePopulated = true;
CurrentDockStates.Clear();
RadAjaxManager AjaxManager = RadAjaxManager.GetCurrent(this.Page);
AjaxManager.AjaxSettings.Clear();
AjaxManager.AjaxSettings.AddAjaxSetting(AjaxManager, overviewuc);
//InitiateAjaxRequest
RadScriptManager.RegisterStartupScript(this.UpdatePanel1,
this.GetType(), "OverviewReLoadScript" +
Guid.NewGuid().ToString().Replace("-", "a"),
"javascript:InitiateAjaxRequest();", true);
}
and below is the corresponding javaScript Function like below.
<script type="text/javascript">
function InitiateAjaxRequest() {
if ($find("<%= Telerik.Web.UI.RadAjaxManager.GetCurrent(this.Page).ClientID %>") != null)
$find("<%= Telerik.Web.UI.RadAjaxManager.GetCurrent(this.Page).ClientID %>").ajaxRequest();
else {
alert("AjaxManager not found..." + $find("<%= Telerik.Web.UI.RadAjaxManager.GetCurrent(this.Page).ClientID %>"));
}
}
</script>
My Issue is When I presses Save Button second time it crashes and Error Message is below.
AjaxManager not found...null
It should be like this.
var ID;
function InitiateAjaxRequest() {
if (ID == null) {
ID = $find("<%= Telerik.Web.UI.RadAjaxManager.GetCurrent(this.Page).ClientID %>");
ID.ajaxRequest();
}
else
ID.ajaxRequest();
}
Try this as a work-around:
<script type="text/javascript">
var ajaxMgrInstance = null;
function InitiateAjaxRequest() {
if (ajaxMgrInstance == null) {
ajaxMgrInstance == $find("<%= myRadAjaxManager.ClientID %>");
}
if (ajaxMgrInstance != null) {
ajaxMgrInstance.ajaxRequest();
}
else {
alert("AjaxManager not found..." + "<%= myRadAjaxManager.ClientID %>");
}
}
</script>
Meanwhile I'll try to better locate the root cause of the issue.
EDIT: Updated $find call to match syntax of Telerik's API documentation.