Instantly appearing and disappearing Bootstrap modal popup catches users off guard

I've encountered an issue with my bootstrap popup that displays student results - it opens and closes immediately. In my master page file, I have included the following JS files:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
   <title></title>
     <asp:ContentPlaceHolder ID="head" runat="server">
     </asp:ContentPlaceHolder>
   <script src="jquery-1.12.3.min.js" type="text/javascript"></script>
   <script src="js/bootstrap.js" type="text/javascript"></script>
   <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />  
</head>

However, my webpage does not include any files for bootstrap except for a jQuery timer file:

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="css/jquery.countdownTimer.css" rel="stylesheet" type="text/css" />
</asp:Content>

Below is the code for the modal:

<div class="modal fade" id="myModalTest" role="dialog">
<div class="modal-dialog">

  <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title text-center">RESULT</h4>
    </div>
    <div class="modal-body">
       <table class="table table-bordered" style="background-color:White" cellpadding="10" cellspacing="10">
       <tr>
          <td class="style1">
             <p class="text-justify"><asp:Label runat="server" ID="Label1" Text="Test Name :"></asp:Label>
          </td>
          <td>
             <asp:Label runat="server" ID="lbltest"></asp:Label>
          </td>
       </tr>
       <tr>
          <td class="style1">
             <asp:Label runat="server" ID="lblName" Text="Student Name :"></asp:Label>
          </td>
          <td>
             <asp:Label runat="server" ID="lbluname"></asp:Label>
          </td>
       </tr>
       <tr>
          <td class="style1">
             <asp:Label runat="server" ID="lblmks" Text="Total marks scored :"></asp:Label>
          </td>
          <td>
             <asp:Label runat="server" ID="lblmarksscored"></asp:Label>
          </td>
       </tr>
       <tr>
          <td class="style1">
             <asp:Label runat="server" ID="Label2" Text="Total questions attempted :"></asp:Label>
          </td>
          <td>
             <asp:Label runat="server" ID="lbltot"></asp:Label>
          </td>
       </tr>
       <tr>
          <td class="style1">
             <asp:Label runat="server" ID="Label3" Text="Total questions in Test :"></asp:Label>
          </td>
          <td>
             <asp:Label runat="server" ID="lbltotalTestQ"></asp:Label>
          </td>
       </tr>
    </table>
    </div>
    <div class="modal-footer">
      <asp:Button class="btn btn-default" runat="server" ID="btnBackModal" Text="back" OnClick="btnBackModal_Click"/>
    </div>
  </div>

</div>
</div>

Even the back button's `btnBackModal` OnClick event doesn't seem to fire. Upon debugging, I noticed that the control isn't reaching that event on the server side.

public void btnBackModal_Click(object sender, EventArgs e)
{
    if (isSaved == 0)
        saveAnswer();
    Response.Redirect("StudentHome.aspx");
}

Answer №1

To overcome the issue, I decided to create a JavaScript function that would trigger the opening of a modal, rather than relying on the data-toggle attribute of the button. I made the switch by eliminating the following code:

<button input="button" class="btn btn-info" id="btnshowmodal" data-toggle="modal" data-target="#myModalTest">View Result</button>

Instead, I introduced a JavaScript function to manage the onclick event:

HTML:

<button input="button" class="btn btn-info" id="btnshowmodal" onclick="popup();return false;" runat="server">View Result</button>

JS:

function popup() {
  $('[id*="myModalTest"]').modal('show');
}

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

Is there a way to verify the presence of a selector in Puppeteer?

How can I use Puppeteer to check if #idProductType exists and if not, assign producttype to ""? I have tried multiple solutions but none seem to work. const urls = [myurls, ...] const productsList = []; for (let i = 0; i < urls.length; i++) ...

Determine the total number of hours along with the precise minutes

Could you assist me with calculating minutes? Here is an example: var time_in = '09:15'; var break_out = '12:00'; var break_in = '13:00'; var time_out = '18:00'; var date = '2018-01-31'; var morning = ( ...

Select either one checkbox out of two available options

My form includes two checkboxes, allowing users to click on both of them. I'm wondering if it's possible to set it up so that only one checkbox can be selected at a time. For example, clicking on the first checkbox would turn it on while turning ...

Child element casting shadow over parent element

I am currently using box shadow for both the parent (.map) and child (.toggle-button): .map { position: fixed; top: 20px; right: 0; width: 280px; height: 280px; z-index: 9999; box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.3); } .map ...

