Modifications to the HTML output in ASP.Net made through JavaScript are swiftly reversed

I have a website where I display a list of properties, such as houses. The layout of this list is created using CSS. I recently created a second CSS class to properly align the properties/houses in two columns. Previously, I achieved this by pressing a button, initiating a postback, and outputting different HTML (similar content with different CSS class references).

While searching for a solution, I came across this question on SO. I decided to implement a basic scenario where a div with the class "yellow" is initially displayed, and clicking a button changes it to "red". However, I noticed that the div quickly reverts back to the "yellow" class.

Although I am new to JavaScript, I have experience in programming. Integrating this feature into my website would be beneficial, but I haven't been able to find a suitable solution yet. I apologize if this query has already been addressed elsewhere.

<script type="text/javascript">
    function changeView() {
        document.getElementById("box").className = " red";
    }

Thank you in advance, Christophe.

javascriptasp.nethtmlcss

Answer №1

Typically, a button element is set to type 'submit', triggering the browser to post back to the server.

To prevent this default behavior, consider changing the type attribute to "button" instead.

<input type="button" ....

For more information on the distinction between these types, check out this resource: Difference between <input type='button' /> and <input type='submit' />

Answer №2

In the event that your button triggers a postback (potentially being a server control with an asp: tag), any changes you have made in JavaScript will be reset because, by default, an asp button will submit the page to the server causing it to reload.

If all you want to do is change the class of a div, consider using a simple HTML button instead:

<input type="button" onclick="changeView()" value="Change" />

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

Creating a custom CSS clip to apply a rounded path on an image

I have been experimenting with applying a "clip path" to an image using a rounded path. While I am aware that SVG clip paths are an option, I found them to be less responsive. As an alternative, I attempted to place the SVG graphic under the image within a ...

htmlcsssvg

Is it possible to load multiple angular applications within a master angular shell application?

I am searching for a method to integrate multiple Angular applications into a single shell Angular application. The concept involves having different teams develop separate Angular apps that can be loaded within a main shell app visible to end users. Thi ...

javascriptangularjsextjs

Checking the list box and radio button using JavaScript based on their respective IDs

Looking to validate the selection of a listbox and radio button using their respective IDs when a submit action occurs. When testing in the browser, no alert is being displayed. The goal is to trigger the script upon clicking the submit button to verify ...

javascript

What steps should I take to optimize the performance of this code by implementing rate-limiting for its execution speed?

As I pondered the task at hand, I realized that using a sleep function might be beneficial. However, Javascript lacks a built-in sleep function. How can I tweak this process to avoid hitting a Parse rate-limit? My goal is to execute one (1) Parse.Cloud.ru ...

javascriptparsingsleep

If an array is present in the object, retrieve the array item; otherwise, retrieve the field

When obj arrays are nested and found, everything works correctly; however, if they are not found, the page breaks as it becomes null. How can I check if they exist beforehand, and if not, just output the next level field? The code below works when both ar ...

javascriptjqueryarrays

Place the SVG image in a fixed position on the final page

Attempting to generate an invoice using Razor template and then converting it into a PDF through chromium. The challenge is adding a payment form to the last page in a fixed position. .svg-container { position: absolute; top: 12cm; ...

htmlcsschromiumpuppeteer-sharprazorlight

Error: Headers cannot be modified after they have already been sent to the client due to form data issues

Encountering an issue with uploading an image to Azure storage blob. The fetch method doesn't seem to be working as expected. The process works fine in Postman but throws an error when using fetch. No issues found during deployment on Heroku. What ...

javascriptnode.jsreactjsapiexpress

In Loopback, I have defined two remote methods within a single model, yet only one is accessible through the API explorer

I'm facing a challenge with making 2 remote methods function in the same loopback model. Only one is operational in the api explorer at a time - when I comment out or delete the code for one, the other works seamlessly. Here's my approach: modul ...

javascriptnode.jsmongodbloopbackjsstrongloop

Scroll events on iOS may not always be triggered within a div element located inside a modal

In my Vue component within the application, I have set up a hierarchy with various styles: <template lang="pug"> my-modal-component.modal-container template(v-slot:content) swiper.swiper( :options="swiperOptio ...

javascripthtmlcssvue.jsscroll

The PKIJS digital signature does not align with the verification process

Explore the code snippet below const data = await Deno.readFile("./README.md"); const certificate = (await loadPEM("./playground/domain.pem"))[0] as Certificate; const privateKey = (await loadPEM("./playground/domain-pk ...

javascripttypescriptcryptojspki

Updating Github pages requires clearing the cache first

As I work on my first website using GitHub pages, I've noticed that it can be frustrating to constantly clear the cache or open an incognito window whenever I add something new. I'm thinking about incorporating Jekyll into my workflow so I can t ...

htmlgithubgithub-pages

Save the information from a particular block into a JSON or text file using Node.js

I'm working on a code block in Node.js to scrape information from a URL, and I need help figuring out how to store the data either in a .txt file or create a JSON object from it once I receive the data inside the .then block. import { Builder, By, Key ...

javascriptnode.jsseleniumselenium-webdriver

Upon re-executing PHP following an Ajax request

I am working on a select menu that can submit without reloading the page. Here is how it currently functions: <select id="option" name="option"> <option value="15">15/option> <option value"30">30</option> <option value"90"> ...

javascriptphpjqueryajax

Show a portion of decimal numbers without altering their true numerical values

Currently, I am immersed in a web project that involves incrementation animations. To achieve this, I have devised a counter function similar to the one shown below: const counters = document.querySelectorAll('.counter'); counters.forEach ...

javascripthtmlcss

Creating string enums in NextJS with TypeScript

I am working on my nextjs application and I have a component with a prop that is a string. I decided to create an enum, so I attempted the following: enum Label { dermatology = 'Dermatologi', psychology = 'Psykologi', rheumatology = ...

javascriptreactjstypescriptnext.js

implementing HtmlSpanner with an appended css stylesheet

Using HtmlSpanner with CSS for TextView I recently discovered a library called HtmlSpanner that claims to assist in adding an HTML string with CSS to a TextView. However, I am struggling to locate any detailed documentation on how to achieve this, except ...

androidcssfromhtml

Using PHP to extract code snippets from HTML documents

I'm facing a challenge with parsing Google News RSS using PHP. The XML description is messy, and I only need to extract two specific parts from it. However, I am struggling to figure out how to extract only the desired information. I have attempted to ...

phphtmlparsingrss

Setting the culture of user controls in ASP.NET using programming techniques

Is there a way to programmatically set the culture of my User Control that has Labels, Buttons, and Textboxes defined within it? While we can override the InitializeCulture method for ASPX pages to set the Culture and UICulture, ASCX Controls do not have ...

c#asp.netuser-controlsresourcesascx

Encountering a challenge in Angular 8: Unable to locate a supporting object matching '[object Object]'

I am having an issue trying to retrieve the Spotify API from the current user's playlists. While I can see it in my console, when I attempt to insert it into HTML, I encounter the following error: ERROR Error: Cannot find a differ supporting object ...

javascripthtmlangulartypescriptangular8

What is the best way to incorporate a button that can toggle the visibility of the sidebar on my post page?

Check out this post of mine I noticed a button on someone's page that could hide their sidebar and expand it again when clicked. How can I implement this feature? Is it a simple task? ...

javascripthtmljekyll