CODEWITHSUNDEEP
pythonhtmldjango
Utkarsh Bhushan
Utkarsh Bhushan

Reputation: 179

Getting data on HTML page without return render in Django?

I have below views.py file

from django.shortcuts import render, redirect, render_to_response
from bs4 import BeautifulSoup as bs     
import time
output = []

def register(request):
    output = get_form_data(request)
    if output == None:
        output=""
    if request.POST.get('cancel'):
        return redirect('/login/')        
    if output == 'Registration Successful':
        t_end = time.time() + 5 * 1
        while time.time() < t_end:
            a = 0
        return redirect('/login/')
    return render(request, 'template/register.html', {"output": output})



def get_form_data(request):
    if request.POST:
        if request.POST.get('register'):
            reg_uname = request.POST.get('reg_una')
            reg_pass = request.POST.get('password')
            reg_cnfpass = request.POST.get('cnfpass')
            reg_email = request.POST.get('emailid')
            return "Registration Successful"

I want to show the output "Registration Successful" when i click on register button before return render to the register.html page and then want 5 seconds to redirect the page to login page.

Currently if the registration is successful, after 5 seconds, I am redirected to the login page but I am unable see the "Registration Successful" message since I am not on the same page.

Below is the register.html file for reference

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Register</title>
    <link href="/static/register.css" type="text/css" rel="stylesheet">
    <script type="text/javascript">
        function validate()
        {
            var name,pass,cnfpass,email;

           name = document.getElementById("reg_uname");
           pass = document.getElementById('reg_pass');
           cnfpass = document.getElementById('reg_cnfpass');
           email = document.getElementById('reg_email');

          if(name.value == '')
          {
             alert('Username Cannot be left blank!');
             name.focus();
             return false;
          }
          else if(name.value.length < 3){
             alert('Username cannot be less than 4 characters!');
             name.focus();
             return false;
          }

          if(pass.value != '' || cnfpass.value != '')
          {
                if(pass.value != cnfpass.value)
                {
                  alert('Passwords should match!');
                  pass.focus();
                  return false
                }
                else if(pass.value.length <8)
                {
                  alert('Password cannot be less than 8 characters!');
                  pass.focus();
                  return false;
                }
          }
          else
          {
             alert('Please fill the password fields!');
             pass.focus();
             return false;
          }
          if(email.value == '')
          {
             alert('Please enter your email ID!');
             email.focus();
             return false;
          }

          return true;
        }
    </script>
</head>
<body>
<form action="" method="post" name="reg_form">
    {% csrf_token %}

    <div id="main">
      <div id="main-register-image"></div>
      <div id="main-register-box">
             <div id="main-register-box-uname">
                <div>Username :</div>
                <div><input type="text" id="reg_uname" name="reg_una" value="" ></div>
             </div>
          <div id="main-register-box-pass">
                <div>Password :</div>
                <div><input type="password" id="reg_pass" name="password" value="" ></div>
             </div>
          <div id="main-register-box-cnfpass">
                <div>Confirm Password :</div>
                <div><input type="password" id="reg_cnfpass" name="cnfpass" value="" ></div>
             </div>
          <div id="main-register-box-email">
                <div>Email ID :</div>
                <div><input type="email" id="reg_email" name="emailid" value="" ></div>
          </div>
          <div id="main-register-box-buttons">
              <div><input type="submit" id="reg" value="Resister" name="register" onclick="return validate()" /></div>
              <div><input type="submit" id="cancel" name="canc" value="Cancel" onclick="/login/" /></div>
          </div>
          <div id="result">{{output}}</div>
      </div>
    </div>
</form>
</body>
</html>

My question is, how can we show dynamic data on html page and continue doing other stuffs on the same page.

Upvotes: 1

Views: 8637

Answers (3)

P. Pascual
P. Pascual

Reputation: 1

As mentioned above you would need to use AJAX or instead you could just return an intermediary "Successful" page that redirects the user to the login page using Javascript. I would say this is the simplest way:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
    </head>
    <body>
      <p>Success!</p>
      
      <script type="text/javascript">
        window.onload = function() {
            setTimeout(function(){
                 window.location = '/login'; // redirects to login page
            }, 10000); // waits 10 seconds
        };
      </script>
    </body>
</html>

Upvotes: 0

randyr
randyr

Reputation: 1709

So you want to display a message before the redirect. You have at least two ways of doing this:

  • Use an AJAX request to make the call to register, return a success/failure response. This will make the call completely javascript, with verification being done on the server side.
  • You pass the success parameter to the redirected page and (assuming you use Jinja2 or Django templating engine) you display a message if the registration was a success.

Also a few things about the views:

  1. Do null checks with is: if output is None, instead of ==.
  2. You're not don't seem to be doing anything with the form values, only getting them from the POST. Perhaps we just can't see the code though.
  3. There's a variable output at the top of the module, and you also have a variable output in the register method. Consider not reusing the same variable name to prevent confusing situations.
  4. If you want to wait for a few seconds, consider using sleep: import time time.sleep(t) Where t is the amount of seconds to sleep.
  5. You're checking if the output is None, and then later checking if the output matches a certain string. Perhaps you could put the final render in the first if statement:

as follows:

if output == None:
    return render(request, 'template/register.html', {"output": ''})

The final result will look something like:

from django.shortcuts import render, redirect, render_to_response
from bs4 import BeautifulSoup as bs     
import time
output = []

def register(request):
    message = '' 
    if request.method == 'POST'
        if request.POST.get('cancel'):
            return redirect('/login/')

        # Remember, get_form_data returns boolean now.
        reg = get_form_data(request)
        if reg:
            return redirect('/login/')
        else:
            output = 'Registration failed'
    return render(request, 'template/register.html', {"output": message})



def get_form_data(request):
    if request.POST.get('register'):
        reg_uname = request.POST.get('reg_una')
        reg_pass = request.POST.get('password')
        reg_cnfpass = request.POST.get('cnfpass')
        reg_email = request.POST.get('emailid')
        # Some registration function is probably called here
        # Perhaps return a boolean instead, if registration was OK:
        return register(username=reg_uname, pass=reg_pass, cnfpass=reg_cnfpass, email=reg_email)
    return False

With jQuery, the AJAX call could look something like code below. If you consider using the AJAX method, I advise you to change your register function to return some kind of JSON response and an appropriate response status code. Check out the djangorestframework if you plan to use more of these kinds of calls.

function register() {
    data = {};
    // Get the data from the form fields here: e.g.:
    data['username'] = $('reg_uname').val();

    $.ajax({
        url: '/register',
        method: 'POST',
        data: data,
        success: function(data, textStatus, xhr) {
            // Handle success scenario here.
        },
        error: function(xhr, status, error) {
            // Handle fail scenario here. 
        }
    )};
}

Upvotes: 2

martinarroyo
martinarroyo

Reputation: 9701

You have to perform the request asynchronously in order to continue on the same page (AJAX). It is a fairly easy procedure, here's a guide for Django that might help you get started.

Essentially, you will have JavaScript send your request and process the response. You can send different messages depending on whether the request was successful or not, and inform the user.

Also, is there any specific purpose to the 5-second interval? You are doing busy waiting there (use sleep instead if necessary, or move that waiting to the frontent, using setTimeout).

Upvotes: 3

Related Questions