将值从 fullCalendar 单击传递到 Django 模板

Question

我正在尝试将事件 ID 从 FullCalendar 传递到 Django 模板作为 url 解析器的参数。我正在使用 Django 1.8 和 Twitter Bootstrap。

在我的views.py 中，我有view_shifts(request)，它使用适当的上下文呈现calendar_init.html。

这就是我的 calendar_init.html 大致的样子。

{% extends "base.html" %}
{% block title %} Shifts {% endblock %}
{% block extra_head %}

// links for fullCalendar, jQuery, and Bootstrap

<script type="text/javascript">
    $(document).ready(function() { // Page is now ready.
        // Initialize the calendar.
        $('#calendar').fullCalendar({
            // headers and other settings
            eventClick: function(event, jsEvent, view) {
                $('#calendar').fullCalendar('updateEvent', event);
                $('#modalTitle').html(event.title);
                $('#modalBody').html(event.description);
                $('#fullCalModal').modal();
            }
        });
    });
</script>

<!-- Modal HTML -->
<div id="fullCalModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <form class="fullCalForm" method="post" action="{% url 'shifts:sell' shiftId %}">
            {% csrf_token %}
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
                    <span class="sr-only">close</span></button>
                    <h4 id="modalTitle" class="modal-title"></h4>
                </div>
                <div id="modalBody" class="modal-body"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" data-toggle="modal" data-shift-id="shift_id_value" class="btn btn-primary">Sell</button>
                    <button type="submit" class="btn btn-primary">Buy</button>
                    <!--<button class="btn btn-primary"><a id="eventUrl" target="_blank">Event Page</a></button>-->
                </div>
            </form>
        </div>
    </div>
</div>

<div id="calendar"></div>
{% endblock %}

{% block content %}
<div id="calendar"></div>
{% endblock %}

我遇到问题的部分是shiftId 的<form class="fullCalForm" method="post" action="{% url 'shifts:sell' shiftId %}">。我需要为views.py 中的sell 函数传递班次的id（一个fullCalendar 事件），它以shift_id 作为参数。当我将100 作为测试而不是 shiftId 时，整个事情都按预期工作。我只是不确定如何检索事件的 id 并将其作为参数传递来代替 shiftId。

我已经为此烦恼了一段时间。帮助将不胜感激。谢谢！

编辑：感谢 Daniel 的评论，我能够稍微调整代码以使其更有意义。但是，我仍然无法获得正确的 shiftId 值。我不确定如何将 id 放入隐藏字段并从 sell 函数中检索它。

编辑后，我的代码如下所示：

<!-- Modal HTML -->
<div id="fullCalModal" class="modal fade">
    ...
    <form class="fullCalForm" method="post" action="{% url 'shifts:sell' %}">
    ...
    </form>
</div>

在views.py，我的sell函数：

def sell(request):
    shift = get_object_or_404(Shift, pk=request.POST['shiftId']) # Obviously 
                                        # not working, not sure how to fix it..
    sale = Sale.objects.create(shift=shift, seller=request.user, datetime_sold=datetime.now)
    shift.on_sale = not shift.on_sale
    shift.save()
    return HttpResponseRedirect(reverse('shifts:view_shifts'))

Answer 1

您以错误的方式处理此问题。 url 标记在服务器上在请求时处理模板时进行评估。 shiftId 需要在此时定义，之后不能直接更改。 FullCalendar是一个javascript库，运行在客户端，此时没有url标签，只有一个生成的URL。

因此，如果您希望 fullCalendar 中发生的某些事情影响提交到的表单，您需要执行以下两项操作之一。一种方法是使用您知道永远不会有效的占位符（例如“00000”）预填充该 URL，并让您的 JS 在必要时用 shiftId 的实际值替换该值。

另一个我认为可能更好的方法是将参数从 URL 中完全删除，并将其放入隐藏的表单字段中，该字段将与其余数据一起提交。

编辑

我对 fullCalendar API 一无所知，但我猜eventClick 是单击事件时执行的回调列表。因此，我们需要在 HTML 中添加一个空的隐藏字段，并在 eventClick 中添加一个回调。

eventClick: function(event, jsEvent, view) {
    ...
    $('#clientIdField').val(event.id);
}

<form class="fullCalForm" method="post" action="{% url 'shifts:sell' %}">
  <input type="hidden" name="client_id" id="clientIdField">
  ...
</form>