Utilize javascript to interact with ASP.NET controls

Here is a simple JavaScript function that allows me to dynamically change the textbox in a method during runtime.

function MyTst(pVal2) {           
        var x = document.getElementById('<%=myImage.ClientID%>');
        x.src = "/images/write.gif";      

    }

I want the code to be more generic by replacing '<%=myImage.ClientID%>' with the input parameter of my method, which in this case is pVal2 containing the ASP.NET server control image id.

I have tried various methods to accomplish this without success. Any advice on how to achieve this would be greatly appreciated.

Thank you for your help.

javascriptasp.net.net

Answer №1

Here is a simple way to enhance the flexibility of your function call:

UpdateImageSource('<%=textBoxId.ClientID%>')

function UpdateImageSource(elementId) {           
    var element = document.getElementById(elementId);
    element.src = "/images/write.gif";
}

Answer №2

Have you considered passing an element as a parameter?

function ChangeImage(imageElement) {  

   imageElement.src = "/images/write.gif"; 

}

In your HTML markup, you can use this like onclick="ChangeImage(this)" to pass the current element

Please Note: The src property belongs to the <img> tag and not for <input type=text>

Answer №3

Thanks to the power of JQuery and some online resources, I was able to successfully overcome this issue. It's amazing how javascript can interact with server controls! For more detailed information, check out this useful page: link here

Below is the code snippet that helped me solve the problem. Hopefully, it can be beneficial to someone else as well.

function MyTst(pVal) {
        var x = document.getElementById($("[id$=" + pVal2 + "]").attr("id"));
        x.src = "/images/write.gif";
    }

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

Issue with Tailwind causing content to extend beyond screen with horizontal scrolling

I have a React-based NextJS application using Tailwind CSS. There is a page component that displays a list of individuals sorted from A to Ö (Swedish alphabet). In the mobile view, the user experience requires the list of alphabetical letters to be visibl ...

javascriptreactjsnext.jstailwind-css

Warning: data and salt parameters are necessary, please provide them

Issue: I am encountering an error with registering a new user, specifically when using Postman. I'm not sure why this error is occurring only in Postman. Additionally, I am facing proxy problems where requests cannot be proxied from localhost:3000 to ...

javascriptreactjsexpressauthenticationbcrypt

Creating a delayed queue using RxJS Observables can provide a powerful and

