1

この問題の解決策が必要です:

すべてのレシピをレシピ リストに表示する django サイトがあります。

これらの各レシピはリンクであり、クリックするとそのレシピのフィールドが popupdiv にロードされます

これまでのところ、ポップアップ div はすべて設定されています。あとは、そのボタンのレシピ フィールドにアクセスする方法を理解するだけです。

基本的に、ロードしたいコンテンツは、recipe.name、recipe.author、recipe.steps などですが、方法がわかりません。

現在、ajax を使用してフォームを div にロードしているため、とにかく ajax 呼び出しに干渉したくありません (このコードも投稿します)。このような問題にも ajax を使用することは理にかなっていますか?

ここに私のボタンクリック機能があります

$(document).ready(function(){

    $(".button").click(function(){
        var content = $("#popupContact").load($('#recipe'));
    });
});

ここに私のページのテンプレートがあります:

{% block content %}
{% autopaginate recipe_list 6 %}
    <div id="recipe_cont">
            {% for recipe in recipe_list %}
        <div class="recipe">
            <div class="button">//here is the button that is clicked to load recipe 
            <a href="{% url cookbook.views.userrecipe recipe.id %}" style="display: none;"></a>   
            <img src="{{ STATIC_URL }}chicknbraw.jpg" alt="" height="70" width="70" style="display:inline;" />
            <h4>{{ recipe.name }}</h4>
             </div>
            <h5>{{ recipe.author }}</h5>
            <h5>Prep Time: {{ recipe.prep_time }} minutes</h5>

            <h6><a href="/addrecipe/{{ recipe.id }}">Add Recipe</a>
                <a href="/removerecipe/{{ recipe.id }}">Remove Recipe</a></h6>
        </div>
    {% endfor %}
    </div>

    <div id="popupContact" class="popup">//load recipe information into this div
            <a id="popupContactClose" style="cursor:pointer;float:right;">x</a>
            <p id="contactArea">
            <h1 style="text-align:center">Create New Recipe</h1>
            {% include 'cookbook/create_form.html' %} //this is for the form that is loaded. Is there a way to include a different template? Maybe have multiple contactAreas and hide/show different ones depending on what is being loaded?
            </p>
    </div>
    <div id="backgroundPopup">
    </div>  
    <div id="col2-footer">
    {% paginate %}
    <p id="recipe_order_text"> order by: <a href="/userbook/ordered/name">abc</a>|<a href="/userbook/ordered/date">date</a> 
    </div>

{% endblock %}

ajax 呼び出しの形式は次のとおりです。

$(document).ready(function(){

    function hijack() {
        var form = $('form#createrecipeform');
        form.each (function(){
            this.reset();
            });
        form.submit(function(e) {
            e.preventDefault();
            console.log('ajax form submission function called successfully.');
            //form = $(this);
            console.log(form)
            var serialized_form = form.serialize();
            $.ajax({ type: "POST", 
                url: $(this).attr('action'),
                data: serialized_form, 
                success: (function(data) { 
                    console.log('ajax success function called successfully.');
                    data = $.parseJSON(data);
                    if (data.success) {
                        console.log('success');
                    } else {        
                        console.log('failure');
                        var newForm = data.form;
                        form.replaceWith(newForm);
                        hijack();
                    }
                })
            });
            return false;
        });
    };

    hijack();

});

あなたが持っているかもしれない解決策に感謝します

ケイティ

4

2 に答える 2

1

それを行うためのハックな方法 (お勧めしません!) は、次のようなものです (javascript で)

$('.button').click(function() {
    var recipe = $(this).parent();
    var name   = $('h4', recipe);
    var author = $('h5', recipe);
    // etc etc
});

これを少し改善するには、名前と作成者を含む要素にクラスを割り当てます。次に、h4 と h5 を取得する代わりに次のようにします。

var name = $('.recipe-name', recipe);

繰り返しますが、これは非常にハックであり、別の方法で行う必要があります...

于 2012-05-09T20:07:55.730 に答える
0

ロードされたレシピごとに非表示のdivを作成し、.html（）を使用して各divをポップアップで配置することになりました。

これは完全に機能することになりました-replaceWithappendまたはcloneよりも優れています

助けてくれてありがとう@akhaku

于 2012-05-10T16:03:23.070 に答える