The specific sequence in which a JavaScript is executed within an ASP.Net framework

I am new to ASP.net and I wanted to add a confirmation popup to my webpage. I tried using the following code snippet, inspired by a similar one found here: http://www.codeproject.com/Articles/8173/A-Simple-ASP-NET-Server-Control-Message-Box-Confir.

insert unique code here...

In testing this code from a test class, I expected that upon clicking a button, a confirmation popup would appear asking me to confirm:

  • If I click "no": a postback would occur and MoreCode() would not be executed.

  • If I click "yes": no additional JavaScript should execute, allowing MoreCode() to proceed.

However, when running through the debugger, I observed that:

  • The confirm2 function is executed before moreCode()

  • MoreCode() runs before the popup appears.

This order of execution puzzled me. Can someone explain why this happens?

Thank you in advance.

javascriptasp.net

Answer №1

On the server side, MoreCode() is executed while the popup appears on the client side, operating independently of each other. If it is necessary for MoreCode to run after clicking a button, a callback in JavaScript should be used to append it after.

sb.Append(@" if(confirm( """ + sMsg + @""" ))");

This callback will be associated with a server call, triggering the execution of MoreCode on the server side.

Answer №2

When no AJAX is in use, the sequence of events becomes transparent: server-side code runs first, followed by the return of HTML to the browser for execution of any client-side code necessary. Breakdown below highlights the step-by-step process commencing from the moment your Button2 is activated:

  1. The Button2_Click server event is triggered. This event fulfills its tasks: generates a string to be inserted into the resulting HTML page, and then proceeds to execute MoreCode(). At this stage, control has not been relinquished to the browser—everything unfolds on the server-side.
  2. The resulting page's HTML is generated, incorporating the injected string alongside the JavaScript you authored.
  3. The rendered HTML journeying to the browser for execution, where your script prompts a user with a JavaScript alert showcasing text predetermined on the server-side.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The flickering on the screen is induced by the Bootstrap multiselect dropdown

I've included the following scripts on my page: 1- MultiSelection.js 2- bootstrap.min.js 3- MultipleSelection.css In my code, I've specified my control like this: <asp:ListBox ID="listBoxProductType" runat="server" SelectionMode="Multipl ...

asp.nettwitter-bootstrapbootstrap-4

When using Javascript, the click function is returned as not being a valid function

I am working on a project with two PHP files - index.php and loadimages.php. The index.php page contains a thumbnail gallery and a canvas. The images in the thumbnail gallery are populated by loadimages.php. Here is a snippet of the code from loadimages.ph ...

javascriptphp

Eliminate the use of ngTemplate in your AngularJS project

I just finished creating an AngularJS project with the yeoman generator, and now it's time to deploy it! After reading up on AngularJS, it appears that the yeoman generator creates Angular projects using templateCache. This means I need to utilize a ...

javascriptangularjsgruntjs

Displaying a distinct image for each Marker when hovering over them on a Map

I have implemented ReactMapGL as my Map component and I am using its HTMLOverlay feature to display a full-screen popup when hovering over markers. However, even though I have set different image data for each marker, all of them show the same image when h ...

javascriptreactjsmapsmapbox

Add a new component to a Vue.js instance that is already in use

Just getting started with Vue.js I'm looking to register a local component following the instructions here: https://v2.vuejs.org/v2/guide/components.html#Local-Registration The catch is that I need to register the component to an existing Vue insta ...

javascriptvue.jsvuejs2vue-component

Utilize FormData by passing it to a separate function and then utilizing it

I have encountered a perplexing issue with my Flask app that involves submitting a form to upload an image to the server. Despite my efforts, I have been unable to find a solution on my own. When I submit the form, I use FormData to create the necessary o ...

javascriptjqueryajax

Tracking javascript activity with Application Insights

I have been utilizing application insights to store error data along with additional information, including a field that contains the code trace (converted into a string). The issue I am encountering is that sometimes the string exceeds the 1024 character ...

javascriptjqueryazure-application-insights

Searching for a specific string within an array using JavaScript: tips and tricks!

I have a variable which looks like this: var d; d = [{'category': 'Hourly Report','from_start_datetime': '2013','format': 'yyyy-mm-dd hh:ii:ss', 'id': 'dateRangeTo'}] When I ...

javascriptarraysdictionary

Is there a tool available for minimizing PHP, CSS, and JavaScript

I have a unique method for managing my css and javascript resources. Therefore, when I am prepared, I compile a list of css and javascript files. My goal is to create a function that can generate a path to a compressed and merged css and js file. For ex ...

phpjavascriptcsscompression

Creating a Set of Buttons in HTML

Need some assistance with grouped buttons. Let's consider a scenario where there are 5 buttons on an HTML page. When the 3rd button is clicked, buttons from 0 to 3 should change color and the function should return 3. Similarly, when the 5th button is ...

javascriptcsshtml

The jQuery script removal functionality originated from the use of ajax

I have adapted a nested modal script (jQueryModal) to better suit the project's requirements, but I've encountered an unusual issue that I can't seem to resolve. When I invoke the modal to load some content via ajax, and the response from t ...

javascriptjqueryajaxmodal-dialog

After the introduction of ReactiveFormsModule, the functionality of the Angular router has ceased

I am working on setting up a reactive form in Angular for a login page. Here is my login form: <form [formGroup]="loginForm" (ngSubmit)="login(loginForm.value)"> <div class="form-group"> <label for="username">Username</label> ...

javascriptangularangular-ui-router

Tapping on the Child Component will automatically close the currently opened list

Recently, I created a menu that expands to show all child elements when clicking on the parent menu link. However, I encountered an issue where clicking on a child element collapses the menu. You can view a demo of my implementation here: http://codepen. ...

javascripthtmlcss

Maintaining the selected option on page refresh with React Remix

I have a dropdown menu with 2 choices (en, no) for switching the language when onChange event occurs. To save the selected language, I am using localStorage. Due to the server-side rendering in Remix, direct access to localStorage is not possible. Therefo ...

javascriptreactjstypescriptremix.run

Compilation failure resulting from core UI build in React js

I have recently transitioned my domain to React Js and am in the process of learning. I have been working on creating an admin panel using Core UI Reactjs components, however I keep encountering an error that says "This error occurred during the build ti ...

javascriptjqueryreactjscore-ui

Maintain cookie data between pages to remember form inputs

The scenario: A form is utilized to capture the input value using $thisSearch.val(), store it as a cookie, and then add it to an array. This form is displayed as an overlay triggered from a menu item in the website header, allowing it to be accessed from a ...

javascriptjquerycookies

What is the process for inserting a graph into asp.net?

Seeking a way to visually represent basic database information on an X Y axis graph without the need for additional plug-ins like Silverlight. Interested in an efficient and fast solution that embeds the chart directly into the page as a visual representa ...

c#javascriptasp.netcharts

Utilize HTML, AJAX, and JavaScript to retrieve the location of the current user and display markers for other users on a

I am attempting to display on a single map the current location of a user and markers for other users, whose locations are obtained through an ajax post. In essence, I am looking to merge the concepts from: Google Maps Geolocation Example with: Multiple ...

javascriptphpajaxgoogle-mapsgoogle-maps-markers

Calculate the total value of a specific field within an array of objects

When pulling data from a csv file and assigning it to an object array named SmartPostShipments [], calculating the total number of elements in the array using the .length property is straightforward. However, I also need to calculate the sum of each field ...

javascriptnode.js

Keeping track of the toggle state using a cookie

While searching for a way to retain the toggle state, I stumbled upon js-cookie on GitHub. The documentation provides instructions on creating, reading, and deleting a cookie. However, an example would have been really helpful in enhancing my understanding ...

javascriptjqueryhtmlcookiestoggle