Remove the AngularUI Accordion when using ng-repeat

Currently, I'm working on integrating a delete function into my ng-repeating accordion component. The delete button appears as expected, and the function is properly set up. However, when the delete button is clicked, the page reloads abruptly and redirects to localhost:8080/# which is not the intended behavior. There seems to be no indication or reason for this redirection, at least none that I can identify. Could this be one of the underlying issues causing this unexpected redirect? Unfortunately, I'm struggling to pinpoint the source of this problem.

Since the application isn't live yet, refreshing the page results in the loss of all data. This data is passed from the previous view to the current editing view, where it is displayed in a table until a row is selected, leading to the editing page.

Below is the JavaScript code for the delete function:

  $scope.delete = function (index, event) {
    if(event) {
        event.preventDefault();
        event.stopPropagation();    
    }

    $scope.selectedTestScript.Actions.splice(index, 1);
  } 

And here is the ng-repeat accordion implementation:

<uib-accordion close-others="oneAtATime">
    <uib-accordion-group ng-repeat="action in selectedTestScript.Actions" is-open="action.isOpen" ng-click="action.isOpen=!action.isOpen">
          <uib-accordion-heading>
              <div>{{action.Description}}<button type="button" class="btn btn-xs btn-danger pull-right" ng-click="delete($index, event)"></i>Delete</button></div>
          </uib-accordion-heading>
          <div>
            <label for="actionNotes" class="control-label col-xs-2">Action Notes</label>
            <div class="col-xs-10">
              <textarea id="actionNotes" type="text" rows="4"ng-model="action.Notes" class="form-control" name="name"></textarea> 
            </div>
          </div>
          <div>
            <label for="actionExpected" class="control-label col-xs-2">Action Expected</label>
            <div class="col-xs-10">
              <input id="actionExpected" type="text" ng-model="action.ExpectedOutcome" class="form-control" name="name">
            </div>
          </div>                  
    </uib-accordion-group>
</uib-accordion>

I would greatly appreciate any assistance with resolving this issue. I've attempted simplifying the function by eliminating the if(event) statement and only using the splice method, but unfortunately, this approach didn't yield the desired outcome.

Thank you in advance.

Answer №1

It appears that you have a form encompassing the code snippet you provided. In this scenario, if you use <button> without specifying a type, it will default to type=submit, causing the original HTML form submission and resulting in a redirect.

To avoid this, you can set the type attribute to button.

Moreover, the expression action.isOpen==!action.isOpen doesn't seem correct. Did you intend to use a single = instead?


Update: There is an informative section within the ui-bootstrap accordion documentation which states:

Known Problems

If you wish to include clickable elements inside the accordion, you must modify the accordion-group template to utilize div elements in place of anchor elements. Additionally, make sure to add cursor: pointer in your CSS. This necessity arises from browsers treating anchor elements as the target for any click event, potentially triggering navigation when certain elements like buttons are nested within the anchor element.

http://angular-ui.github.io/bootstrap/#/accordion

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

How can I incorporate multiple states into a conditional statement in ReactJS?

Is there a more efficient way to achieve this task? I'm struggling to come up with a cleaner solution as the current approach looks messy. I need to check multiple states in an if statement and the only method I can think of right now is the one prese ...

JavaScript function for automatic scrolling to the bottom of the page is not functioning as expected

I'm working on incorporating a terminal/console feature into my website. I came across the JavaScript functions for scrolling down a page, namely window.scrollTo(0,document.body.scrollHeight); and window.scrollTo(0,document.querySelector(".fakeSc ...

Generate seamless rotation within a specified time frame (+- x%)

I need to rotate a cube in my scene with a specific initial speed within a specified timeframe. The end angle of the cube must match the starting angle. To account for potential variations, I am allowing for a deviation of up to 5% in the timeframe. Cu ...

Stopping the setTimeout function triggered by a click event in a Reactjs application

