We Keep Coding

JavaScript not getting triggered

I have problem with javascript. I have a master page (Page1.master) and Aspx page (Page2.aspx) when i redirecting from Page1.master to Page2.aspx, my Javascript function not getting triggered.
I have ScriptManager in both master and aspx page
In my master page, i have like this
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
In my aspx page, i have UpdatePanel in addition to ScriptManager.
It looks like
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="upp" runat="server" UpdateMode="Always">
//other controls
</asp:UpdatePanel>
Here My javascript function:
ClientScriptManager cs = Page.ClientScript;
Type cstype = this.GetType();
string csname = "MyScript";
if (!cs.IsClientScriptBlockRegistered(cstype, csname))
{
System.Text.StringBuilder js = new System.Text.StringBuilder();
js.Append("<script language=JavaScript>");
js.Append("function closeWindow() {");
js.Append("if(myWindow == null) {");
js.Append("var myWindow = window.open('', 'myWindow'); }");
js.Append("myWindow.close();");
js.Append("}");
js.Append("</script>");
cs.RegisterClientScriptBlock(cstype, csname, js.ToString());
}
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "CloseWindowScript", "closeWindow();", true);
Can anyone help me to make it work..
Thanks

Change Orientation Devexpress MenuBar control on window resize using javascript

I have a Devexpress MenuBar control with multiple submenus. Where i want to change menubar Orientation dynamically using Javascript. What i tries so far is:
<script type="text/javascript">
window.onresize = function () {
if (window.innerWidth <= 1100) {
RASPxMenuViewSetting.SetOrientation('Vertical');
}
}
</script>
Where my menu code is:
<dx:ASPxMenu ID="ASPxMenuViewSetting" runat="server" EnableTheming="True" ClientInstanceName="RASPxMenuViewSetting">
<Items>//contains Submenus </Items>
</dx:ASPxMenu>
Where I got an error on debugging
Uncaught TypeError: RASPxMenuViewSetting.SetOrientation is not a function
Could you please help on this.

I got the answer from Devexpress team as follows which is worked for me:
Javascript
<script type="text/javascript">
function OnControlsInitialized(s, e) {
ASPxClientUtils.AttachEventToElement(window, "resize", function (evt) {
if (cp.InCallback())
return;
if (window.innerWidth <= 1100) {
if (RASPxMenuViewSetting.cpOrientation != "Vertical")
cp.PerformCallback("Vertical");
}
else
if (RASPxMenuViewSetting.cpOrientation != "Horizontal")
cp.PerformCallback("Horizontal");
});
}
</script>
ASPX file
<dx:ASPxCallbackPanel ID="ASPxCallbackPanel1" runat="server" Width="200px" ClientInstanceName="cp" OnCallback="ASPxCallbackPanel1_Callback">
<PanelCollection>
<dx:PanelContent runat="server">
<dx:ASPxMenu ID="ASPxMenuViewSetting" runat="server" ClientInstanceName="RASPxMenuViewSetting" EnableTheming="True" ItemWrap="false">
<Items>
<dx:MenuItem Text="Item 1">
</dx:MenuItem>
<dx:MenuItem Text="Item 2">
</dx:MenuItem>
<dx:MenuItem Text="Item 3">
</dx:MenuItem>
<dx:MenuItem Text="Item 4">
</dx:MenuItem>
</Items>
</dx:ASPxMenu>
</dx:PanelContent>
</PanelCollection>
</dx:ASPxCallbackPanel>
<dx:ASPxGlobalEvents ID="ASPxGlobalEvents1" runat="server">
<ClientSideEvents ControlsInitialized="OnControlsInitialized" />
</dx:ASPxGlobalEvents>
and also need to change cs file as below:
protected void ASPxCallbackPanel1_Callback(object sender, DevExpress.Web.CallbackEventArgsBase e)
{
if (e.Parameter == "Vertical")
ASPxMenuViewSetting.Orientation = Orientation.Vertical;
else
ASPxMenuViewSetting.Orientation = Orientation.Horizontal;
ASPxMenuViewSetting.JSProperties["cpOrientation"] = e.Parameter;
}

Can't get value of asp:textbox on external javascript file

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);
}

get_postBackElement() is always undefined

<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.

Using ASP.NET Variable in Javascript inside UpdatePanel

I have a javascript function inside UpdatePanel. The variable should be updated on UpdatePanel partial postback.
Using the below code, the javascript variable jsonStringASPX will always have the initial value, regardless of what JsonString ASP.NET variable has.
<script type="text/javascript">
function pageLoad(){
LoadExpenseList();
}
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
<ContentTemplate>
<script type="text/javascript">
function LoadExpenseList() {
var jsonStringASPX = <%= JsonString %>;
var jsonHeaderStringASPX = <%= JsonHeaderString %>;
//Works with the Strings
}
</script>
</ContentTemplate>
</asp:UpdatePanel>