Why isn't my Bootstrap-styled radio button triggering auto post back?

I am facing an issue with the interaction between bootstrap and asp.net radio buttons. Specifically, the 'AutoPostBack' command is not functioning as expected. Here is the code snippet:

Linked Bootsrap & JS Files:

<link href="css/mycss.css" rel="stylesheet"/>
<script src="js/jquery-2.1.4.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script> 
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-combined.min.css" rel="stylesheet" />
<script src="js/bootstrap.min.js"></script>

Radio Button: 

  <label class ="btn btn-default">
    <asp:RadioButton ID="rdbAllSites" runat="server" GroupName="SiteOfManu"  Checked="false"  Text="All Sites" AutoPostBack="true"  OnCheckedChanged="rdbAllSites_CheckedChanged" />
  </label>
</div>

In the above code, I have specified AutoPostBack as true to trigger a post back to the server upon selection. However, this functionality is not working and I'm unsure of the reason why. Interestingly, without applying any bootstrap styles to the radio buttons, they do execute a postback.

Is there something crucial that I might be overlooking?

Your assistance in resolving this matter would be highly valued.

javascriptjquerycssasp.nettwitter-bootstrap

Answer №1

I implemented the code you provided, and it executed perfectly!

 <div class="btn-group" data-toggle="buttons">
     <label class ="btn btn-default">
     <asp:RadioButton ID="rdbCurrentSite" runat="server" GroupName="SiteOfManu"   Checked="true" OnCheckedChanged="rd1"  Autopostback="true" Text="Current Site"  /> 
     </label>

     <label class ="btn btn-default">
       <asp:RadioButton ID="rdbAllSites" runat="server" GroupName="SiteOfManu"  Checked="false"  Text="All Sites" AutoPostBack="true"  OnCheckedChanged="rd2" />
    </label>
    </div>

The C# file includes these two functions:

protected void rd1(object sender, EventArgs e)
{

    Response.Write("Radio1 Clicked");

}

protected void rd2(object sender, EventArgs e)
{

    Response.Write("Radio2  Clicked");

}

In vb.net:

    Protected Sub rd1(ByVal sender As Object, ByVal e As EventArgs) Handles rdbAllSites.CheckedChanged
        Response.Write("Button 1")
    End Sub

  Protected Sub rd2(ByVal sender As Object, ByVal e As EventArgs) Handles rdbAllSites.CheckedChanged
        Response.Write("Button 2")
    End Sub

Please give this a try and inform us if it met your expectations.

We appreciate your cooperation!

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

Tips for keeping the background image anchored to the bottom of your browser

I am looking to make sure that the footer image on my website remains at the bottom of the browser when the page content is short. The CSS code currently being used for this is: #site-container {width:100%; background:url(.../site-bg-foot.jpg) no-repeat ...

htmlcsswordpressfootersticky-footer

Enhancing jQuery performance on mobile Safari

I've been faced with a puzzling issue concerning CORS on multiple web applications I developed, particularly when it comes to mobile Safari on our corporate iPads. To elaborate on the setup, there is a front-end server hosting the web pages and two d ...

jqueryajaxipadsafaricors

executing a Prisma database migration with various schemas

I am currently immersed in a Prisma project where my goal is to create a node module that can be utilized by other projects. The challenge now is to ensure that the database stays synchronized with the models and the primary project, so all testing platfor ...

javascriptnode.jsdatabaseautomationprisma

Tips for determining the final cost post discount entry

