I'm new to programming and can't figure out how to properly render the
{{comment}} and {{username}} variables in the <div id="new"> element
below using jquery and the ajax form plugin. Everything posts to the
database just as it should. However, I want to show what gets posted
in the template after submission. What happens is the entire html page
gets inserted in the <div id="#new"> element. The images, everything,
gets duplicated as the response_text is inserted. Note that the
following code has a lot of simple test scripts I'm attempting to use.
My template looks like this:
(I'm referencing a javascript file, global.js in the template, which
is included below it):
{% extends "base.html" %}
{%block content %}
<script type="text/javascript" src="{{MEDIA_URL}}js/
jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/jquery.form.js"></
script>
<script type="text/javascript" src="{{MEDIA_URL}}js/global.js"></
script>
<h1>Welcome to Site</h1>
{% include "form.html" %}
<div class="htm">
</div>
<div class="shw"></div>
<p class="inp">This will fade out</p>
<p>Here is the camo image</p>
<img id="hides" src="{{MEDIA_URL}}img/daverogers.jpg" />
<p class = "hide">Users and comments:</p><br/>
<div id="new">
{{comment}}
{{username}}
</div>
{% if error %}
<p>Errors:</p>
{{error}}
{% endif %}
{% endblock%}
Here is global.js
$(document).ready(function(){
$("div.htm").text("The DOM is now loaded and can be
manipulated.");
$(":header").css({ background:'#CCC', color:'green' });
$("img").css({ width:'25%' });
$("p").bind("click", function(e){
var str = "( " + e.pageX + ", " + e.pageY + " )";
$("div.htm").text("Click happened! " + str);
});
$("form.theform").ajaxForm({
clearform: true,
target:"#new",
success: function(response_text, status_text) {
var $inp=$("input.com").val();
var $inpa=$("textarea.comms").val();
$("input.news").val($inp);
$("<div><p>Hello" + " " + $inp + " " + $inpa + "</p></
div>").appendTo("div.htm");
$("p.hide").hide();
$("input.com").val("");
$("textarea.comms").val("");
alert("ajx working");
alert(response_text);
$("<div><p>Thanks for your sporthill order!</p></
div>").appendTo("p.inp");
$("div.shw").show("slow");
$('p.inp').fadeOut("slow");
$('#hide').hide();
}
});
});
view is:
def ajx_form(request):
if form.is_valid:
if request.is_ajax:
name = request.POST.get('name', '')
password = request.POST.get('password', '')
comments=request.POST.get('comment', '')
u=Users.objects.create(user=name, comment=comments)
return render_to_response('my_ajx.html',
{'username':name, 'comment': comments, 'request':request, },
context_instance=RequestContext(request))
return render_to_response('my_ajx.html', {'error':'You"ve got
errors', }, context_instance=RequestContext(request))
return render_to_response('my_ajx.html', {'error':'You"ve got
errors', }, context_instance=RequestContext(request))
Please let me know if you have a solution or any ideas. Thanks!!
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Django users" group.
To post to this group, send email to django-users@googlegroups.com
To unsubscribe from this group, send email to
django-users+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/django-users?hl=en
-~----------~----~----~----~------~----~------~--~---