Alternate CSS options for controlling printing besides page-break-after and page-break-before

I am in the process of creating a web interface for printing barcodes on Avery label sheets. How can I ensure that the barcodes align perfectly on each label, using measurements like inches or centimeters? And most importantly, how do I prevent the barcode ...

Methods for applying multiple styles within a div using the Document Object Model

Is there a way to add multiple style attributes using DOM `setAttribute` in JavaScript? I've tried doing it but it doesn't seem to work. Can someone provide guidance on how to achieve this? var modify = document.getElementById('options&apo ...

Learn how to use Bootstrap 4 to selectively filter through a list by their data attribute values

I am currently working with a PHP form that looks like this: <form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>" role="search"> <label class="assistive-text" for="s"> &l ...

Navigate to the final element of a mapped array

My current project includes a Message component that showcases all messages, whether incoming or outgoing, within a single thread. One feature I am aiming to implement involves ensuring that the most recent message, a freshly typed one, or an incoming mes ...

Navigating to a URL using "res.render" following the process of fetching POST data from the DOM array in Node.js

Despite browsing through numerous related questions, I am still unsure about the best approach to render a URL after the frontend JavaScript collects DOM data and sends a POST request to an Express server's POST URL. I understand that fetch POST does ...

Having trouble loading CSS and JavaScript files in CodeIgniter version 3.0.4?

I am facing an issue with loading my CSS and JS files in the view file. I have already added them to the folder and set the base URL. These codes were working fine with a project I previously did on an older version of CodeIgniter. What could be causing ...

Unable to view Chart.js on the second tab

I'm currently working on two different charts for a project - a bar chart and a line chart. The bar chart is displayed on the first tab, while the line chart is on the second tab. Interestingly, the bar chart functions properly, and when I point the l ...

How to locate the index.js file within my application using Node.js?

Directory Structure bin - main.js lib - javascript files... models - javascript files... node_modules - folders and files public - index.html route - javascript files... index.js package.json I am using Express and angular.js. The ser ...

The React setState function isn't updating the state as expected when used within the useEffect hook

I'm new to using hooks and I'm facing an issue with setState when trying to update data received from an API. Despite logging the response data successfully, it seems that the state does not update as expected. My useEffect function is set to run ...

What is the best way to apply an outer border to a table using CKEDITOR?

Is there a way to only add an outer border to an HTML table in CKEDITOR? I've attempted to remove the inner borders using the advanced options in CKEDITOR, but it doesn't seem to be working. <table border="1" cellpadding="1" cellspacing="1" ...

Clicking on the LI element will automatically trigger a click event on the input radio button

Whenever I click on an li element, I want the corresponding radio input to be selected. However, when I try to do this, I'm seeing an error in the console log: Uncaught RangeError: Maximum call stack size exceeded How can I resolve this issue? Bel ...

Fill in the username and password on the login page of the website when it is accessed through the mobile application

Currently, I have a Joomla website and mobile App that are hosted on different servers. Both are owned by the same party, and users have accounts on both platforms with identical ID's and passwords (even though they are stored in separate databases, w ...

Is CodeMirror's PHP mode failing to function properly?

There seems to be an issue with displaying the highlighted text, and I'm not sure why. Links: <link rel=stylesheet href="http://codemirror.net/mode/php/../../doc/docs.css"> <link rel="stylesheet" href="http://codemirror.net/mode/php/../../l ...

Step-by-step guide to implementing a month and year date-picker in Mozilla Firefox

I'm looking to create input fields where users can add the month and year. I tried using the code below, but unfortunately Mozilla Firefox doesn't support it. <input type="month" id="start" name="start"> Does ...

Unraveling HTML elements within a string using MongoDB: A step-by-step guide

Currently, I am in the process of creating a blog from scratch as a way to enhance my skills. The posts' content is stored as a long string in MongoDB with some random HTML tags added for testing purposes. I am curious about the conventional method fo ...

creating an interactive table with the help of the useState hook

I'm new to JavaScipt and ReactJS, so I have a question that may seem obvious but I can't seem to figure it out. I am attempting to display my array in a table using useState, but currently I can only show the header. Additionally, if anyone know ...