[Answered ]-How can I remove a particular item using a popup?

by

1👍

In your current code you have included popup.html mutliple times so when you click on a tag its not confirm which modal will get open has all are triggering exampleModal i.e :data-target="#exampleModal" .

So , to overcome this one way would be including only one modal and adding form tags around submit button . Then , whenever user click on a tag you can get action value from form where a tag has been clicked and then add this action value inside modal form tag .

Demo Code :

//on click of `a` tag
$(".dropdown-item").on("click", function() {
  //get closest form from `a` tag then get action from it
  var action_ = $(this).closest("form").attr("action");
  $("#exampleModal form").attr("action", action_) //add that action inside modal form tag
  console.log(action_)

})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="history">
  <div class="">
    <div class="">
      <form method="post">
        {% csrf_token %}
        <input class="global_checkbox" type="checkbox" name="remove_one_history" id="remove_all_history">
        <span class="">12:30</span>
        <div class="">12-04-21</div>
      </form>
    </div>
    <div class="history-content">
      <p><strong>text:</strong> Somethigs</p>
      <p><strong>action:</strong>Ok</p>
      <p><strong>position:</strong> POS

      </p>
    </div>
    <form method="post" action="{% url 'accounts:remove_history' 1 %}">
      <div class="history-list">
        <span class="fa fa-ellipsis-v" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
        <div class="dropdown-menu">
          <a type="button" class="dropdown-item" data-toggle="modal" data-target="#exampleModal">Remove this item</a>
        </div>
      </div>
      <!--remove this line  {% include 'accounts/popup.html' %}-->
    </form>
  </div>
</div>

<div class="history">
  <div class="">
    <div class="">
      <form method="post">
        {% csrf_token %}
        <input class="global_checkbox" type="checkbox" name="remove_one_history" id="remove_all_history">
        <span class="">12:32</span>
        <div class="">22-04-21</div>
      </form>
    </div>
    <div class="history-content">
      <p><strong>text:</strong> Somethigs2</p>
      <p><strong>action:</strong>Ok2</p>
      <p><strong>position:</strong> POS

      </p>
    </div>
    <form method="post" action="{% url 'accounts:remove_history' 2 %}">
      <div class="history-list">
        <span class="fa fa-ellipsis-v" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
        <div class="dropdown-menu">
          <a type="button" class="dropdown-item" data-toggle="modal" data-target="#exampleModal">Remove this item</a>
        </div>
      </div>
      <!--remove this line  {% include 'accounts/popup.html' %}-->
    </form>
  </div>
</div>




<!--just use only one modal no need to include it every time on your page-->

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Warning!!</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <!--added form tag-->
      <form method="post" action="">
        <!--added csrf token-->
        {% csrf_token %}
        <div class="modal-body">
          Do you want to remove this history item?
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-outline-danger">Remove</button>
        </div>
      </form>
    </div>
  </div>
</div>
👤Swati

Leave a comment