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

Posted 2023-02-24

【中文标题】将值从 fullCalendar 单击传递到 Django 模板

【英文标题】：Passing a value from fullCalendar click to Django template

【发布时间】：2015-11-13 03:23:05

【问题描述】：

我正在尝试将事件 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'))

【问题讨论】：

这很不清楚，很遗憾。 shiftId 来自哪里？是否从视图传递到模板上下文中？

@DanielRoseman 抱歉，我不确定如何让问题更清楚。 shiftId 只是一个临时占位符，正确的值应该来自所选事件的 fullCalendar 的event.id。这有意义吗？

【参考方案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>

【讨论】：

啊，这很有道理。如何将 shiftId 作为隐藏表单字段并确保在调用函数时将其传递给 sell(request, shiftId) 函数？

您不应该，您应该将视图更改为 sell(request) 并从 request.POST['shift_id'] 或任何地方获取 shiftId。

好的，我明白你在说什么。我觉得我现在离我更近了。您介意查看我的编辑以获取更多指导吗？