I'm a beginner with Reactjs and I ran into a dilemma while using setTimeOut. I couldn't figure out whether to use clearTimeOut or stopPropagation() to stop it. Here's my code: render: function() { return ( < div className = "colorCl ...

Trouble encountered with JSX in my custom React Library after transitioning to Preact

I've created a straightforward React library that I implement with my own state management, utilizing just a Higher Order Component: import React from 'react'; const connect = (state, chunk) => Comp => props =>{ const newProps ...

Sending form data from a third-party website to Django

Currently, I am running a Django website that holds user information. My goal is to host forms on external websites, such as a newsletter signup form. I want to be able to extract data from a queryset in the URL and send it back to my Django site. At the m ...

Employing a for loop to verify the existence of a JSON key

Currently, I am attempting to loop through an EJS JSON object and verify the existence of values. If a value does exist, I want to add the corresponding URL to an array further down. Upon loading the page, I am encountering an issue where I am informed th ...

iOS devices experiencing issues with fixed positioning

Currently, I am in the process of implementing a few instances of , but I am encountering some issues with the CSS. When viewing the website on an iPad or iPhone, the calendar is positioned correctly as the container covers the window like a fixed position ...

Contrasting an array of items with an array of Objects

I need to match the values in an array called ingredientName with a corresponding array of objects. Here is how they look: const ingredientName = ['chicken', 'cheese', 'tomato', 'lettuce']; let imageObjects = [ { ...

The functionality of Node async/await appears to be malfunctioning

In an effort to streamline my code and reduce the number of callbacks, I decided to explore using async/await. However, I encountered a problem where Express renders the view before the query is complete. The query results are correct, but they come after ...

Tips for preventing URL alteration while submitting a form in JavaScript

form : <form onSubmit={addProduct}> <div> <p>Product Name:</p> <Input className="h-10" width="200px" type="text" ...

I wonder what the outcome would be if I used res.send to send a JSON file instead of res.json

Is it possible to send a JSON file using res.send in NodeJs instead of res.json? What are the potential consequences of doing this and why is it recommended to avoid this practice? ...

JQuery Mobile applies X to all divs with the specified class

I am currently working on a JQuery mobile website with an image slider on 2 different pages. In order to activate the sliders, I am using the following JavaScript code: $(function () { $("#slider").excoloSlider(); }); where '#slider' refers ...

Retrieve a solitary row of information from a MySQL column

Here is an example of a MySQL database with the main table containing fields such as id, name, age, and photos: Table main: 3 John 22 photo1.jpg photo2.jpg photo3.jpg ph ...

Utilizing conditional formatting to set background colors in an HTML table

Our manufacturing company collects and documents data for the parts we produce. Currently, this information is logged on a spreadsheet with drawing dimensions in one column and actual measured values in another. The cell where the actual measured value i ...

Is it possible to convert an object with properties of equal length into a list of objects using JavaScript?

I am working with an object that has multiple keys, each containing a list of equal length: myobj = { 'key1' : [1, 2, 3], 'key2' : ['a', 'b', 'c'], 'key3' : [true, false, true], .. ...

Unable to create service despite being in loaded state

This code represents the core module: (function() { "use strict"; angular .module('wda', [ /* Angular modules */ 'ngRoute', /* 3rd-party modules */ 'ui.bootstrap&ap ...

What is the threading model utilized by node.js?

Upon establishing a connection with a server operating on node.js, how is the connection handled? Is it one connection per process? Does it follow a connection per thread model? Or does it operate based on request per thread? Alternatively, does it use ...

Employing a variable within this Angular Directive to establish validity

I'm having trouble understanding how to utilize a variable in this scenario. In my html code, I have the following snippet inside a loop: <span ng-show='myForm." + ids[i] + ".$error.missingInfo'>Wrong!</span>"; The resulting ht ...

Updating radio button based on selection change in jQuery

I'm struggling with jQuery and can't seem to figure out how to change the selected radio button based on a value in another select box. <div class="radio-inline" id="sourceDiv" role="group"> <input type="radio" id="sourceBtns1" na ...