I'm trying to append content to my div with ID "this_div" using AJAX.
HTML:
<a href='#' onclick="ajax('append?what=first',
['content'],'this_div')">click</a>
<div id='this_div'></div>
Controller:
def append():
if request.vars.what == "first":
something = "ABC"
else:
something = "DEF"
return "<script>jQuery('#this_div').append('"+something+"')</script>"
This loads the content of "something" to the div, but it doesn't preserve the previous content. Can anyone shed some light on why is it acting like that, please? I'm new to combination of Python/Web2Py/AJAX..
Thanks!
The problem is that the ajax()
function itself overwrites the contents of this_div
because that is the target specified (i.e., it replaces the DIV contents with the returned <script>
element, which then appends the text to the DIV). If you want to append instead of overwrite, you can do so via Javascript, but in that case you need to specify ":eval" as the target:
<a href='#' onclick="ajax('append?what=first', [], ':eval')">click</a>
<div id='this_div'></div>
Controller:
def append():
if request.vars.what == "first":
something = "ABC"
else:
something = "DEF"
return "jQuery('#this_div').append('%s');" % something
Note, no need for the <script>
tag in that case -- just return the Javascript to be executed. Also, if your append()
function doesn't use the "content" input, the second argument to ajax()
can just be an empty array (i.e., []
) instead of ['content']
.