Dismiss Bootstrap modal in controller upon receiving server response

After submitting the form, a request is sent to the server and a modal window appears. Once the server responds with success, the modal should be closed and a new page should load.

I attempted using ng-show and ng-if in the controller to toggle visibility based on certain conditions, but this doesn't handle dismissing the modal backdrop. While I can close the modal within the same page using data-dismiss="modal", how can I achieve this from the controller before redirecting to a new page?

<div id="myModal" class="modal fade" role="dialog" aria-hidden="true">
 <div class="modal-dialog">
  <div class="modal-content">    
    <img src="img/processing.gif" id="ajaxSpinnerImage" title="working...">
  </div>
</div>

Clicking on the Submit button triggers the following action

<button type="submit" data-toggle="modal" 
data-target="#myModal"  ng-click=" formsubmit(orderForm.$valid); ></i>  
Place Order </button>   

Initiating a server call from the Controller

 $scope.formsubmit = function (isValid) {
      if (isValid) {                              
                  $http.post($scope.url).
                    success(function (data, status) {  

                        //NEED TO CLOSE THE MODAL HERE
                   //Proceeding to a new page
                   window.location.assign("NewPageToNavigate.html");

                    })
      }                

Answer №1

Implement this Bootstrap modal feature to automatically close the modal after sending a response to the server:

$('#myModal').modal('hide');

For more details and additional options, refer to the Bootstrap documentation.

If you encounter any issues with the body and backdrop classes not being removed, double-check your code as Bootstrap should handle their removal when using the method mentioned above.

Answer №2

Make sure to hide the modal once the controller has processed the response

$('#myModal').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();

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

Easy Steps to Showcase Blob Image in React Native

Check out my code sample: <Image source={BlobImage} style={{ height: 200, width: null, flex: 1 }} /> In this case, BlobImage represents an image stored as a blob string, like so: c916851b-3e53-432d-8d18-3de293776859?offset=0&size=371537. Updat ...

Confirm the dimensions of an image prior to uploading using Node, Express, and Multer

Currently, I am developing a project using Nodejs with the express framework and ejs as the view engine. I have encountered an issue while working on image uploads. I am utilizing Multer for this task, but I need to implement a requirement where images wil ...

Ways to adjust the size of the parent element based on the height of a specific element

I am faced with a situation where I need to identify all elements belonging to a specific class and adjust the padding-bottom of their parent div based on the height of the matched element. For example, consider the following structure: <div class=&ap ...

The dropdown list in angularjs is failing to populate with options

For populating a dropdownlist using angularjs, I attempted the following: var app = angular.module('App', []); app.controller('UserSelection', function ($scope, $location) { var User = this; User.onSelectChange = function () { i ...

Incorporating AngularJS to parse a JSON file

{ "statusCode": "000", "statusMessage": "Record Successfully Fetched", "dsStatusCode": "000", "dsStatusMessage": "Record Successfully Fetched", "businessInput": null, "businessOutput": { "systemCircleId": "2", "categ ...

Preventing Flash of Unstyled Content in ElectronJS Browser Windows

Upon creating a new BrowserWindow and utilizing loadURL to incorporate an html file within the renderer, there is a brief instance where unstyled content is displayed for approximately half a second before the css is loaded. window.loadURL('file://&a ...

Assign JSON data to an array

Currently, I am utilizing datatables to display a response in a tabular format. However, when it comes to testing with a JSON dataset, I am encountering difficulties extracting the values from it. I have looked into using jquery.map but I am struggling to ...

When you hover over an image, both the image's opacity and the color of the title beneath it change. However, if the title expands to two lines, it messes up

I am currently working on a project where I have an image and a title displayed below the image. My goal is to change the color of the text when hovering over the image, as well as adjust the opacity of the image. Additionally, when hovering over the title ...

Encountering net::ERR_INSUFFICIENT_RESOURCES error message when trying to upload multiple images with NodeJS

After conducting some research, I have found various approaches to limit the number of files to be uploaded. Currently, I am working on a web application (powered by nodeJS server) that includes a feature for file uploads, mostly images. At present, I have ...

What steps should I take to fix this JavaScript code?

I've been experimenting with JavaScript and trying to hide the image and button. However, every time I run the command, the footer keeps moving to the top of the page. How can I fix this issue? I've attempted various solutions, such as using posi ...

Error encountered with auto-generated keys in Angular while using Breeze and MongoDB

Using Breeze with Angular and MongoDB has been my recent project. To ensure seamless integration, I have meticulously added all the required services and scripts for Breeze to work flawlessly with Angular and MongoDB. Despite my efforts, encountering an ...

Step-by-step guide for embedding a Big Commerce website into an iframe

Can a website be opened inside an iframe? If not, is it possible to display a message like 'page not found' or 'this website does not allow data fetching in iframes'? <!DOCTYPE html> <html> <body> <h1>Using the ...

When using Vuejs, it's important to note that the DOM.getBoundingClientRect event does not trigger on window scroll events, but instead

Situation: I am currently developing an infinite scroll feature on a website. The goal is to load more rows in a table when the bottom of the table reaches the bottom of the viewport from outside of it. Implementation: To achieve this, I first declared a ...

Personalized HTML Input Field for Digital Keyboard Scores

As a new JavaScript beginner, I have experimented with various approaches in an attempt to create a website that features a digital piano experience without the actual instrument. My goal is to develop a platform where pressing multiple keys together will ...

Using React JSX to set a dynamic color when hovering over an element

Hello there! Thanks for taking the time to read my inquiry. I have been presented with a challenge involving a specific color chosen by the customer. This color plays a crucial role in the overall application context. I've successfully managed to cha ...

Acquire image dimensions with Javascript when uploading a file

I am working with a file upload interface where users will be uploading images. My goal is to validate the height and width of the image on the client side. Is there a way to determine the size of an image using just the file path in JavaScript? Important ...

Ways to extract information from a dynamically loaded webpage

Is there a way to extract data from a news website that automatically reloads at set time intervals? I want to use this data on my own website as information, whether it's in the form of images or text. Can anyone guide me on how to retrieve data from ...

Harnessing the power of dynamic scope variables within an ng-if statement

I am trying to implement ng-if directives based on the values of "male", "female" or "all". However, when using data-ng-show, the values are working fine as true and false for AnswerList2[index][GenderTypeAnswer]. I want to achieve this without displaying ...

Separating ReactJS methods and useState functionality into their own files is a best practice for organizing

One of my components is called Invoice.js, which currently has over 1000 lines of code. I am looking to extract certain methods and their related useState functionality into a separate file. Within this component, there is an array named items that gets f ...

Using AJAX to call a VB ASP.NET web method with parameters in the GET request

I've come across numerous inquiries regarding this issue, but I can't seem to find a solution (the abundance of questions on the internet about this topic is astonishing!!). Let me be direct: test.asmx 'Simple POST method with parameters ...