Imagine we have a line of true or false statements (we're not using a complicated data structure because we only want to store the order). Statements can be added to the line at any time and pace. An observer will remove items from this line and make ...

javascriptangularrxjs

Express JS res.send() with an array response data is posing a concern during the Checkmarx scan

When using the axios library in my express middleware to retrieve responses from APIs, I encountered a security concern raised by Checkmarx scan report. router.post(someurl,req,res) { axios .get(someurl) .then((response=>{ **res.send(response.data);**/ ...

javascriptnode.jsreactjsexpresscheckmarx

How can I update the color scheme in styled components based on the active state of the component?

I'm currently working on a react accordion component that requires changing styles based on the active and inactive states. I have successfully set the state and added two props for color and active color. The goal is to change colors when the user cl ...

javascriptcssreactjs

Getting the selected value from a dropdown button that utilizes the @Html.DropDownListFor tag helper in ASP.NET Core MVC

I am currently working on a dropdown button that is populated using the HTML tag helper @Html.DropDownListFor. The code snippet for this button looks like: <div class="col-sm-3" id="valueSetParent"> @Html.DropDownListFor(model ...

javascripthtmljqueryasp.net-coreasp.net-core-mvc

the location where the serializable object is stored prior to being assigned to the ViewState

It has come to my attention that objects must be marked as serializable if used in ViewState. I am intrigued as to where the serializable object is stored before being assigned to ViewState. Is it possible to modify the serialization method when assignin ...

c#.netserialization

What is the best way to retrieve the selected item from a dropdown list and then send it to my Details view for submission?

I am struggling with an MVC Razor form. My goal is to submit the user's selection from the Items dropdown list and then navigate to the Details view to access information about the chosen item. Currently, I can successfully navigate to the Details vi ...

c#asp.netajaxasp.net-mvcrazor

Long Polling results in the call stack size being exceeded to the maximum limit

I am working on a long polling function that needs to be triggered at a specific time, and then continue as long as the gallery has the updating class. The gallery is represented by $("... "). function pollGallery(gallery){ if (gallery.hasClass("upda ...

javascriptjquerylong-polling

Can someone provide an explanation of the Typescript peerDependencies in Angular, specifically comparing versions tslib 1.* and 2.3.*?

I am in the process of starting a new angular project, but I'm facing difficulties in importing the localStorage feature. I referred to an existing project that utilized localStorage in the following way: import { Injectable } from '@angular/core ...

javascriptangulartypescript

Struggling with incorporating a button into a ReactJS table

I am trying to display a (view) button in the table, but I encountered the following error: Module parse failed: Unexpected token < in JSON at position 165 while parsing near '...2021", "view": <button type="submit...' You m ...

javascriptreactjsjson

Looking to update the display of an array received in JSON format and then show it using ng-repeat?

Upon receiving a response from the backend, I am saving it in a variable called "allinfo" in my controller. The data received includes the name, date of birth, and hobby of a person. The hobby is an array that can contain any number of elements. In my vie ...

javascriptangularjsarraysjsonangularjs-ng-repeat

Embedding an Iframe within a dialog box using jquery UI

Within my jquery UI dialog, I have included an iframe and set its source during the document.ready event: $(document).ready(function() { $("#iframe").attr("src", whatever); $("#button").click(function() { $("#dialog").dialog(); }); }); ...

javascriptjquery

utilize Angular's interface-calling capabilities

In the backend, I have an interface structured like this: export interface DailyGoal extends Base { date: Date; percentage: number; } Now, I am attempting to reference that in my component.ts file import { DailyGoal } from '../../interfaces' ...

javascriptangulartypescript

Updating the value of a data type in C# can be done by reassigning

Hello! Here are my codes: int var1 = 1; int var2 = 2; enum enumType { X, Y } I have a function called UpdateValue that can update the value of var1 or var2 based on the passed parameter enumType: void UpdateValue(enumType type, int value) { swit ...

c#.net

Are there any JavaScript functions available that can navigate to a different HTML page?

Here is an example of the functionality I am attempting. Can it be implemented? function CloseHTML(){ ApplyCSSClosingTransition(); setTimeout(function() { RedirectToAnotherPage(); }, 2000); } <div onClick='CloseHTML()'&g ...

javascripthtmlhttp-redirecthyperlink

"Extracting JSON data from a URL and loading it into a

I am currently working on a project where I am retrieving data from a URL and storing it in an array. Here is the code snippet: $url = 'https://www.datastro.eu/api/explore/v2.1/catalog/datasets/orbits-for-current-comets-in-the-mpc-database/records?ord ...

javascriptphpjsondatatables

Issue with Angular Script not functioning upon reopening the page

I recently completed my first website, which can be found at Despite my efforts, I've encountered an issue that has me stumped. When you navigate to the certificate page, you should be able to input your name onto the certificate. However, if you sw ...

javascriptjqueryhtmlcssangularjs

What is the best place to define data that remains constant?

In a Vue component, I am looking to utilize data that remains constant. The issue arises when attempting to implement the following code: const numbers = [1, 2, 3] new Vue({ el: "#app" }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2 ...

javascriptvue.js

Adjusting image size to fit divs depending on orientation

I am currently working on a project where I need images to fill a div while still maintaining their aspect ratio. To achieve this, I am utilizing jQuery to determine if the images are portrait or landscape, and adjusting the width or height accordingly. H ...

javascriptjqueryhtmlcss