Using AJAX to execute Python Django Script

Question

I am using Django for my website. Currently I am using location.reload(); so that while users fill in data and click on a button it will trigger location.reload() and while the whole page reloads, it will execute the Django scripts. But I don't want to reload the whole page to execute the script, I just want to reload the particular <div> using ajax. How can I do that?

{% if userFirstName %}
                <div id="topAdminCont" class="left">
                    <div id="userSection">
                <!--        <img src="{% static "assets/images/admin_icon.png" %}" width="20" alt="Admin" class="left" /> -->
                        <p id="admin" class="right">{{userFirstName}}</p>
                        <div class="clear"></div>
                    </div>
                    <ul id="dropAdmin">
                        <li><a href="#" id="chngPwdBut">Change Password</a></li>
                        <li><a href="/authentication/logout">Logout</a></li>
                    </ul>
                </div>
            {% else %} 

                <div id="popCont" class="left username_view">
                    <p id="signIn"><a href="#">Signin</a></p>
                    <p>/</p>
                    <p id="signUp"><a href="#">Signup</a></p>
                    <div class="clear"></div>
                </div>
            {% endif %}

Jquery AJAX Handler for above HTML:

function authenticateUser(email, password)
            {

            $.ajax({
                url:    '/authentication/login/',
                type:   'POST',
                    cache: 'false',
                    async: 'true',
                data: {

                        signinEmail:email,signinPwd:password, 

                        },
                dataType: "json",   
                    success:function(response){
                                            statusCode = response.statusCode;
                            if (statusCode == 200)
                            {
                                location.reload();


                            }

                        }
                }); 
            }

location.reload will reload well, the location, not just some of the content on the page. Which <div> do you want to refresh? — Drewness
– Drewness, Commented Mar 7, 2014 at 17:17
Nope. I just wanna reload the above section of HTML Again and again .We can do this using AJAX right ? — user3383301
– user3383301, Commented Mar 7, 2014 at 17:20

Drewness · Accepted Answer · 2014-03-07 17:39:33Z

First copy <div id="topAdminCont" class="left">...</div> into it's own file. Let's say,

top_admin.html

{% if userFirstName %}
<div id="topAdminCont" class="left">
    <div id="userSection">
    <!-- <img src="{% static "assets/images/admin_icon.png" %}" width="20" alt="Admin" class="left" /> -->
        <p id="admin" class="right">{{userFirstName}}</p>
        <div class="clear"></div>
    </div>
    <ul id="dropAdmin">
        <li><a href="#" id="chngPwdBut">Change Password</a></li>
        <li><a href="/authentication/logout">Logout</a></li>
    </ul>
</div>
{% else %}
<div id="popCont" class="left username_view">
    <p id="signIn"><a href="#">Signin</a></p>
    <p>/</p>
    <p id="signUp"><a href="#">Signup</a></p>
    <div class="clear"></div>
</div>
{% endif %}

Then in your current page,

current.html

<div id="ajaxSection">
    {% include 'top_admin.html' %}
</div>

Now create a new view and url rule for top_admin.html

urls.py

url(r'^top_admin/$', 'top_admin', name='top_admin'),

views.py

def top_admin(request):
    // your stuff here

    return render(request, 'top_admin.html', {
        // call admin object variables here
    })

Finally your ajax request,

$.ajax({
    ...
    success: function(response) {
        if (response.statusCode == 200) {
            $('#topAdminCont').load('/app_name/top_admin/');
        }
    },
    ...

Obviously there are a lot of specifics (names, urls, etc.) that you will have to change to match you app, however, this method will allow you to reload content on a page without reloading the entire page.

Isn't .load() redundant to .ajax()? See the @warunsl answer below.

shaktimaan · Accepted Answer · 2014-03-07 17:39:34Z

1

Modify the success section of your AJAX call as:

success:function(response){ 
    statusCode = response.statusCode;
    if (statusCode == 200)
    {
        $('#ajaxSection').html(response); #assuming that the response is a HTML
    }
}

answered Mar 7, 2014 at 17:39

shaktimaan

12.1k2 gold badges31 silver badges33 bronze badges

Collectives™ on Stack Overflow

Using AJAX to execute Python Django Script

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related