Question

我有一个包含多行数据的表。用户可以滚动每一行，单击一行，并提示您对该行执行某些操作（更新，删除等）。

我能够使用Javascript获取被点击的行的ID（id是重要的，因为它是模型对象的id）并且使用id对服务器进行AJAX调用但是我无法在第一次服务器调用之后重新定向到页面，而不需要再次访问服务器，因为AJAX需要响应。

所以我试图在没有AJAX的情况下完成这项工作。有没有办法将行的id传递给下面模式的url（在a-tag中）？或者是否有一个更好的模式来实现这一点，我错过了。这个问题似乎必须有一个明显的解决方案，而且我已经过度思考了......

这是我桌子的相关代码。

编辑：我也在使用Django作为我的后端/模板引擎。

<tbody id="trip-request-table">
    {% for key in need_trips %}
    <tr id={{key.trip_ptr_id}} onClick="updateRow(this.id)">
        <td>{{key.created|date:'Y-m-d'}}</td>
        <td>{{key.user.name}}</td>
        <td>{{key.arrival_date|date:'Y-m-d'}}</td>
    </tr>
    {% endfor %}
</tbody>

这里是抓取id并触发模态的Javascript：

    function updateRow(id) {
        //alert('id: ' + id);
        var rowId = id;
        var modal = $('#manage-trip');

        var row = document.getElementById(id);
        var cells = row.getElementsByTagName('td');
        var arrivalCity;
        var departureDate;

        for (var i =0; i < cells.length; i++) {
            if(i == 4) {
                departureDate = moment(cells[i].innerHTML).format('MMMM Do, YYYY');
            } else if(i == 6) {
                arrivalCity = cells[i].innerHTML;
            } 
        }

        modal.find('.modal-body').text('Would you like to update your trip to ' + arrivalCity + ' on ' 
            + departureDate + '?');
        //updateRow.find('.modal-body input').val(id);
        modal.val(id);
        console.log('show modal');
        modal.modal('show');
        console.log('trip id: ' + id);

        $("#update-trip").off().click(function(event) {
            $('#manage-trip').modal('hide');
            var contentType = "application/x-www-form-urlencoded";
            var processData = true;
            var endpoint = "{% url 'trips:updateTripGet' pk=1 %}";
            var payload = false;

            updateTrip(contentType, processData, endpoint, payload);
        });

    }

这是模态代码：

<div class="modal" id="manage-trip" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Edit your trip</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <a href="{% url 'members:updateTrip' %}" type="button" class="btn btn-primary">Update</a>
        <!--<button type="button" class="btn btn-primary" id="update-trip">Update</button>-->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#delete-trip">Delete</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 1

我解决这个问题的方法是让模态触发这段代码：

$("#update-trip").off().click(function(event) {
    $('#manage-trip').modal('hide');
    var contentType = "application/x-www-form-urlencoded";
    var endpoint = "{% url 'members:updateTrip' %}";
    var payload = false;

    //updateTrip(contentType, processData, endpoint, payload);
    submitForm(contentType, endpoint, rowId);
});

该代码块调用一个动态创建表单并将其提交给服务器的函数。我想这对大多数网络开发者来说只是另一个明显的解决方案，但我是一名新手。我确定我会把它清理干净，但有些人只是把它搞定了。

这个解决方案的好处是你可以避免在每个表行等中创建表单。

function submitForm(contentType, endpoint, rowId) {
    var form = document.createElement("form");
    var element1 = document.createElement("input");
    var element2 = document.createElement("input");

    form.method = "POST";
    form.enctype = contentType;
    form.action = endpoint;
    element1.type = 'hidden';
    element1.value= rowId;
    element1.name= "trip_id";
    form.appendChild(element1);
    element2.type = 'hidden';
    element2.value= '{{ csrf_token }}';
    element2.name= 'csrfmiddlewaretoken';
    form.appendChild(element2);

    document.body.appendChild(form);

    form.submit();
}

在没有AJAX的情况下将表中单击项的ID发送到服务器

1 个答案: