Django:创建一个"更改按钮"或等待页面

时间:2015-03-03 16:43:27

标签: javascript python django

我有一个名为 c.py 的外部python程序,它“计数”最多20秒。 我从我的Django app views.py 中调用它,在html页面中我有一个按钮来启动它。没关系(=在Eclipse中我可以看到当我按下网页上的按钮时c.py打印0,1,2,3,... 20)但我希望按钮从“GO”变为“WAIT” “在 c.py 过程中(或者我想在计数过程中执行等待页面或弹出窗口)。

c.py

import time

def prova(z):
    z = 0
    while z < 20:
        time.sleep(1)
        z = z + 1
        print(z)

views.py

    from django.shortcuts import render_to_response
    #etc.

    import c


def home_user(request):
    return render_to_response('homepage/home.html',{'user.username':request}, context_instance = RequestContext(request))

def conta(request):
    c.prova(0)
    return redirect(home_user)

在homepage.html中,如果函数 conta 正在运行,我想在“WAIT”中更改“GO”按钮。

urls.py

        urlpatterns =patterns('',
    url(r'^homepage/home/$', views.home_user, name='home'),
    #etc.
    url(r'^conta', views.conta, name='conta'),


)

home.html的

{% if c.alive %}
<a href="" class="btn btn-danger" role="button">WAIT</a>
{% else %}
<a href="/conta/" class="btn btn-primary" role="button">GO</a>
{% endif %}

我没有把整个代码......我希望这足以理解我的麻烦。 我也在How to create a waiting page in Django看到,但我会从更简单的东西开始。

到目前为止,当我开始 c.py 时,我看到我的网页正在加载某些东西(=它正在“计数”),但我的按钮没有改变,之后 strong> c.py执行,我返回 127.0.0.1:8000/homepage/home / 页面。 是html或我的函数定义中的问题还是两者都有问题?

更新

我尝试简化问题: 我找到了这个脚本......

    <button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
    var text = "";
    var i = 0;
    while (i < 10) {
        text += "<br>The number is " + i;
        i++;
    }
    document.getElementById("demo").innerHTML = text;
}
</script>

我想“导入”我的 conta()函数而不是使用i ++的cicle

即。我想有类似的事情: 当 conta()正在运行时,出现类似

等待..

,当它停止时我会返回我的主页..我不知道如何“把“ conta()放在脚本中......这可能吗?我是一个梦想家吗? :)

2 个答案:

答案 0 :(得分:1)

您正在尝试检查客户端上的服务器端值,但问题是if c.alive语句仅在呈现视图时进行评估 - 而不是c的状态更改

您需要能够通过ajax long polling或WebSockets向客户端报告c的状态,或者,如果您不关心c的增量状态,那么想要更改链接的文本,当链接的click事件触发时,您需要使用JavaScript来设置值:

// assuming jQuery for brevity...

$(document).ready(function() {

    // avoid hard-coding urls...
    var yourApp = {
        contaUrl: "{% url 'conta' %}"
    };

    $('#btnGo').click(function(e) {
        e.preventDefault();  // prevent the link from navigating

        // set css classes and text of button
        $(this)
            .removeClass('btn-primary')
            .addClass('btn-danger')
            .text('WAIT');

        $.get(yourApp.contaUrl, function(json) {
             window.top = json.redirect;
        });
    });
});

但是......您的conta函数需要返回JsonResponse而不是HttpResponse才能在客户端进行重定向:

from django.core.urlresolvers import reverse
from django.http import JsonResponse

def conta(request):
    c.prova(0)
    redirect = reverse('name_of_home_user_view')
    return JsonResponse({'redirect': redirect})

答案 1 :(得分:1)

我发布了我的工作解决方案。感谢@Brandon的有用答案。

conta.js 中进行了一些更改:

$(document).ready(function() {

    // avoid hard-coding urls...
    var yourApp = {
        contaUrl: "/conta/"
    };


    $('#btnGo').click(function(e) {
        e.preventDefault();  
        // set css classes and text of button
        $(this)
            .removeClass('btn-primary')
            .addClass('btn-danger disabled') // with *disabled* I'm sure that the button is not clickable
            .text('WAIT');



        $.get(yourApp.contaUrl, function(json) {     
             alert("I have finished counting");                    
             parent.window.location.reload(true);               


        });
    });
});
views.py

中的

def conta(request):
    c.prova(0)
    redirect = reverse('home')                  
    return JsonResponse({'redirect': redirect})