I'm looking for ways to utilize the pageLoad function across multiple user controls

I am facing an issue with 3 usercontrols on a page. Each usercontrol has a pageLoad function in JavaScript, and the page itself also has a pageLoad function. However, only the pageLoad function of the last usercontrol that I registered is being fired, while the others are not.

<script type="text/javascript">

...
function pageLoad() {
    alert('page load - uc1');
    .....
}
...

Can someone please assist me on how to ensure all functions are fired?

Thank you

Answer №1

Create a custom JavaScript function for each control and trigger it during the Application.Init and PageRequestManager.EndRequest events in your web application:

On the client side:

function controlSpecificPageLoadFunction(){ alert("Hello, pageLoad!"); }

In the code behind:

if(!IsPostBack)
{
    var script = "Sys.Application.add_init(controlSpecificPageLoadFunction); Sys.WebForms.PageRequestManager.getInstance().add_endRequest(controlSpecificPageLoadFunction)";
    ScriptManager.RegisterStartupScript(this, this.GetType(), "thisControlPageLoad", script, true);
}

Answer №2

Have you heard of the rising trend known as unobtrusive JavaScript? It's gaining popularity, so it might be worth looking into

Check out this link for more information

You can also learn more on Wikipedia

Instead of using inline event handlers like onload="myfunction()", consider attaching event listeners directly in your JavaScript code...

document.getElementById('myElement').addEventListener('click', myfunction)

function myfunction() { ... }

In your specific case, you could do something like this

document.body.addEventListener('load', myfunction);

Although this approach has its drawbacks. It may be better to utilize a framework such as jQuery, MooTools, Dojo or EXT rather than starting from scratch with JavaScript.

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

What could be causing my array to update when the method is called live but not during unit tests?

One of my methods is called toggleSelect which adds and removes items from an array named selectedItems. This method functions perfectly when I test it live in the browser. However, when running unit tests, it does not seem to work as expected. Despite cal ...

a timing mechanism that halts at a pre-determined point in time

Looking to create a countdown timer that begins at 8AM EST and ends at 6PM EST. Once the timer reaches 00:00:00, I'd like to hide the control on the website and have it reappear at the same time the next day. Any suggestions on how I can make this hap ...

Is it possible to use ng-src to point to a file stored locally?

I am currently experimenting with using ng-src to load images from a local folder, but I keep encountering 404 errors. Can ng-src actually reference a local folder, or do you always have to use a hardcoded path like http://example.com/imgs/{{work.img}}.jpg ...

Determine the width of the window and adjust the positioning of jQuery UI tooltips accordingly

Struggling to adjust the jQuery UI tooltip position based on screen width, but can't seem to figure it out. Can someone assist me in detecting the browser's width and changing the tooltip position accordingly? [fiddle] $(function () { $(doc ...

Unlocking the Power of Javascript Promises in FileReader

I am facing an issue with my code. Here is the HTML snippet: <input type='file' multiple> And this is my JavaScript code: var inputFiles = document.getElementsByTagName("input")[0]; inputFiles.onchange = function(){ var fr = new File ...

What is causing the infinite loop when connecting to a Node.js server with Socket.IO?

A small team of two developers is currently working on setting up a Simple Chat Server using node js and socket.io on github. After pulling my partner's changes and running npm start, I noticed that my console was repeatedly outputting "a user is conn ...

Hovering over a colored fragment of text using the textrange object triggers a mouseover event

Is it possible to highlight a specific fragment of text using text range or another approach? I have a text block, for example: <div id="test">abcdefghij</div> I have successfully used text range to highlight text in yellow color (as seen in ...

Guide to displaying a canvas as an image in a new tab using Reactjs

My current project involves using a canvas barcode generated by the react-barcode library. At the moment, I can only right-click on the canvas to open it as an image in a new tab. Is there a way to achieve this functionality with just a click of a button i ...

What prevents variables defined in outer blocks from being accessed by nested describe() blocks?

In my real code, I encountered a problem that I wanted to demonstrate with a simple example. The code below functions properly. I defined a variable in the root describe() block that can be accessed in the it() blocks of nested describe()s. describe(&apo ...

Utilize Moment to round a date either up or down

I am using Moment to compare two datetime values. Specifically, I am utilizing Moment.isSameOrBefore function. However, my two date values are slightly different due to milliseconds. I want these two values to be considered the same: var date1 = ' ...

Independent Dropbox Collections

Query: function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var colCount = table.rows[0].cells.length; for (var i = 0; i < colCount; i++) { var ...

Validation method in jQuery for a set of checkboxes with distinct identifiers

I am faced with a situation where I have a set of checkboxes that, due to the integration with another platform, must have individual names even though they are all interconnected. <div class="form-group col-xs-6 checkbox-group"> <label cla ...

React app (storybook) experiencing loading issues with @font-face

I am struggling to load custom fonts from a local directory. Can someone provide assistance? Below is the code I am currently using: @font-face { font-family: 'My Custom Font'; src: url('./fonts/MyCustomFont.eot'); src: url(&apo ...

Managing Multiple Operations in Angular Firestore

For the past few weeks, I've been grappling with the theory behind this issue. Despite scouring the internet for solutions, I haven't found anything truly helpful. So, I'm turning to the SO community for the first time. In my Firestore data ...

What is the optimal value for the variable x in this scenario?

What is the correct value for X to make this condition valid? // Your code goes here if (x == 1 && x === 2) { console.log('Success!'); } ...

"Explore the convenience of viewing two separate videos on one webpage, each in its own

After extensive research, I have been unable to find any information on the issue at hand. I am attempting to use the jquery plugin OkVideo to display different videos in two separate "section" tags. However, even after explicitly assigning IDs to each con ...

The return value of fs.mkdirSync is undefined

I'm facing a challenge with creating a directory and utilizing that directory as a variable to extract files from zip/rar files. The section of code that is causing an error is shown below: var fileZip = fileName.replace(/^.*[\\\/]/, ...

Error Alert: The index "dateform" is not defined

I have set up two calendar date pickers and am trying to obtain the input data or retrieve the "post" date. However, upon running my code, I am encountering the following error message: Notice: Undefined index: dateform I am puzzled by this error because ...

How can I make a drop-down field in AngularJS show the current value after populating options in a select control using ng-options?

This conversation centers around an app that can be visualized as, https://i.stack.imgur.com/Y1Nvv.png When a user clicks on one of the stories on the left side, the corresponding content is displayed on the right-hand side. Each story includes a title ...

How to set the value of an `<input type="date"` in jQuery

Having trouble figuring out why this code isn't functioning properly. The input field I'm using is a simple 'input type="date"' setup like this.... <input type="date" name="Date"/> I am attempting to have the value automatically ...