Update the text on the Bootstrap modal label before it is clicked

I am currently working on implementing a Bootstrap modal with a label control. The modal is triggered by clicking a button, and I am facing an issue where I need to change the text of the label before the modal launches. However, the text that is supposed to come from the C# end never triggers because it seems like the postback does not occur (possibly due to the modal blocking it). As a result, the text remains unset.

My objective is to: Click the button, set the label text (which needs to be fetched from the back end), and then display the modal. Below is what I have implemented so far:

<asp:Button ID="btnEasy" runat="server" CssClass="btn btn-success" Text="Easy" Width="200px" Height="50px" data-toggle="modal" data-target="#modalQuestion" data-backdrop="static" data-keyboard="false" OnClick="btnEasy_Click"/>

<div class="modal fade" id="modalQuestion" tabindex="-1" role="dialog" aria-labelledby="questionHeader">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="questionHeader">Easy Question</h4>
      </div>
      <div class="modal-body">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
              <ContentTemplate>
                <asp:Label ID="lblQuestion" runat="server" Text="Question"></asp:Label>
                  <br />
                  <br />
                <asp:Label ID="lblAnswer" runat="server" Text="Answer"></asp:Label>
              </ContentTemplate>
              <Triggers>
                  <asp:AsyncPostBackTrigger ControlID="btnEasy" EventName="Click" />
                  <asp:AsyncPostBackTrigger ControlID="btnShowAnswer" EventName="Click" />
              </Triggers>
          </asp:UpdatePanel>
      </div>
      <div class="modal-footer">
        <asp:Button ID="btnShowAnswer" runat="server" CssClass="btn btn-primary" Text="Show Answer" UseSubmitBehavior="false" OnClick="btnShowAnswer_Click"/>
        <asp:Button runat="server" CssClass="btn btn-default" data-dismiss="modal" Text="Close" />
      </div>
    </div>
  </div>
</div>

C#:

protected void btnEasy_Click(object sender, EventArgs e)
{
    lblQuestion.Text = "Easy clicked";
}

Answer №1

After performing the text value setting in the btnEasy_Click function, make sure to emit the necessary JavaScript code for execution. For example:

protected void btnEasy_Click(object sender, EventArgs e) 
{   
    lblQuestion.Text = "Easy clicked";
    if(!ClientScript.IsStartupScriptRegistered("JSScript"))
    {
        ClientScript.RegisterStartupScript(this.GetType(),"JSScript",
        "ShowModalPopUp()");
    } 
}

Create your custom JavaScript function:

<script>
function ShowModalPopUp(){
   $('#modalQuestion').modal('show');
} 
</script>

Answer №2

To achieve this task, you can utilize JavaScript. I will demonstrate an example here using jQuery. Attach an event listener to your button that triggers the modal to open and updates the label text accordingly. The code would look like this:

    //button code    
        <asp:Button ID="btnEasy" runat="server" CssClass="btn btn-success" Text="Easy" Width="200px" Height="50px" data-backdrop="static" data-keyboard="false" OnClientClick="showModal();"/>

    //scripts    
    <script>
        function showModal(){
            $('#<%=lblQuestion.ClientID%>').text('Easy clicked');
            $('#modalQuestion').modal('show');
        } 
    </script>

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

Unable to retrieve data from AJAX request in the AJAX success function

I've seen this question asked multiple times and I've gone through several answers regarding callbacks, but I'm still struggling to understand how to apply it to my specific situation. I have an ajax function that is being called from the su ...

What steps should I follow to track an event using Firebug?

When I examine the element, how can I discover all of the events that are attached to it? ...

Transform Table header orientation to vertical

I am struggling with a table structure similar to this <table> <thead> <tr> <th>Numbers</th> <th>Alphabet</th> </tr> </thead> <tbody> & ...

Sending JSON data from SignalR back to Knockout ViewModel

I'm struggling with my Knockout and SignalR implementation as a beginner. Although I can display JSON data in a debug element by databinding it to dashboard, I encounter undefined errors when trying more complex databinding. For example, the code sni ...

changing background color smoothly in a short time without using JQuery

