У меня есть две ссылки действий и одно всплывающее окно модели. есть ли способ узнать, какая ссылка действия была нажата - PullRequest
Новая
       5

У меня есть две ссылки действий и одно всплывающее окно модели. есть ли способ узнать, какая ссылка действия была нажата

2 голосов
/ 08 января 2020 

<div><a data-toggle="modal" href="#accmodel" data-target="#accmodel" id="addacc">AddAccomodation</a>
    <div id=modeldetails1></div>
</div>
<div><a data-toggle="modal" href="#accmodel" data-target="#accmodel" id="addacc2">AddAccomodation</a>
    <div id=modeldetails2></div>
</div>

по нажатию кнопки отправки во всплывающем окне модели. Мне нужно выяснить, какая ссылка действия запустила всплывающее окно, чтобы я мог добавить детали в coressponding div 

<div>
    <a data-toggle="modal" href="#accmodel" data-target="#accmodel" id="addacc2">AddAccomodation</a>
    <div id=modeldetails2></div>
</div>
<div class="modal fade" id="accmodel" 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">Modal Header</h4>
            </div>
            <div class="modal-body col-sm-12" id="mbody">
                <div class="form-group">
                    <textarea id="acctext" class="accomodation"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" id="saveaccbtn">Add</button>
            </div>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

        </div>
    </div>
</div>

Ответы [ 2 ]

3 голосов
/ 08 января 2020

вы можете сделать это, используя jquery просто 

<div><a  href="#accmodel" data-clicked="from link 1" id="addacc">AddAccomodation</a>
<div id="modeldetails1"></div></div>
<div><a href="#accmodel" data-clicked="from link 2"   id="addacc2">AddAccomodation</a>
 <div id="modeldetails2"></div></div>
 <script>
  $(document).ready(function(){


   $('#addacc').click(function(){
      alert($(this).data('clicked'));
      $('#accmodel').modal('show');
   });

  $('#addacc2').click(function(){
     alert($(this).data('clicked'));
     $('#accmodel').modal('show');
  });
 });
 </script>
3 голосов
/ 08 января 2020

Вы можете достичь этого простым способом 

    $("#addacc").on("click", function(){
        // append the details to the corresponding div for this button as you want
        $("#accmodel").find("#mbody").text("Any contant for first button was clicked accordingly");
    });

    $("#addacc2").on("click", function(){
        // append the details to the corresponding div for this button as you want
        $("#accmodel").find("#mbody").text("Any contant for second button was clicked accordingly");
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>


<div><a data-toggle="modal" href="#accmodel" data-target="#accmodel" id="addacc">AddAccomodation</a>
<div id=modeldetails1></div></div>
<div><a data-toggle="modal" href="#accmodel" data-target="#accmodel" id="addacc2">AddAccomodation</a>
<div id=modeldetails2></div></div>

<div class="modal fade" id="accmodel" 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">Modal Header</h4>
        </div>
        <div class="modal-body col-sm-12" id="mbody">
            <div class="form-group">
                <textarea id="acctext" class="accomodation"></textarea>
            </div>
        </div>
        <div class="modal-footer">
                <button type="button"id="saveaccbtn">Add</button>
            </div>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

        </div>
    </div>

</div>
...