I would like to execute some multiple conditions (if/else) in the def function_check
function and print their multiple result in a grey div, for example like this:
Initially, i had all the code in the same function, now i have divided it into two functions and mentioned the difficulties, so, important, i want to continue using 2 separate functions: def function_input_user
and def function_check
. Precisely, the app checks if there are words in a textarea (user_input.html
). If there are, then I would like to print a message in the grey div.
I'm new to Django, my difficulties are with context
and return JsonResponse(context, status=200)
, because i can't return all multiple condition results and print them in the gray div.
I get this error:
raise TypeError(TypeError: In order to allow non-dict objects to be serialized set the safe parameter to False.
index.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>University</title> {% load static %}<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script></head><body><div class="test"><div>Input User</div> <div class="editor"><pre class="editor-lines"></pre><div class="editor-area"><pre class="editor-highlight"><code class="language-html"></code></pre><textarea class="editor-textarea" id="userinput" data-lang="html" spellcheck="false" autocorrect="off" autocapitalize="off"><!DOCTYPE html><html><head><title>Page Title</title></head><body> <div class="container-fluid"><h1 class="heading">This is a Heading</h1> <p>This is a paragraph.</p></div> </body></html></textarea></div></div></div> <button type="submit" onclick="getFormData();">Search</button><br><br><div>Result</div><div class="result row2 rowstyle2" id="result"> {% comment %} Ajax innerHTML result {% endcomment %}</div></div> {% comment %} script to disable "want to send form again" popup {% endcomment %}<script> if ( window.history.replaceState ) { window.history.replaceState( null, null, window.location.href ); }</script><script> function getFormData() { $.ajax({ type:"GET", url: "{% url 'function_check' %}", data:{ // con Div: "formData": document.getElementById("userinput").innerText"formData": document.getElementById("userinput").value }, success: function (response) { document.getElementById("result").innerHTML = response.message; }, error: function (response) { console.log(response) } }); }</script></body></html>
views.py
from django.http import JsonResponsefrom django.shortcuts import renderdef index(request): return render(request, "index.html")def function_input_user(request): if request.method == "GET": user_form_data = request.GET.get("formData", None) with open('App1/templates/user_input.html', 'w') as outfile: outfile.write(user_form_data) file = open('App1/templates/user_input.html', 'r').readlines() ################################################################### # Removing white spaces and empty lines def process_file(file_lines): processed_lines = [] for line in file_lines: stripped_line = line.strip() # Remove spaces and newlines if stripped_line: # Add the line only if it's not empty processed_lines.append(stripped_line) return processed_lines file_processed = process_file(file) ################################################################### return JsonResponse(file_processed, status=200)def function_check(request): #Check <html> if '<html>' in function_input_user(request): html["message"] = "CORRECT: <html> found" else: html["message"] = "ERROR: <html> not found" #Check <head> if '<head>' in function_input_user(request): head["message"] = 'CORRECT: <head> found' else: head["message"] = 'ERROR: <div class="container-fluid"> not found' #Check <div class="container-fluid"> if '<div class="container-fluid">' in function_input_user(request): container_fluid["message"] = 'CORRECT: <div class="container-fluid"> found' else: container_fluid["message"] = 'ERROR: <div class="container-fluid"> not found' context = {'html' : html,'head' : head,'container_fluid': container_fluid, } return JsonResponse(context, status=200)
app1/urls.py
from django.urls import pathfrom . import viewsurlpatterns=[ path('', views.index, name='index'), path('function_input_user/', views.function_input_user,name="function_input_user"), path('function_check/', views.function_check,name="function_check"),]
project/urls.py
from django.contrib import adminfrom django.urls import path, includeurlpatterns = [ path('admin/', admin.site.urls), path('', include('App1.urls')),]
style.css
*,*::after,*::before { margin: 0; box-sizing: border-box;}.rowstyle1 { background-color: black; color: white;}.row2 {margin-top: 20px;width: 700px;height: 120px;}.rowstyle2 { background-color: #ededed;; color: black;}/* Code Editor per Highlightjs *//* Scrollbars */::-webkit-scrollbar { width: 5px; height: 5px;}::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); border-radius: 0px;}::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.3); border-radius: 1rem;}.editor { --pad: 0.5rem; display: flex; overflow: auto; background: #ffb5b5; height: 100%; width: 100%; padding-left: 4px;}.editor-area { position: relative; padding: var(--pad); height: max-content; min-height: 100%; width: 100%; border-left: 1px solid hsl(0 100% 100% / 0.08);}.editor-highlight code,.editor-textarea { padding: 0rem !important; top: 0; left: 0; right: 0; bottom: 0; background: transparent; outline: 0;}.editor-highlight code,.editor-textarea,.editor-lines { white-space: pre-wrap; font: normal normal 14px/1.4 monospace;}.editor-textarea { display: block; position: relative; overflow: hidden; resize: none; width: 100%; height: 200px; color: white; caret-color: hsl(50, 75%, 70%); /* But keep caret visible */ border: 0;&:focus { outline: transparent; }&::selection { background: hsla(0, 100%, 75%, 0.2); }}.editor-highlight { position: absolute; left: var(--pad); right: var(--pad); user-select: none; margin-bottom: 0; min-width: 0;}.editor-lines { display: flex; flex-direction: column; text-align: right; height: max-content; min-height: 100%; color: hsl(0 100% 100% / 0.6); padding: var(--pad); /* use the same padding as .hilite */ overflow: visible !important; background: hsl(0 100% 100% / 0.05); margin-bottom: 0;& span { counter-increment: linenumber;&::before { content: counter(linenumber); } }}/* highlight.js customizations: */.hljs { background: none;}
Thank you