使用ajax加载模板时未呈现的脚本

时间:2010-11-26 09:05:54

标签: javascript ajax django django-templates partial-page-refresh

我有一个注册页面,其步骤很少。每个步骤都使用ajax刷新页面内容,并使用自己的模板。在模板中,我有一些用于管理操作的js代码。不幸的是,在包含我注意到的渲染模板之后,我的<script>被忽略了。这是什么原因以及如何解决?链接到我的页面,需要与facebook帐户同步:
http://ntt.vipserv.org/my-rte-landing/

主要模板:

{% block js %}
{% endblock %}

{% block content %}
<div id="landing">
    <div id="landing-left" style="float:left">
        <div class="video" style="width:450px; background: #f8f8f8; height:335px">
            video here
        </div>
        <div class="faq">
            FAQ !
        </div>
    </div>
    <div id="landing-right" style="float:left; width:400px;">
        {{ html|safe }}
    </div>
</div>
{% endblock %}

第2步的模板:

{% block js %}
<script>
    $(function (){       
        $('#twitter-form').submit(function(e){
            e.preventDefault();
            step2();
        });
        $('a .submit-step-2').click(function(e){
            e.preventDefault();
            step2();
        });

        function step2(){
            var twitter_id = $('#twitter_id').val();
            var div = $('#landing-right');

            $.ajax({
                type: "POST",
                url: "{% url my_rte_landing %}",
                data: "twitter_id=" + twitter_id,
                dataType: "json",
                success: function(data){
                    div.html(data['html']);
                }
            });
            return false;
        };

    });

</script>
{% endblock %}

<h1>Step 2: connect to Twitter</h1>

<div class="connect-twitter" style="background:#f8f8f8">
    <img src="{{MEDIA_URL}}site/img/twitter.png" />
    <span>Please enter your twitter ID</span>

    <form action="." method="post" id="twitter-form">
        <input id="twitter_id" name="" type="text" value="" />
        <input class="submit-step-2" type="submit" value="Send"/>        
    </form>
        <a href="#" class="submit-step-2">Skip this step</a>
</div>

第3步:

{% block js %}
<script>
    $(function (){
        $('a .submit-step-3').click(function(e){
            e.preventDefault();
            step2();
        });        
        function step3(){
            var twitter_id = $('#twitter_id').val();
            var div = $('#landing-right');

            $.ajax({
                type: "POST",
                url: "{% url my_rte_landing %}",
                dataType: "json",
                success: function(data){
                    div.html(data['html']);
                }
            });
            return false;
        };
    });
</script>
{% endblock %}

<div class="connect-twitter" style="background:#f8f8f8">
    <div id="likes-list">
    </div>
    <a href="#" class="submit-step-3">Proceed</a>  
    </div>

最后用于呈现内容的功能:

def my_rte_landing(request):
    step = request.session.get("step", request.REQUEST.get("step", 1))

    if request.method == "POST":
        #ajax
        if step == 3:
            twitt = request.POST.get('twitter_id', None)            
            request.session["step"] += 1
            user_id = get_user_id(request.user.id)
            html = render_step3(request, user_id=user_id)

        result = simplejson.dumps({ "html" : html,}, cls = LazyEncoder)
        return HttpResponse(result, mimetype='application/javascript') 

    else:
        if step == 1:
            request.session["step"] = 1
            html = render_step1(request)
            request.session["step"] += 1

            return render_to_response('socialauth/login_page.html',{'html': html,}, context_instance=RequestContext(request))            
        else:
            new_user = True
            new_user_id = get_user_id(request.user.id)
            new_user_url = get_user_url()

            html = render_step2(request, new_user_url=new_user_url, new_user_id=new_user_id, new_user=new_user)
            request.session["step"] = 3

            return render_to_response('socialauth/login_page.html', 
                                    {'html': html}, context_instance=RequestContext(request))

def render_step2(request, new_user_url="", new_user_id="", new_user=False):
    template_name = 'socialauth/step2.html'
    return render_to_string(template_name, RequestContext(request, 
        {'new_user': new_user,'new_user_url': new_user_url, 'new_user_id': new_user_id,},),)

def render_step3(request, user_id):
    template_name = 'socialauth/step3.html'
    return render_to_string(template_name, RequestContext(request, {'user_id': user_id}))

1 个答案:

答案 0 :(得分:0)

当我使用Prototype返回一些带有混合javascript的html时,我必须专门告诉AJAX调用来评估通过evalScripts:true选项返回的javascript。希望这是有帮助的。

更新

看起来你正在使用jQuery。结帐jQuery.getScript()

如果您将jQuery.ajax()设为dataType

,也可以使用常规script