Refresh form in Django without reloading page

Question

Hi I'm new in Ajax and django and I want to refresh my form. I try some code but it didn't work. I'm sure what I want to do is very basic.

Here my html:

    <div class="row" style="padding-top:20px;">
     <div class="col-md-12" id="testAjax">
      {% load crispy_forms_tags %}
      {% crispy form %}
    </div>
   </div>

I want to refresh my form in the div testAjax.

Here my view:

def createPin(request):
error = False   
if request.method == "POST":
    form = CreatePinForm(request.POST)
    if form.is_valid():
        pin = form.save(commit=False)
        pin.customer = request.user.customer
                    pin.save()
        msg = "pin saved"
        return redirect('/pin/CreatePin', {'form': form, 'msg': msg})
    else:
        error = True
else:
    form = CreatePinForm()
return render(request, 'createPin.html', {'form': form, 'error': error,})

My Ajax:

function refresh() 
{
 $form=$('#createPin');
 var datastring = $form.serialize();
    $.ajax({
        type: "POST",
        url: '/pin/CreatePin/',
        dataType: 'html',
        data: datastring,
        success: function(result)
        {
            /* The div contains now the updated form */
            $('#testAjax').html(result);
        }
    });

}

Thanks alot for your help.

Answer 1

When I need to do some operations and I don't want to reload the page I use a JQuery call to Ajax, I make the pertinent operations in AJAX and then receive the AJAX response in the JQuery function without leaving or reloading the page. I'll make an easy example here for you to understand the basics of this:

JQuery function, placed in the template you need

function form_post(){       
    //You have to get in this code the values you need to work with, for example:
    var datastring = $form.serialize();

    $.ajax({  //Call ajax function sending the option loaded
      url: "/ajax_url/",  //This is the url of the ajax view where you make the search 
      type: 'POST',
      data: datastring,
        success: function(response) {
            result = JSON.parse(response);  // Get the results sended from ajax to here
            if (result.error) { // If the function fails
                // Error
                alert(result.error_text);
            } else {  // Success

                    //Here do whatever you need with the result;                                                  
                } 
            }
        }
    });              
    }

You have to realize that I cannot finish the code without knowing what kind of results you're getting or how do you want to display them, so you need to retouch this code on your needs.

AJAX function called by JQuery

Remember you need to add an url for this Ajax function in your urls.py something like:

url(r'^/ajax_url/?$', 'your_project.ajax.ajax_view', name='ajax_view'),

Then your AJAX function, it's like a normal Django View, but add this function into ajax.py from django.core.context_processors import csrf from django.views.decorators.csrf import csrf_exempt from django.utils import simplejson

@csrf_exempt
def ajax_view(request):    
    response = []
    #Here you have to enter code here 
    #to receive the data (datastring) you send here by POST       
    #Do the operations you need with the form information
    #Add the data you need to send back to a list/dictionary like response
    #And return it to the JQuery function `enter code here`(simplejson.dumps is to convert to JSON)
    return HttpResponse(simplejson.dumps(response))

So, without leaving the page you receive via javascript a list of items that you sended from ajax view.

So you can update the form, or any tag you need using JQuery

I know that this can be so confusing at the beginning but once you are used to AJAX this kind of operations without leaving or reloading the page are easy to do.

The basics for understanding is something like:

1. JQuery function called on click or any event you need
2. JQuery get some values on the template and send them to AJAX via POST
3. Receive that information in AJAX via POST
4. Do whatever you need in AJAX like a normal DJango view
5. Convert your result to JSON and send back to the JQuery function
6. JQuery function receive the results from AJAX and you can do whatever you need