Java Script Give Post back to Client Side Controls

Posted on 2010-11-17
Last Modified: 2012-05-10
Hey Guys, i need to know how to give asp control updates from a java script?

like if i set a value in the java script, it must post back to value to the client side of the contol


I change a label value using a javascript, it changes fine but if i do a post back the label return to default. So i need a way to make sure the javascript writes the values to the client side so when i post back the label remailn the same.
Question by:JCWEBHOST
  • 4
  • 2
  • 2
LVL 20

Expert Comment

ID: 34154167

Try simultaneously loading the label value into a hidden field.

Author Comment

ID: 34154188
how you do that?

Author Comment

ID: 34154265
sorry, how do you do that?
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

LVL 20

Expert Comment

ID: 34154319

Something like:

document.getElementById("lableid").value = document.getElementById("hiddenformfield").value = "Label Text";

Open in new window


Author Comment

ID: 34154362
and how i set the value when a postback is done?
LVL 20

Accepted Solution

ddayx10 earned 500 total points
ID: 34161667
The hidden field doesn't really help you here if you need to retain the value after a postback. It will have the same limitation as the original label did. This can be quite a complex issue for a variety of reasons.

How you intend to cause a postback is a factor. When your JS changes the label's value does a postback always occurr, or is JS potentially changing a whole lot of stuff and then the user is posting back at some point(s)? What is causing the postback? Are there multiple elements that could cause a postback?

ASP.NET has a method for causing postbacks from JS, and since version 2.0 it has security turned on to prevent JS from posting back without proper authorization ( thank the bad hackers for this ).

I'm sure I'm opening a can of worms, but I'll attempt it anyway...refer to the code below(it is put together in its most basic form for readability).

In the code sample below I am using the JS __doPostBack() method to send data from JS to the server, where it is picked up and distributed back to the label in question. This allows me to change something, or pickup on a change made in JS and retain it accross postbacks.

In this sample though, two postbacks are occurring when the button is pressed. The first is when the JS event is fired and that postback occurs. After that happens the button's server-side click event fires and the page is posted back again...kindof undesirable.

So I can elmininate the second postback by returning false  from the JS event ChangeLbl.
<asp:Button ID="Bt1" runat="server" Text="Update" OnClientClick="ChangeLbl(this); return false;" />

The second I do this I will get a big 'ol error message from .NET telling me I now I have an "Invalid Postback Argument or Callback"...nice! This is easy enough to fix. Simply change the security setting for the page and it will work.
<%@ Page Language="VB" AutoEventWireup="false" EnableEventValidation="false" CodeFile="JSViewState.aspx.vb" Inherits="JSViewState" %>

The problem is I now have a guilty conscience for breaking the security of my page. If I can live with that I've solved my problem. If I can't then I have to go through the trouble of registering my postback control with my page so that I can use it in this manner. This would seem to be trivial, but in fact it is a bit of a pain.

For detailed sample see this:

In short if I am doing something simple like tracking one label's text that was changed in JS then this is not so bad, but if I want to track multiple JS elements being changed I am going to have to plan and organize my JS and my server code carefully to pull this off. Usually by the time I get here I start to re-think how I am trying to accomplish something. I might decide AJAX is a good solution, etc.

That may not be the answer you wanted, and someone may have a better idea, but that is my experience with this issue in as small of a nutshell as I can cohesively put it :)

****ASPX PAGE****
<%@ Page Language="VB" AutoEventWireup="false" EnableEventValidation="false" CodeFile="JSViewState.aspx.vb" Inherits="JSViewState" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
		function ChangeLbl(btn)
			var Lb1 = document.getElementById('Lb1');
			Lb1.innerHTML = 'Updated';
    <form id="form1" runat="server">
    <%--NOTE the scriptmanager or another server control that is not a button or a linkbutton is required for this to work--%>
    <asp:ScriptManager ID="sm" runat="server" />
    <asp:Label ID="Lb1" runat="server" />
    <asp:Button ID="Bt1" runat="server" Text="Update" OnClientClick="ChangeLbl(this); return false;" />
Partial Class JSViewState
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim eTarget As String = Request.Params.Get("__EVENTTARGET") 'ID of control that send the __doPostBack
        Dim eArg As String = Request.Params.Get("__EVENTARGUMENT") 'Arguement of __doPostBack method

        'I didn't need to show both above I was just trying to show what is happening more clearly.
        'we are sending our JS updated string through the __EVENTARGUMENT

        If Not String.IsNullOrEmpty(eTarget) And Not String.IsNullOrEmpty(eArg) Then
            Lb1.Text = eArg
        End If
    End Sub
End Class

Open in new window

LVL 20

Expert Comment

ID: 34161672
Should have written an article...

Author Closing Comment

ID: 34172040

Featured Post

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
how can i apply an assert arrayEqual function ? 2 27
How to convert from xls to xlsx using java 7 39
Why doesn't Google directions work? 6 46
where is team.js? 3 25
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question