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>
Related
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
I have two separate pages. One with a HTML page involving JavaScript (bunch of functions etc.) and an .aspx page.
I have some array in html page and I want to send them(using JavaScript) to .aspx to store them into a database.
I have tried hidden field, creating a form etc. All I get is null. How can I pass my arrays to aspx to store them in database later? I can't use jQuery.
function openPopup() {
window.open("Default.aspx", "scrollbars=yes, width=900,height=500,left=430,top=100");
return false;
}
function control() {
var a = JSON.stringify(x);// x and y are my arrays
var b = JSON.stringify(y);
var btnId = '<%= HiddenField1.ClientID%>';
var btnId2 = '<%= HiddenField2.ClientID%>';
document.getElementById(btnId).value = a;
document.getElementById(btnId2).value = b;
}
IN HTML
<button onclick="openPopup()">POP</button> //opens the aspx page
IN ASPX
<form id="form1" runat="server">
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Database" />
<asp:HiddenField ID="HiddenField1" runat="server" />
<asp:HiddenField ID="HiddenField2" runat="server" />
</form>
IN ASPX.CS
protected void Button1_Click(object sender, EventArgs e)
{
Response.Write(HiddenField1);
}
You will need to send the data to the server using AJAX (preferably) or using a traditional form submission (page will be reloaded after submission).
The server cannot access the HTML elements once the page has been rendered in the browser.
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);
}
<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.
Hi
I want to run a javascript function when the page loads. But as my page derives from the master page there is no form . The is my aspx file
<%# Page Title="" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="false"
CodeFile="test3.aspx.vb" Inherits="test3" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
<script language="javascript">
var m_Names = new Array();
function LoadArray() {
PageMethods.Load_Array(onSucceeded, onFailed);
}
function onSucceeded(result, userContext, methodName) {
m_Names = result;
}
function onFailed(error, userContext, methodName) {
alert("An error occurred")
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<asp:TextBox ID="txt_model_code" runat="server"></asp:TextBox><br />
<br />
<input type="button" value="db Function" /><br />
</asp:Content>
I want to run the LoadArray() function initialy when the page loads. This function is calling a pagemethod given in aspx.vb code file..
Partial Class test3
Inherits System.Web.UI.Page
<System.Web.Services.WebMethod()>
Public Shared Function Load_Array() As String()
Dim Model_Name_old As String()()
Dim mod_code As String()
Dim mod_name As String()
Dim cod_upper As Integer
//calling webservice that retunrs a jagged array
Dim ins As New localhost_insert_model.dbModel
Model_Name_old = ins.get_Model_Name("A")
mod_code = Model_Name_old(0)
mod_name = Model_Name_old(1)
Return mod_name
End Function
End Class
So how can i load the javascrip LoadArray() function onPageLoad in this scenario??
This one should work
<script language="javascript">
var m_Names = new Array();
window.onload = function ()
{
LoadArray();
}
.....your functions
</script>
I think you can use $document.ready() from jQuery.
If you don't need the whole page to have loaded completely you could just call it after you created the functions?
var m_Names = new Array();
function loadArray() {
PageMethods.Load_Array(onSucceeded, onFailed);
}
function onSucceeded(result, userContext, methodName) {
m_Names = result;
}
function onFailed(error, userContext, methodName) {
alert("An error occurred")
}
loadArray();
You can use this code:
Sys.Application.add_load(function(e) { LoadArray(); });
Is its name suggest, this is a page_load handler, which pretty much duplicates in functionality is server-side counter part.