Scripts not rendered when template loaded with ajax

I have a registration page,which has few steps. Each step refreshes the content of the page with ajax, and uses its own template. In templates I have some js code for managing actions. Unfortunately after including the rendered template I've noticed, that my <script> is om开发者_运维技巧mited. What is the reason for this and how to solve it ? Link to my page, needs syncing with facebook account :

http://ntt.vipserv.org/my-rte-landing/

The main template:

{% 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 %}

Template for step 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>

And step 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>

And finally functions for rendering content:

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}))

---

When I was using Prototype to return some html with mixed javascript I had to specifically tell the AJAX call to evaluate the javascript that was returned via the evalScripts:true option. Hope this is helpful.

Update

It looks like you're using jQuery. Checkout jQuery.getScript()

You can also use the regular jQuery.ajax() if you set the dataType to be script