Redirect to new page after receiving data from Javascript

Question

I'm trying to pass a Javascript array to my Django views. This works, but I would like to manipulate that data and display it in a separate url. So I have a products page, where you select items. When the form is submitted, this javascript is called, and I want it to redirect to a cart page:

$("#getArr").submit(function(){
  var data = {'ab[]' : chosen};
  $.post('cart/', data, function(response){
    if(response == 'success'){ 
      window.location.href="cart/" // references my views
    }
    else{ 
      alert('Error! :('); 
    }
  });
});

views.py

def cart(request):
  if request.method == 'POST':
    chosen = request.POST.getlist('ab[]')
    print(chosen, file=sys.stderr)
    template = loader.get_template('o/cart.html')
    context = {'prodChosen': chosen,
                'e': "hy"}
    return HttpResponse('success')
    # return HttpResponse(template.render(context, request))
else:
    template = loader.get_template('o/cart.html')
    context = {}
    return HttpRepsonse('fail')
    # return HttpResponse(template.render(context, request))

Like in the commented out HttpResponse lines, I need to pass data to my cart.html (it will be objects from one of my models). I have no idea how to pass data to my cart page.

The line print(chosen, file=sys.stderr) has been quite useful. Previously, when I had code that used the commented out return HttpResponse lines, it printed to my terminal both the desired array and an empty one. However, with this new code, the desired array prints out but it doesn't redirect to the new page. I'm not sure why this is happening, but I do know the fact the empty array printed out at as well in my earlier attempt meant my cart page wasn't receiving the correct array data.

Edit: I need to pass model objects to the new html page, which (from what I know) I can't do through javascript

index.html

<form id="getArr" method="POST">
      {% csrf_token %}
      <button type='submit' id="checkCart">Check Added Items</button>
</form>

Answer 1

If I understand the question correctly, I think you are adding an extra step by using JQuery at all.

Solution #1 - Create a form element on the fly in jQuery and submit that form to your Django endpoint. In Django render template normally.

Javascript

$("#getArr").submit(function(){
  var url = 'cart/';
  var form = '<form action="' + url + '" method="post">';
  for (var i = 0; i < chosen.length; i++) {
      form += '<input type="hidden" name="ab[]" value="' + chosen[i] + '" />'
  };
  form += '</form>'
  var form_element = $(form);
  $('body').append(form_element);
  form_element.submit();
});

And then in your view, simply return the template as usual:

views.py

def cart(request):
  if request.method == 'POST':
    chosen = request.POST.getlist('ab[]')
    print(chosen, file=sys.stderr)
    template = loader.get_template('o/cart.html')
    context = {'prodChosen': chosen,
                'e': "hy"}
    return HttpResponse(template.render(context, request))
else:
    template = loader.get_template('o/cart.html')
    context = {}
    return HttpRepsonse('fail')
    # return HttpResponse(template.render(context, request))

Solution #2 - Use jQuery .load() function function and submit that form to your Django element. In Django render template normally (or as a snippet to avoid repeating other page elements).

Javascript

$("#getArr").submit(function(){
  $('#main-content-div').load('cart/', $("#getArr").serialize());
});

views.py

def cart(request):
  if request.method == 'POST':
    chosen = request.POST.getlist('ab[]')
    print(chosen, file=sys.stderr)
    template = loader.get_template('o/cart.html')
    context = {'prodChosen': chosen,
                'e': "hy"}
    return HttpResponse(template.render(context, request))
else:
    template = loader.get_template('o/cart.html')
    context = {}
    return HttpRepsonse('fail')
    # return HttpResponse(template.render(context, request))

Solution #3 - Create a typical HTML form with elements name ab[] and submit that form to your Django endpoint. In Django render template normally.

The form:

HTML

<form id="getArr" action="cart/" method="POST">
    <input type="text" name="ab[]" value="product_id_1"/>
    <input type="text" name="ab[]" value="product_id_2"/>
    <input type="text" name="ab[]" value="product_id_3"/>
    <input type="submit" value="Submit" />
</form>

Some Javascript to add elements to the form:

Javascript

$('.add_product').click(function(){
    $('#getArr').append('<input type="hidden" name="ab[]" value="' + $(this).attr('product_id') + '"/>')
})

Django view:

views.py

def cart(request):
  if request.method == 'POST':
    chosen = request.POST.getlist('ab[]')
    print(chosen, file=sys.stderr)
    template = loader.get_template('o/cart.html')
    context = {'prodChosen': chosen,
                'e': "hy"}
    return HttpResponse(template.render(context, request))
else:
    template = loader.get_template('o/cart.html')
    context = {}
    return HttpRepsonse('fail')
    # return HttpResponse(template.render(context, request))