Check out this link for some code .back { margin: 20px; padding: 100px; background: yellow; font-size: 30px; } <div class="back"> Fun place to stay. We got a golf cart to see the rest of the island, but the ...

Applying CSS transitions and transforms to SVG elements

Having trouble animating an SVG group with CSS transitions after applying a CSS transform? Check out my code below and let me know if you spot the issue. Inline SVG Code <a href="javascript:void(0)" class="hub-icon-container"> <svg xmlns="ht ...

Guide to implementing a universal animated background with Angular components

I'm having trouble figuring out why, but every time I attempt to use a specific code (for example: https://codepen.io/plavookac/pen/QMwObb), when applying it to my index.html file (the main one), it ends up displaying on top of my content and makes ev ...

Removing a table row with jQuery based on the content of a specific cell within the row

I have encountered an issue where I need to delete a specific row in a table that is dynamically generated and does not have any identifiable classes or IDs. The code for the rows looks like this: <tr> <td class="label">Who referred you?&l ...

Adding a translucent background image across the entire page in Angular: What's the best method?

I need the background image to extend across the entire page, including covering the Material Data Table. The background should be transparent so that the content of the table remains readable. What is the most effective method to achieve this? Here is th ...

Combine the input element's value with a string using jQuery

I am looking to combine the content of an input element into a string using jQuery I am experiencing difficulties appending the content of the input element at the end of the string. Simply using companyString or #companyString is not producing the desir ...

Setting the z-index to place an absolutely positioned element below a relatively positioned one

I am currently facing a challenge where I need to position an element under another one that has already been relatively positioned. The blue box must remain relatively positioned due to specific constraints within the website development process. For bet ...

Verify the Record's Presence in the Database Using ASP VB

I need to validate if an email is present in my SQL database using ASP code behind. When a user submits a form, I want to confirm if that email already exists before inserting it. Protected Sub btnSignup_Click(ByVal sender As Object, ByVal e As System.E ...

Arrange divs in a grid layout with evenly distributed dynamic spacing

I am not a big fan of bootstrap, so I was wondering if it is possible to achieve the layout without using it. I have 6 divs that I want to arrange in 2 rows and 3 columns. I need the space between each row/column to be precise. While I can calculate this ...

Refreshing select2 dropdown options dynamically with AJAX updates

I have a select dropdown for locations that is initialized using select2 on page load. I am looking to dynamically update the data in the dropdown at regular intervals using ajax calls. However, when I attempt to update the data in select2, the dropdown ...

What is the best way to retrieve data attributes from multiple div elements that share the same class name?

I have multiple div elements with the same class name. I want to extract the data attribute from these div's. I have tried some code and managed to get the result. However, I am unsure if this is the best approach for retrieving data("cartid"). Any as ...

Searching for particular JQuery nested values located within an input element

<input id="ctl00_PlaceHolderMain_RadButtonMango_ClientState" name="ctl00_PlaceHolderMain_RadButtonMango_ClientState" type="hidden" value="{"text":"Mango","value":"Mango","checked":true,"target":"","navigateUrl":"","commandName":"","commandArgument":""," ...

Tips for handling CSS loading delays with icons in OpenLayers markers

When using openlayers (v4.6.4) with font-awesome as marker icons, the icons do not display upon first load (even after clearing cache and hard reload). Instead, I see a rectangle resembling a broken character. It is only on the second load that they appear ...

Is it possible for images underneath to receive focus when hovering over them?

I'm struggling with a layout of thumbnails on my page. We'll refer to them as A, B, C, etc. They are currently displayed like this: A, B, C, D, E, F, G, H, I, J, K, L, M, N... and so on. When you hover over one thumbnail, it enlarges by 2.5 t ...

Combining Two DIVS Side by Side

Hey there, I am working on a timeline using two divs within a table cell. My goal is to have these divs overlap instead of appearing one below the other. The position attribute for all the DIVs inside the cell must remain unchanged due to the drag/drop fu ...

Incorporate the AngularJS controller into your JavaScript code

I am facing an issue with my jQuery UI dialog that contains a dynamic <select> populated with Angular and AJAX. The problem is that the AngularJS script still runs even when the dialog is not visible. To solve this, I added a condition to stop the s ...