Скрипты не отображаются при загрузке шаблона с помощью ajax - PullRequest
Новая
       21

Скрипты не отображаются при загрузке шаблона с помощью ajax

1 голос
/ 26 ноября 2010

У меня есть страница регистрации, которая имеет несколько шагов. Каждый шаг обновляет содержимое страницы с помощью 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 голосов
/ 26 ноября 2010

Когда я использовал Prototype для возврата html со смешанным javascript, я должен был специально указать вызову AJAX, чтобы оценить javascript, который был возвращен с помощью опции evalScripts:true.Надеюсь, это полезно.

Обновление

Похоже, вы используете jQuery.Оформить заказ jQuery.getScript()

Вы также можете использовать обычный jQuery.ajax(), если для dataType установлено значение script

...