I attempted to invoke a JavaScript function upon clicking an ASP button via the code behind, but unfortunately, it did not function as intended

Question

I attempted to invoke a JavaScript function upon clicking an ASP button via the code behind, but unfortunately, it did not function as intended

My .aspx page contains a JavaScript function

<script type="text/javascript">
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}</script>

Additionally, I have an ASP button

<asp:Button ID="Button2" runat="server" Text="submit" OnClick="Button2_Click" />

In the .aspx.cs page, I included this code

 protected void Button2_Click(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(this, this.GetType(), System.Guid.NewGuid().ToString(), "openCity(event, 'Tokyo');", true);
}

Unfortunately, this implementation did not work as expected!

javascript asp.net

Answer 1

Answer №1

I have encountered the same issue multiple times and found two solutions that usually help me get JavaScript working after a button click:

Ensure that the script block is placed after the control declaration in the ASPX page. For example:

<body>
<asp:Button ID="Button2" runat="server" Text="submit" OnClick="Button2_Click" />
:
:
:
<!--other HTML stuff-->
<script>
//Put your script here
</script>
</body>

If the above solution does not work, try using the JavaScript timeout function. For instance:

protected void Button2_Click(object sender, EventArgs e)
 {
     ScriptManager.RegisterStartupScript(this, 
     this.GetType(),System.Guid.NewGuid().ToString(), 
     "setTimeout('openCity(event,\'Tokyo\'), 200);", true);
 }

I hope this helps you resolve the issue for now.

Answer 2

I have encountered the same issue multiple times and found two solutions that usually help me get JavaScript working after a button click:

Ensure that the script block is placed after the control declaration in the ASPX page. For example:

<body>
<asp:Button ID="Button2" runat="server" Text="submit" OnClick="Button2_Click" />
:
:
:
<!--other HTML stuff-->
<script>
//Put your script here
</script>
</body>

If the above solution does not work, try using the JavaScript timeout function. For instance:

protected void Button2_Click(object sender, EventArgs e)
 {
     ScriptManager.RegisterStartupScript(this, 
     this.GetType(),System.Guid.NewGuid().ToString(), 
     "setTimeout('openCity(event,\'Tokyo\'), 200);", true);
 }

I hope this helps you resolve the issue for now.

I attempted to invoke a JavaScript function upon clicking an ASP button via the code behind, but unfortunately, it did not function as intended

Answer №1

Similar questions

implementing AJAX to retrieve data from an ashx file in ASP.NET

Tips for properly setting and accessing data objects in React when utilizing a Firebase database

Any ideas on how to resolve this ajaxToolkit issue?

Creating a personalized ESLint rule specifically for Redux reducers

Unusual problem arises when working with exclusions and inclusions in tsconfig.json

What could be causing compatibility issues with materials other than MeshNormalMaterial when using a mesh created with ThreeBSP.js?

Exploring Angularjs: Navigating to a particular element within ng-repeat

Mongoose Error: The function 'mongooseSchemahere' is not recognized as a valid function

Problem with unique geometry and facial orientation

Playing sound on the client side using ASP.NET pragmatically

ESLint's no-unused-vars rule is triggered when Typescript object destructuring is employed

Exploring Netbeans 7.3 for Enhanced JavaScript Autocomplete with Parameters

Rendering sibling components on Multiple Select Material UI in React

Exporting a gridview to excel while excluding the footer section can be achieved by utilizing

Gulp and Babel: Module Not Found Error

A straightforward method of transmitting data from JavaScript to the Python back-end within a Streamlit application

Create a custom loading spinner for a jQuery AJAX request

Stopping the execution of jQuery().load()

The hook call you made in next.js/react is invalid and cannot be

What is the most effective way for me to utilize callback functions and setTimeout in my code?