CODEWITHSUNDEEP
pythondjangodjango-templates
Flupper
Flupper

Reputation: 321

Why when I render Django template on ajax, success does not appear on the browser?

My Html page isn't rendered on ajax success when I use console.log() in the js file, the HTML page is printed out in the browser console but not in the browser itself.

kindly check my following code:

views.py:

def Filter_by_Products(request):
    if request.is_ajax():
        if request.method == 'GET':
            print("filter by function!")
            filter_brand = request.GET.get('filter_brand')
            products_qs, qs_color, qs_size = product.objects.Filter_brand(filter_brand.rstrip(','))
           context={
            "object_list": products_qs,
            'colors': qs_color,
            'sizes':qs_size
            }
            # print(products_qs)
            # print(qs_color)
            # print(qs_size)

     return render(request,"product/products.html",context)

ajax.js:

$.ajax({
        url:'/cart/api/filterby/',
        method:'get',
        data:
            {
                'filter_brand':str,

            },
        success: function (data) {
            console.log(data)
            // location.reload()
        },
        error: function (error) {
            console.log(error)
        }

    })

After googling on my question, I found that my problem is that I'm trying to mix the server side with the client side and the solution is to send my HTML template using HttpResponse not render function and then by using javascript, I select the HTML page and change content with the new html.

Actually, I didn't understand clearly the problem and why mixing server with client caused that problem and why my code wasn't working from the first time using render, so could you please explain more in details or refer links to me to understand.

also, I'm familiar with Django celery and Redis, if i can use those technologies in that situation, could you just refer to me how to use them.

Upvotes: 0

Views: 928

Answers (2)

Islam Hossam
Islam Hossam

Reputation: 31

No problem in return render(request,"product/products.html",context), it will return a rendered html page's content.

The problem is in your ajax request calling: // location.reload(), referring to w3schools.com it reloads current page only without replacing page's content with returned response.

If you need to replace the entire page with returned response, so your ajax success function should like:

success: function (response) {
        var newDoc = document.open("text/html", "replace");
        newDoc.write(response);
        newDoc.close();
       }

If you just need to replace with specific html div, you can do:

success: function(response) {
            $('#my-div').html(response);
        }

Upvotes: 0

Tiago Gomes
Tiago Gomes

Reputation: 377

When i'm working with Django and Ajax, i like to use JsonResponse, a library from django.http. This way, I can pass the status response (200, 500, ...), and the data that will be treated in front.

The problem in your case, is that after you received the response, you are reloading the page.

// location.reload()

As your responde data is an object, you have to define, using javascript, where it will be placed on the screen, for example:

success: function (data) {
        console.log(data);
        $("#div_object_list").html(data.object_list);
    },

Upvotes: 1

Related Questions