CODEWITHSUNDEEP
ajaxdjango
c-berg
c-berg

Reputation: 31

django onclick load template to {% block %} using ajax

Im creating a webapplication in django to which Im very new. what I want to do is on user click open a modal window (basically just an absloute positioned div) which contains a {% block some_content%} tag. This block should then contain either a log in form or a register form (or anything else). I want to load this using ajax (so that nothing is loaded in vain).

here is the part of my template where i want the stuff to appear:

    <div id="modal" style="position: absolute; top: 60px; left: 100px; height: 400px; width:700px; background: #777; z-index: 20">

        <a href="#" onclick="Dajaxice.my_site.tester1(test_callback, {'user_id': '{{ user.id }}'})"><div class="button">Test</div></a>
        <br />

        {% block test_content %}{% endblock test_content  %}
    </div>

and here is my ajax.py 

    @dajaxice_register
    def tester1(request, user_id):
        print "test " + user_id
        #contenxt = Context({'items': range(2)})
        print "1"
        return_str = render_block_to_string('my_site/testr.html', 'test_content')
        print "7"
        return HttpResponse(return_str)

Im using snippet http://djangosnippets.org/snippets/942/

following the print "#" leads me to believe that this works all the way up to the 

    return HttpResponse(return_str)

where nothing seems to happen, not even an error message.

forgot to include the template i want to load to the block:

    {% extends "my_site/header.html" %}
    {% load url from future %}

    {% block test_content %}
        <div style="background: red; height: 70%; width:90%">
            <span>HEJ!!!</span>
        </div>
    {% endblock test_content %}

if there is a better approach Ill be glad to know about it but remember, Im new to django so please go slow.

Upvotes: 2

Views: 3153

Answers (2)

c-berg
c-berg

Reputation: 31

So, here is my solution:

I have Dajax installed. The reason it didn't work is below but here is a complete solution that works.

html:

<input type="button" name="testerbutton" value="Test" id="testerbutton" onclick="Dajaxice.my_site.tester1(Dajax.process);">
<br />
<div name="result" value="" id="result">

ajax.py:

@dajaxice_register
def tester1(request):
    dajax = Dajax()
    str = render_to_string('my_site/testr.html')
    dajax.assign('#result', 'innerHTML', str)
    return dajax.json()

testr.html:

<div style="background: red; height: 70%; width:90%">
    <span>HEJ!!!</span>
</div>

And the most important part -- something it appears I can only blame myself for: make sure you correctly import jquery.dajax.core.js in your header. Otherwise Dajax.process does nothing.

Thanks @pyronic for the help.

Upvotes: 1

pyronic
pyronic

Reputation: 452

You seem to be using the Dajax framework. Have a look at the examples there. Some of those examples may be outdated so take a look at this site. If you have Dajax and Dajaxice installed you can do something like

<div id="test_content"></div>
<a href = "#" onclick="Dajaxice.<app_name>.ajax_test">load ajax content</a>

ajax.py in your app

@dajaxice_register
def ajax_test:
    str = 'Hello World'
    dajax = Dajax()
    dajax.assign('#test_content', 'innerHTML', str)
    return dajax.json()

Upvotes: 1

Related Questions