我需要一个解决这个问题的方法:
我有一个django网站,显示食谱清单中的所有食谱
这些配方中的每一个都是一个链接,点击后应该将该配方的字段加载到popupdiv中
到目前为止,我已经设置了弹出窗口 - 现在我只需要弄清楚如何访问该按钮的配方字段。
基本上我要加载的内容是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();
});
非常感谢您提供的任何解决方案
凯蒂
答案 0 :(得分:1)
执行此操作的hack-y方式(不推荐!)将类似于以下内容(在javascript中)
$('.button').click(function() {
var recipe = $(this).parent();
var name = $('h4', recipe);
var author = $('h5', recipe);
// etc etc
});
为了使这个 little 更好,将类分配给包含名称和作者的元素,然后您可以执行以下操作而不是获取h4和h5
var name = $('.recipe-name', recipe);
这又是一次非常黑客攻击,应该以不同的方式完成......
答案 1 :(得分:0)
我最终创建了一个为每个加载的配方隐藏的div,然后使用.html()将每个div放在弹出窗口中
这最终完美地工作 - 更好然后替换附加或克隆
谢谢你的帮助@akhaku