Ajax question - what to do with success?

Given this :

$(document).ready(
    function() {
        $(".js-up").click(function(){
            
            //pass the username from index to the view, return the username from view, (silly - but ok for testing to see how it gets passed back and forth) then update the html? How?
             $.ajax({
                method: "POST",
                url: addItem,
                data:{'UserName' : user,  'csrfmiddlewaretoken': csrftoken},
                success: function(data){
                         //labels = data.labels;
                         //defaultData = data.default;
                         console.log(data.UserName) 
                     },
                error: function(error_data){
                          console.log("error");
                          console.log(error_data)
                    },
               });
            
            
        })

        $(".js-down").click(function(){
            console.log('down')
            //send information to database
        })
    }
); 

Once the ajax function has successfully passed something to a view, the view has then done something with the model, what do I need to do in order to reflect the changes to the model in the front-end?

I keep seeing examples on stack-exchange where they edit the DOM by injecting new HTML, is that the only way to do it? It seems a bit hackey to me having the Ajax function manipulating HTML, seems like it hijacks the templates (which somebody might have spent time crafting)

My view for playing with - note it doesn’t actually update anything - but if it did?

class AddItem(View):
     def post(self, request, *args, **kwargs):
        #print('called view')
        username =  request.POST.get('UserName')
        print(username)
        data = {
        'itemAdded': 'item was added', 'UserName' : username
    }
        
        return JsonResponse(data)  

What about API calls – would they work better?

Hi!

This is basically what React, Vue, etc make. They are responsible of finding the best way to change the UI.

In the case of Jquery, you are the one who has to choose how to show the new information.

  • You may to respond with an HTMLResponse or an HTML “component”, but not sure how this can be received by Jquery.

This is the natural step to decoupling the backend from the frontend. It has pros and cons, as everything.

1 Like

How do you make that choice between React, Vue, etc. Picking one seems like a considerable investment in terms of time, etc. Maybe it doesn’t matter so much as they have certain cross-over skills.

I’m leaning towards Vue at this point.

Also, at this point with your front-end framework handling the view, what about Django’s template engine.

I feel like right now, I’m in so deep, and there is just a massive gap between where I would like to be and how to get there.

Thanks for reply.

1 Like

I’ve been feeling like you for at least a year with a small project.
I learnt React but never felt confident enough to make the leap. And don’t forget DRF.

So there I have 2 more technologies to deal with, with their problems or errors, unknown to me.

But the best way to know is to try something, don’t stay still doing nothing :sweat_smile:

Best luck.

And the hits keep coming! As an absolute noob web-dev, I didn’t know css, html, javascript until about 2 months ago. Sure, I’ve gotten better, but I’m also sure what I’m doing is a horror-show to anybody who has more experience. Fairly fast learner with tech, but dude’s brain is having issues processing right now. I actually had a dream last night about Python. I’m dreaming in code now - there isn’t enough time in the day

Struggling a bit at the moment with registering apps with django admin and making them display better – lot of clutter happening.