I have implemented a bootstrap modal, but whenever I trigger a function on the JavaScript side, it automatically closes. I am aiming for the modal to remain open

<div id="responsive-modal3"   class="modal fade"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none; "  data-keyboard="false" data-backdrop="static"    ng-init = "populateBidSpocData()" >
   <div class="modal-dialog modal-lg">
      <div class="modal-content" style="margin-top:55px;">
         <div class="modal-header" style="background:#003c4c;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:#FFF;"> <span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title"  style="color:#FFF;">Check Availibility</h4>
         </div>
         <div class="modal-body">
            <table class="table table-hover hd-bg-table table-bordered">
               <thead>
               <tbody>
               <thead>
                  <tr>
                     <th class="text-center" style="vertical-align:middle" rowspan="2"></th>
                     <th class="text-center" style="vertical-align:middle" rowspan="2">Bid SPOC</th>
                     <th class="text-center" style="vertical-align:middle" rowspan="2">Role</th>
                     <th class="text-center" colspan="5">SPOC's Availability(Number of Service Requests Per Stage)</th>
                  </tr>
                  <tr>
                     <th><b>Initiation</b></th>
                     <th><b>SPOC Assignment</b></th>
                     <th><b>Participant Contribution</b></th>
                     <th><b>Review</b></th>
                     <th><b>Closure</b></th>
                  </tr>
               </thead>
               <tr ng-repeat="x in infoWithStatus track by $index">
                  <td align="center"><input type="checkbox" ng-model="infoWithStatus[$index].checked"></td>
                  <td ng-model="infoWithStatus[$index].name">{{x.name}}</td>
                  <td>
                     <select ng-model="infoWithStatus[$index].selectedRole" ng-options="item for item in SPOCroles">
                        <option value="">Please select a role</option>
                     </select>
                  </td>
                  <td>{{x.count1}}</td>
                  <td>{{x.count2}}</td>
                  <td>{{x.count3}}</td>
                  <td>{{x.count4}}</td>
                  <td>{{x.count5}}</td>
               <tr/>
               </tbody>
               </thead>
            </table>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-primary waves-effect waves-light"  data-dismiss="modal" ng-click="validate(infoWithStatus)" >Done</button>
            <button type="button" class="btn btn-primary waves-effect waves-light"  data-dismiss="modal" >Close</button>
         </div>
      </div>
   </div>
</div>

After the validation process, I want to keep the model open instead of closing it automatically. This allows for further actions to be taken within the modal window.

Answer №1

It is advised to eliminate

data-dismiss="modal"

at this location

<button type="button" class="btn btn-primary waves-effect waves-light"  data-dismiss="modal" ng-click="validate(infoWithStatus)" >Done</button>

Furthermore, within your validate(infoWithStatus) function, when validation is successful, the modal should be closed using the following code snippet:

$("#responsive-modal3").modal("hide"); 

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

Steps to enable navigation to external pages from a ReactJS app

I am working on a simple ReactJS application: [Demo] [Source] I am trying to implement navigation within the app from external sources without refreshing the web page. This functionality should be similar to using this.props.history.push(...). /public/i ...

Tips for adjusting the font size of choices within the Material UI autocomplete component

Hey there, I'm currently working on a project using the Material Table and I'm looking to adjust the font size of the options in the Material UI Autocomplete. Any tips would be greatly appreciated! Thanks https://i.sstatic.net/ZM17w.png import R ...

Problem with the "st-sort" feature in Smart-Table

Currently, I am working with angular version 1.3.15. To retrieve data, I am making an API call and then passing it to the smart table through the scope like this When checking the console, here is the data format of 'scope.rowCollection' The da ...

When using Node.js, the process.exit() function will not terminate if there is an open createReadStream

My program interacts with Asterisk using EAGI, where Asterisk communicates with my Node.js application by sending data via STDIN and receiving commands via STDOUT. When a user ends the call, the Node.js process receives a SIGHUP signal for clean terminatio ...

What is the best way to transfer variables to a different page through a pop-up window?

