Using Angular with Bootstrap modal. Issue with modal not closing when using a specific data-ng-click function

Having trouble with a specific Bootstrap confirmation modal that is not functioning properly with my intended function. It works fine with a basic function that displays an alert window, but when I replace it with the desired function (deleting an image from File-stack and my db), the modal hangs up. The issue arises when the function executes upon clicking the first button in the modal-footer section at the bottom of the modal. While the close button works without any problems, the modal window gets stuck with a grey overlay after executing the removeMoreImage() function. Below is the code for the Bootstrap modal:

        <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#confirm-modal-more"> <span class= "glyphicon glyphicon-remove-circle"></span> REMOVE IMAGE</button>

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

            <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Remove Image Confirmation</h4>
            </div>
            <div class="modal-body">
              <p>Are you sure you want to delete this image?</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-danger"  data-ng-click="removeMoreImage(picture.url, car)" data-dismiss="modal" >REMOVE</button>
              <button type="button" class="btn btn-default" data-dismiss="modal">CANCEL</button>
            </div>
            </div>

          </div>
        </div>

Below is the function that seems to be causing the hang-up:

var getIndexIfObjWithOwnAttr = function(array, attr, value) {
    for (var i = 0; i < array.length; i++) {
        if (array[i].hasOwnProperty(attr) && array[i][attr] === value) {
            return i;
        }
    }
    return -1;
}

$scope.removeMoreImage = function(image, data) {
    var index = getIndexIfObjWithOwnAttr(data.morePictures, 'url', image);
    data.morePictures.splice(index, 1);
    filepickerService.remove(image);
    console.log(image + " has been removed!");
}

If anyone has insights or advice on how to resolve this issue, it would be greatly appreciated. It seems like a synchronization problem, but I'm unsure.

Answer №1

After experimenting with different options, I discovered a query that effectively closes the modal. While it may not be the most elegant solution I was hoping for, it does get the job done. Below is the code snippet I integrated into the function causing the modal to hang.

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

Answer №2

To close the modal and send a result back to the parent controller, you can incorporate the following script:

$uibModalInstance.close('some result of modal');
$uibModalInstance.dismiss('some reason for discarding and closing');

$scope.removeMoreImage = function(image, data) {
    var index = getIndexIfObjWithOwnAttr(data.morePictures, 'url', image);
    data.morePictures.splice(index, 1);
    filepickerService.remove(image);
    console.log(image + " has been removed!");

    // Close the modal
    $uibModalInstance.close();
}

https://angular-ui.github.io/bootstrap/#/modal

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

"Chrome supports inline JavaScript functionality, while Firefox does not seem to handle it effectively

I'm having an issue with my page layout where I've set up an HTML table structure. I want to display static text if the td is empty. Here's the code I'm using: <td> <div id="dvCountry"> <SharePointWebContro ...

Exploring the process of comparing dates within the Fullcalendar plugin when utilizing an array of dates

Looking to compare a specific set of days in an array with all the dates on the calendar. Here is the code that I've written so far. How should I go about passing the array to the dayrender function? Function for retrieving the dates function GetFoo ...

Display of environment variables in the production build

In a nutshell, I somehow "downloaded" my app (Ctrl+S or right click+save as) and discovered that my environment variables are not hidden but stored in a file named main.xxxx.js (where xxx is the build hash). I came across a secret key for a service in tha ...

Obtaining slider images using XML in ColdFusion

I've been attempting to incorporate a slider into my ColdFusion page by using a jQuery script that fetches images from an XML file. The XML file contains paths and other image details, but unfortunately, the slider isn't functioning as expected. ...

The error message "TypeError: e.preventDefault is not a function" indicates that

I'm fairly new to JavaScript and jQuery, and I've incorporated two jQuery plugins into my code - jQuery form validator and jQuery form ajaxSubmit. Initially, everything was working fine with normal AJAX submission until I needed to post a file, w ...

The value returned is undefined when using getStaticProps

Recently, while working on my project with Next.js, I encountered an issue where I was trying to access data but kept getting undefined. Below is the code snippet that I was working with: function Home({books}) { console.log(books) return <div>Home ...

Concerns with JavaScript Scope

I'm currently working on a function that I need help with. The function seems pretty straightforward to me: function CheckFile(path){ var status = false; $.ajax({ url: "http://mydomain.com/"+path, type: "HEAD", s ...

Stop HTML audio playback upon clicking on a specific element

I'm looking to add background music to my website with a twist - a music video that pops up when the play button is clicked. But, I need help figuring out how to pause the background music once the user hits play. Play Button HTML - The play button t ...

Creating expandable card components with React and CSS using accordion functionality

I am currently working on creating a card that will expand its blue footer when the "view details" link is clicked to show lorem text. However, I am encountering an issue where the blue bottom of the card does not expand along with the lorem text. You can ...

In order for data with two fields to be displayed correctly in an angular.js table, it must be shown twice

Within my angular.js table, data is being received and stored in a variable called dataArr. var dataArr = [ 0: "aaa", 1: "bbb" ] I have a condition that if the length of the data is greater than 0, it must be displayed twice in the table structure. For i ...

"Resolving problems with file uploads in Angular JS, Express JS, and Node

Need some assistance I'm still new to this and when it comes to file uploads, I found help from this resource - Below is my implementation. I've omitted certain parts to ensure readability of the post size. The main issue lies with the file upl ...

Undefined ExpressJS variable error

I am currently working on an ExpressJS application where a user can make a POST request to a specific route. This route is designed to look up the ID in MongoDB using req.params.formId. To aid in debugging and understanding the data being returned, I have ...

What is the best way to have NextJS add styles to the head in a production environment?

Typically, NextJS will include <style> tags directly in the head of your HTML document during development (potentially utilizing the style-loader internally). However, when running in production mode, NextJS will extract CSS chunks and serve them as ...

Executing Code Upon Module Load and Presenting It as Middleware

I am currently delving into the intricacies of how exporting and importing modules function in Nodejs. One of my tasks involves using a specific file to seed a mongodb database. Surprisingly, this file operates flawlessly and delivers the desired results ...

Button that vanishes when clicked, using PHP and HTML

I am in the process of creating an online store and I am seeking to implement a button that directs users to a new page, but then disappears permanently from all pages within the store. Here is the code snippet I have developed so far: <input class="b ...

Angular: searcher function behaves differently based on the type of data being filtered

Can you quickly check out these two examples and tell me why one is working while the other isn't? Here is the first example with real json data extracted from my app, which is not working: http://plnkr.co/edit/2Z5SMlANCGd3r4Trfwzm?p=preview And her ...

Changing a single image within a v-for loop of images in Vue

I am currently working with an array in Vue where I am using v-for to create 3 columns of information. Each column includes an image, and I would like to be able to change only the specific image that is being hovered over without affecting any others. How ...

Can you upload a file using the MaterialUI Upload Button in React and then send it to Firestorage?

Hi everyone! I recently implemented MaterialUI's Upload Button in my project, which you can find here: https://material-ui.com/components/buttons/ Below you will see the code snippet where I have integrated this button and now I am trying to upload a ...

Username text field should not allow space characters on web and mobile platforms

Currently, I have implemented code to prevent spaces while the user is typing on a web platform: $("#user_name").on("keydown",function(e){ return e.which !==32; }); Unfortunately, this code does not seem to work when the form is accessed through a mobile ...

Using TypeScript, pass an image as a prop in a Styled Component

I am facing an issue with the code below that is supposed to display the "NoBillsLaptopPNG.src" image on the screen, but for some reason, the image is not showing up. The images are being imported correctly, so I'm unsure why the image is not appeari ...