将值从 fullCalendar click 传递到 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 %}

我遇到问题的部分是 <form class="fullCalForm" method="post" action="{% url 'shifts:sell' shiftId %}"> 的 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 中发生的事情影响提交的表单，您需要执行以下两项操作之一。一种方法是用一个你知道永远不会有效的占位符预填充 URL - 例如“00000” - 并让你的 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>

将值从 fullCalendar click 传递到 Django 模板

Passing a value from fullCalendar click to Django template

django

django-templates

django-urls

fullcalendar

twitter-bootstrap