ASP.Net How do I execute a dynamic JavaScript and prevent a postback

Question

I have and ASP button and 2 Labels.

<asp:Button runat="server" ID="btnHide" />
<asp:Label runat="server" ID="lblName"></asp:Label>
<asp:Label runat="server" ID="lblPosition"></asp:Label>

I have created a dynamic JS script.

string jsbtnHide = @"document.getElementByID('" + lblName.ClientID + @"').value = '';
document.getElementByID('" + lblPosition.ClientID + @"').style.display = 'none';";

I assign the script to the button. I've tried both "OnClick" and "OnClientClick".

btnHide.Attributes.Add("OnClick", jsbtnHide);

However I cannot get the script to execute successfully and without a postback. I've tried adding OnClientClick="return false;" both dynamically and to the ascx file. Dynamically seems to be ignored, though it appears correct in FireBug. OnClick doesn't seem to prevent the Postback. When the script does run, lblName doesn't change to '', haven't got this to work once.

What am I doing wrong? I've been at this for days :(

take a look at this link bytes.com/topic/asp-net/insights/… — Glory Raj
– Glory Raj, Commented Nov 6, 2011 at 10:17

DeveloperX · Accepted Answer · 2011-11-06 10:26:01Z

1

You can use a good trick just change your click code to this

string jsbtnHide = @"document.getElementByID('" + lblName.ClientID + @"').value = '';
document.getElementByID('" + lblPosition.ClientID + @"').style.display = 'none';return;";

add return to end of the code preventing from calling postback event

answered Nov 6, 2011 at 10:26

DeveloperX

4,69319 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1032037 Over a year ago

DevX, thanks for your reply. I've tried adding both "return;" and "return false;" to the script and neither worked. From what I understand the "return" statement must be added to the OnClientClick event to prevent the postback. In testing this also seems to be correct. Problem is, that by doing this, it also prevents the OnClick event being fired and thus the JS is never run. JS dynamically added to the OnClientClick event seems to be ignored, including the "return" statment. Vaibhav - thanks for your reply. I am trying now.

Vaibhav · Accepted Answer · 2011-11-06 13:29:23Z

0

Try wrapping the JS code you intend to execute in a JS function and then wire-up the button with the function and an additional statement of return false.

Something like this:

public string DynamicJSCode; //Page level

//Page_Load

    DynamicJSCode = @"function doSomeWork(){document.getElementById('" + lblName.ClientID + @"').innerText= '';
    document.getElementById('" + lblPosition.ClientID + @"').style.display = 'none'; return false;}";

You can then embed the JS above in your page using properties (or any other means).

<script type='text/javascript' language='javascript'>
<%= DynamicJSCode %>
</script>

And then wireup the function to the button as below:

btnHide.Attributes.Add("onclick", "return doSomeWork();");

To prevent button controls to not postback you will have to use the return; call (without any doubt).

This would be slightly more maintainable (to my understanding) and then you would also not need the additional button event handler attachment in the code behind. In the markup itself you could then assign the JS function call to the OnClientClick event and the code that executes would always be dynamically generated.

<asp:Button runat="server" ID="btnHide" OnClientClick='doSomeWork();return false;' />

It is always recommended to write code with better maintainability irrespective of the size or importance of the functionality.

Hope it helps!

edited Nov 6, 2011 at 13:29

answered Nov 6, 2011 at 10:22

Vaibhav

1,1662 gold badges13 silver badges27 bronze badges

2 Comments

user1032037 Over a year ago

Vaibhav- Thanks for your reply As far as preventing the postback and still executing the JS, your method worked perfectly. However I still have the issue of the JS line "document.getElementByID('" + lblName.ClientID + @"').value = '';" not working. Using FireBug I can see the script is created correctly, however the label does not change. Any ideas?

Vaibhav Over a year ago

First, updated the code above, has been tested and works on my machine :) Second, two changes made: 1) getElementById and not getElementByID 2) Also, set the innerText to empty string instead of setting the value. Just a point to make, OnClick is for server side click and onclick is for Client Side click. Hope this helps!

Collectives™ on Stack Overflow

ASP.Net How do I execute a dynamic JavaScript and prevent a postback

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related