Calculate the final cost with discount Issue with OnChange event function CalculateDiscount() { var quantity = document.getElementById("ticket-count").innerText; var price = document.getElementById("item-price").innerText; var discount = document.getEle ...

javascriptjquery

Send data with AJAX and PHP without refreshing the page

I have implemented the "add to favorite" feature on my WordPress project using a <form> submission. Each time I click on the add to fav button, it works fine, but the page always reloads which is quite annoying. To tackle this issue, I decided to imp ...

javascriptphpjqueryajaxwordpress

How to display Umbraco Grid content in search results?

Looking to enhance my search functionality with Umbraco and I have a straightforward Examine query set up like this; var results = Umbraco.Search(Request.QueryString["query"], true, "MySearcher"); foreach (var result in results) { <h2>@result.Name&l ...

c#asp.netrazorumbracoexamine

Angular button press

Recently, I started learning Angular and came across a challenge that I need help with. Here is the scenario: <button *ngIf="entryControlEnabled && !gateOpen" class="bottomButton red" (click)="openGate()">Open</button> <button *ngIf ...

javascriptangulartypescript

directive unit testing unable to access isolatedScope as it is not recognized as a valid

Currently, I am in the process of conducting unit tests on a directive that was previously created. For my initial test, I simply want to verify a specific variable within the scope of the directive. However, whenever I attempt to execute the method isola ...

javascriptangularjsunit-testingangularjs-directive

Is there a way to successfully transfer both the event and props together?

For simplifying my code, I created a function that triggers another desired function when the Enter key is pressed. Here's an example of how it works: const handleKeyDown = (event) => { if (event.key === 'Enter') { event.preventDefa ...

javascriptreactjs

Encountering an error during the installation of node js when attempting to run npm install

npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e687b7f7d6a327f6b6a717d717e737f76776c796937252327">[email protected]</a&g ...

javascriptreactjs

Picking a specific record from MySql in C# ASP.NET Core without using an id

I'm attempting to retrieve a user from a MySQL table using their username instead of the id in ASP.Net Core. By default, the column used in the GET method is the id. I attempted to modify it to use the username, but the column is unrecognized. Within ...

c#mysqlasp.net

What is the best way to bring in a service as a singleton class using System.js?

I have a unique Singleton-Class FooService that is loaded through a special import-map. My goal is to efficiently await its loading and then utilize it in different asynchronous functions as shown below: declare global { interface Window { System: Sy ...

javascripttypescriptsystem.jsimport-maps

Using an iframe with THREE.js and WebGlRenderer can result in the domElement's getBoundingClientRect method returning 0

I encountered an issue with my code: ... renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setSize(WIDTH, HEIGHT); ... controls = new TrackballControls(camera, renderer.domElement); Strange behavior occurs when I r ...

javascripthtmlthree.jsonload

Is there a way to obtain the URL before the page finishes loading, even if the specified waiting time for the webdriver has expired?

Currently, I am attempting to retrieve the URL even if the page is still in the process of loading. However, my goal is to only obtain the URL after a specified wait time of 10 seconds has passed and then trigger a custom exception. I have experimented w ...

javascriptjavaseleniumpageloadwebdriverwait

Arranging arrays in Javascript within two dimensions

In my data set, I possess an array that contains tags along with their respective counts. tags_array[0] = tags; tags_array[1] = tags_count; My goal is to rearrange the arrays based on the tag counts to easily identify the most popular tags. ...

javascriptjquerysorting

Exploring the WPS service URL within OpenLayers 3

I am currently developing a web mapping application and I am looking to generate a WPS service request in URL form using GET method. Similar to how we can create WFS and WMS service URLs, I have successfully executed WPS services such as JTS buffer, lengt ...

javascripthtmlajaxopenlayers-3wps

Integrate jQuery into a Vue.js 2 project using the expose-loader plugin

For my latest Vue.js project using the vue-cli, I attempted to import jQuery with expose-loader. Following the instructions in the official documentation, but unfortunately, I was not successful. Here are the steps I took: Installed jQuery and expose- ...

jqueryvue.jsvuejs2webpack-2

Could it be a cross-domain problem with jQuery?

Could this issue be related to cross-domain problems? I am attempting to utilize $.ajax to load a file. However, I noticed that for some files, the readyState is showing up as 4, while for others it is displaying as 1. Currently, my jasmine tests are runn ...

javascriptjqueryajax

Seeking assistance in the development of a visual depiction of device orientation through JS

My goal is to visually represent the device orientation values alpha, beta, and gamma by creating a series of "bars" for each value. Currently, I have managed to display only the values in plain text using innerHTML. However, I envision these bars moving i ...

javascriptcss

The Next.js Clerk Webhook seems unresponsive and shows no output

After successfully implementing clerk authentication in my nextjs app, I encountered an issue with saving users in MongoDB through clerk webhook. Even though I have hosted my application on Vercel, added the ${vercel_site}/api/webhook endpoint in clerk, an ...

javascriptmongodbnext.jsclerk