I'm working with a function that converts the Id of the clicked element into a variable, then opens a new window with a different page. How can I access or utilize this variable on the newly opened page? var idToWrite = []; $(function(){ $(".szl ...

Data is present in a JavaScript array, yet it is returning a value of

In my quest to create an array of User IDs for an AJAX Post Request, I encountered a strange issue. Despite successfully retrieving and displaying the User IDs individually in console.log, once I push them to the connectionData array, accessing specific in ...

Add the onclick() functionality to a personalized Angular 4 directive

I'm facing an issue with accessing the style of a button in my directive. I want to add a margin-left property to the button using an onclick() function in the directive. However, it doesn't seem to be working. Strangely, setting the CSS from the ...

The process of deploying production-ready code using webpack and angular2

Currently, my Angular 2 code utilizes both webpack and grunt. During development, I rely on webpack-dev-server as a grunt task. When it comes to preparing the code for production deployment, I handle all minification tasks through Grunt which results in t ...

Revamping HTML Label 'for' with JavaScript: Unveiling Effective Techniques

I'm facing an issue with changing the target of a label that is associated with a checkbox using JavaScript. Here's the code I have: <input type="checkbox" id="greatId" name="greatId"> <label id="checkLabel" for="greatId">Check Box&l ...

A step-by-step guide on implementing the bootstrap paginator library to paginate PHP echoed data

I'm currently working on a project that involves displaying data from a database in a table. To make the data paginated on the client side, I decided to use the bootstrap paginator library available at: Below is the code I'm using: In my header ...

What is the best way to choose the page number using numeric paging in RadGrid?

I have implemented a JavaScript function that binds onchange to onbeforeunload or a confirm box only when there are changes on the grid. My goal is to target the footer paging anchors in order to prevent triggering the confirm or onbeforeunload events. Us ...

Understanding AngularJS - Implementing deep watching within a directive

Im working with this directive: { scope: { 'id' : '=id' } link: function ($scope) { $scope.$watch('id', function(x) { console.debug(x); }); } } When I call it like this: <my-directive id="Item.ToWatch" /> I ...

"AngularJS makes it easy for the logged-in user's information to be accessible and available across

I need to ensure that user information is accessible across all views after logging in. How can I adjust the code to be able to retrieve the pseudonym from another view? Could you provide an example as well? Below is my login controller: app.controller ...

What is the most effective way to retrieve cursors from individual entities in a Google Cloud Datastore query?

I am currently working on integrating Google Cloud Datastore into my NodeJS application. One issue I have encountered is that when making a query, only the end cursor is returned by default, rather than the cursor for each entity in the response. For insta ...

Implement pagination for an array in JavaScript

I am seeking a solution involving displaying a JavaScript object in a paged format. For instance, given the sample object below, I aim to present it as pages based on the value stored in the perPage variable. { "fruits":[ { "from":"Shanghai ...

Set panning value back to default in Ionic

I need assistance with resetting the panning value. Essentially, I would like the panning value to return to 0 when it reaches -130. Below is my code snippet: swipeEvent($e) { if ($e.deltaX <= -130) { document.getElementById("button").click(); ...

Grouping items by a key in Vue and creating a chart to visualize similarities among those keys

I am working with an object that has the following structure; { SensorA: [ { id: 122, valueA: 345, "x-axis": 123344 }, { id: 123, valueA: 125, "x-axis": 123344 }, { id: 123, valueA: 185, "x-axis": 123344 }, { ...

The functionality of wp_script_is in WordPress seems to be malfunctioning when it comes to

I need to load a certain file only after a specific script has finished loading. Wordpress offers a useful method called 'wp_script_is' for detecting if a script has loaded or not. When I use the jquery handle with "done", it functions as expecte ...

methods for removing json comments using javascript

Looking to remove JSON comments using JavaScript? I believe a regular expression would be the most efficient method. { "field": { // comments "n": 1 /* multi-line ... comments */ }, ...

dividing an HTML string into individual variables using JavaScript

How can a string be split in pure JavaScript (without using JQuery/dojo/etc) in the most efficient and straightforward way? For example: var tempString = '<span id="35287845" class="smallIcon" title="time clock" style="color:blue;font-size:14px;" ...