Question

我正在尝试在Django中实现关注者/关注系统。在模板中，所有关注请求都有一个用户，并且它们都具有可以显示的用户ID。模板是一个配置文件页面，其中包含其他用户提出的多个关注请求。我为每个接受/拒绝创建了一个单独的表单，我想唯一地标识每个表单，以便我可以提交该表单并随后将其删除。


<div class="col s12 l6 trending-panel container">
    <h4>
    Requests
    </h4>
    <div class="divider"></div>


    {% for bond_request in bond_requests %}
    {% if bond_request.accepted == False %}
<div>
    <div class="row bond-request-row" id="{{bond_request.by_user.id}}">


        <div class="col s6">

                <a href="{% url 'accounts:profile' bond_request.by_user.username %}">
                    <div class="col s8">
                            <img class="profile-image-request" src="https://m.media-amazon.com/images/M/MV5BNjUxNDcwMTg4Ml5BMl5BanBnXkFtZTcwMjU4NDYyOA@@._V1_.jpg" alt="">

                    </div>

                    <div class="col s4">

                    <h6 id="follower-username">
                    @{{bond_request.by_user}}
                </h6>
            </div>

            </a>
        </div>  

        <div class=" col s12 center accept-decline-margin">
        <div class="col s12 l6">


            <form action="accounts:accept_bond_request" method="POST" id="bond-request-accept-form">
                    <!-- <a href="#" id="bond-request-accept"  class="green-text white btn">


                        <div>
                                <ion-icon name="add"></ion-icon>

                        <span>Accept</span>
                        </div>


                    </a> -->
                    <button  id="bond-request-accept"  class="green-text white btn" type="submit">Accept</button>
            </form>
        </div>

        <div class="col s12 l6">
                <a  href="" class="grey-text white btn">

                    <div class="">
                            <ion-icon name="remove"></ion-icon>
                        <span>Ignore</span>
                    </div>
                    </a>
        </div>
        </div>
    </div>

<!--  HERE -->
</div>

{% else %}

{% endif %}




                                                            <div class="divider">

                                                            </div>





                                                            {% endfor %}
                                                    </div>

    $("#bond-request-accept-form").on('submit',function(){


      // Cleans the username
      // var each_bond_request = $();
      var raw_follower_username = $("#follower-username").text().trim();
      var follower_username = raw_follower_username.replace("@","");


      console.log("Follower username: ",follower_username);

      $.ajax({
        type: "POST",
        url: "/accounts/user/" + follower_username +  "/accept_request",


        data:{
          "follower_username" : follower_username,
        },



        success: function(data){
          console.log(data);
          M.toast({html: follower_username + ' started following you',classes: 'green'}, );

        },


        error: function(data){
          console.log("All error data: ",data);

          M.toast({html: 'Failure',classes: 'red'}, );
        },

      });


    });

Answer 1

在两种形式的操作中放置不同的URL。然后，您将拥有两个不同的视图函数来处理两种不同的形式。

Answer 2

您应该创建一个独立的函数来处理提交。并以您创建的每种形式引用此函数。

function SubmitHandler (e) {
      // Cleans the username
      // var each_bond_request = $();
      var raw_follower_username = $(e).find("#follower-username").text().trim();
      var follower_username = raw_follower_username.replace("@","");


      console.log("Follower username: ",follower_username);

      $.ajax({
        type: "POST",
        url: "/accounts/user/" + follower_username +  "/accept_request",


        data:{
          "follower_username" : follower_username,
        },



        success: function(data){
          console.log(data);
          M.toast({html: follower_username + ' started following you',classes: 'green'}, );

        },


        error: function(data){
          console.log("All error data: ",data);

          M.toast({html: 'Failure',classes: 'red'}, );
        },

      });
      return false;
}

然后在您的模板中：

...
<form id="bond-request-accept-form" onsubmit="SubmitHandler(this)">
...

请注意，＃follower-username应该嵌套在jQuery的form标记中，以便找到正确的用户名。

Answer 3

首先，我只想说我可能理解你的问题是错误的。如果是这样，请随时纠正我。

如果我了解这项权利，那么您有多个基本相同的副本，但略有不同，具体取决于发送请求的用户。由于ID是唯一的，如果存在多个实例，则可能会在JavaScript中引起问题，因此我将bond-request-accept-form更改为类而不是ID，然后在JQuery中执行以下操作：

$(".bond-request-accept-form").toArray().forEach(function(elem){
    $(elem).on('submit', function(){
        // Logic to perform when the form is submitted
    });
});

如何在一个模板中识别多种形式？

3 个答案: