具有特定功能的发送按钮 Javascript CSS HTML

我创建了一个按钮，可以在特定条件下发送电子邮件。我想，一旦我发送一条消息，停用按钮五分钟，然后显示一条弹出消息，该消息将显示在他们有可能再次发送电子邮件之前的剩余时间。该消息可能是“在您再次发送该消息之前，还有3分20秒。”。当且仅当光标位于按钮上时，才会显示此消息，否则不会发生任何事情。到目前为止，当我点击按钮时，它关闭了，但没有发生其他事情。我的意思是django的函数从未被调用。。。。我怎样才能修好它，让它做我想做的？如何在该消息中显示剩余时间？使用

JsonResponse（）

编辑：

---

我还有一个关于

setTimeout

的问题。客户端只需重新加载页面即可轻松跳过5分钟的等待。我可以用什么来代替设置超时，这样它就不会做这样的事情了？

要获得剩余的时间，可以使用以下方法：

$(function(){
var timeout;
  $('.select-another-button').each(function(){
    $(this).bind('click', function(e) {
      $(this).attr('disabled','true'); //disables the button
      $('#overlay').show(); //after disabling show the overlay for hover
      timeout = setTimeout(function(){ 
        $(this).attr('disabled','false'); //enables after 5mins
        $('#overlay').hide(); //hide the overlay
      }, 300000);
      e.preventDefault();
      fileBrowser(this);
      return false;
    });
  });
});

$("#overlay").hover(function(){
  var timeleft =  Math.ceil((timeout._idleStart + timeout._idleTimeout - Date.now()) / 1000);
    $('#send-message').html("Please wait" + timeleft).show();
},function(){
    $('#send-message').hide();
});

---

如果

show（）

和

hide（）

不起作用，请尝试

.css（“显示”、“块”）

为获得剩余时间，您可以使用以下方法：

$(function(){
var timeout;
  $('.select-another-button').each(function(){
    $(this).bind('click', function(e) {
      $(this).attr('disabled','true'); //disables the button
      $('#overlay').show(); //after disabling show the overlay for hover
      timeout = setTimeout(function(){ 
        $(this).attr('disabled','false'); //enables after 5mins
        $('#overlay').hide(); //hide the overlay
      }, 300000);
      e.preventDefault();
      fileBrowser(this);
      return false;
    });
  });
});

$("#overlay").hover(function(){
  var timeleft =  Math.ceil((timeout._idleStart + timeout._idleTimeout - Date.now()) / 1000);
    $('#send-message').html("Please wait" + timeleft).show();
},function(){
    $('#send-message').hide();
});

---

如果

show（）

和

hide（）

不起作用，请尝试

.css（“display”，“block”）

首先，我认为您没有将正确的消息Id放在那里。在您的javascript中，将

$（“#消息”）

更改为

$（“#发送消息”）

@Leila谢谢，但到目前为止它并没有解决我的问题？@J.Doe，即使您成功，此代码也不会阻止任何人重新加载页面并在您的限制之前发送消息。对不起，这个解决方案看起来没用。@KoshVery是的，我知道。根据您的说法，是否有一种聪明的方法来修改它，以便即使我们重新加载页面，它也能正常工作？我可以用其他东西代替setTimeout吗？@J.Doe，因为我们不能信任客户端，我们必须在服务器端存储和检查此信息。仅允许登录用户发送消息。将

user\u id

+

last\u msg\u time

写入数据库。当客户端请求该页面时，您将检查该用户的时间是否已到。如果用户可以发送消息，请向他们显示表单。如果他们还不能发送，则向他们显示剩余时间，而不是表格。在用户发送一条消息后，也会向他们显示重新加载时间，但是如果他们重新加载页面，直到时间到了，他们才会再次看到表单。这是一种更复杂的方法，但更防弹。希望有帮助。首先，我想你只是没有把正确的信息Id放在那里。在您的javascript中，将

$（“#消息”）

更改为

$（“#发送消息”）

@Leila谢谢，但到目前为止它并没有解决我的问题？@J.Doe，即使您成功，此代码也不会阻止任何人重新加载页面并在您的限制之前发送消息。对不起，这个解决方案看起来没用。@KoshVery是的，我知道。根据您的说法，是否有一种聪明的方法来修改它，以便即使我们重新加载页面，它也能正常工作？我可以用其他东西代替setTimeout吗？@J.Doe，因为我们不能信任客户端，我们必须在服务器端存储和检查此信息。仅允许登录用户发送消息。将

user\u id

+

last\u msg\u time

写入数据库。当客户端请求该页面时，您将检查该用户的时间是否已到。如果用户可以发送消息，请向他们显示表单。如果他们还不能发送，则向他们显示剩余时间，而不是表格。在用户发送一条消息后，也会向他们显示重新加载时间，但是如果他们重新加载页面，直到时间到了，他们才会再次看到表单。这是一种更复杂的方法，但更防弹。希望能有帮助。

    <div class="wrapper">
        <div id="overlay"></div>
        <a href="#"
           title="{% trans "Send email - rejected file(s)" %}"
           class="btn btn-icon select-another-button"
           data-url="{% url "messaging:send" request_id=object.pk %}">
            <i class="material-icons">assignment_late</i>
            <div class='alert alert-success' id='send-message' style="display: none;">
                <p>
                The message was sent to the client. Please wait 5 minutes <br> before sending the message again.
                </p>
            </div>
        </a>
    </div>

app_name = 'messaging'
urlpatterns = [
    ...

    url(r'^send/(?P<request_id>[0-9]+)/$',
        send, name='send'),
]

@staff_member_required
@csrf_exempt
def send(request, request_id=None):
    req= Request.objects.get(pk=request_id)
    request_folders = req.folder.all_files.all()
    context = []

    for doc in request_folders:
        if doc.meta.state == u'rejected':
            context.append(doc)

    if context:
        ctx = {'request': req}
        EmailFromTemplate('document-refusal', extra_context=ctx)\
            .send_to(req.customer.user)

    return HttpResponse('')

$(function(){
var timeout;
  $('.select-another-button').each(function(){
    $(this).bind('click', function(e) {
      $(this).attr('disabled','true'); //disables the button
      $('#overlay').show(); //after disabling show the overlay for hover
      timeout = setTimeout(function(){ 
        $(this).attr('disabled','false'); //enables after 5mins
        $('#overlay').hide(); //hide the overlay
      }, 300000);
      e.preventDefault();
      fileBrowser(this);
      return false;
    });
  });
});

$("#overlay").hover(function(){
  var timeleft =  Math.ceil((timeout._idleStart + timeout._idleTimeout - Date.now()) / 1000);
    $('#send-message').html("Please wait" + timeleft).show();
},function(){
    $('#send-message').hide();
});