I have a profile method and a profile.html template.
profile.html has a drop-down list of user e-mails. When I select one of them, a modal window appears with this email, and I can send a message to it. I get it via AJAX.
The problem is that born_date and phone_number of this user, which I get from the database are not rendered into a template, and I can not see them in modal window, but I can get them in the console.
def str_value_to_list(text: str):
*_, email_json = re.findall(r'[^ \',()]+', text)
return email_json
#profile page method
#app.route('/profile', methods=['GET','POST'])
def profile():
if request.method == 'GET' and 'loggedin' in session:
cur = mysql.connection.cursor()
cur.execute("SELECT firstname, lastname, email FROM users.data WHERE description = 'doctor'")
account = cur.fetchall()
description = account
countries = ['USA','France','Italy','Spain','Australia','New Zealand']
cur = mysql.connection.cursor()
cur.execute("SELECT born_date, phone_number FROM users.data WHERE email = '%s'" % (dtx, ))
account = cur.fetchone()
born = account[0]
num = account[1]
print(born)
print(num)
return render_template(
'profile.html',
id = session['id'],
email = session['email'],
firstname = session['firstname'],
description = description,
countries = countries,
born=born,
num=num
)
#app.route('/api/get_data', methods=['POST'])
def get_data():
if request.method == 'POST':
print('Holy Shit!')
data = request.json
print(str_value_to_list(data['selectedItems'][0]))
cur = mysql.connection.cursor()
cur.execute("SELECT born_date, phone_number FROM users.data WHERE email = '%s'" % str_value_to_list(data['selectedItems'][0]))
account = cur.fetchone()
born = account[0]
num = account[1]
print(born)
print(num)
return jsonify({
'born': born,
'num': num,
})
html
<script type="text/javascript">
function printValue(selectedItem) {
$('#mySelectedValue').html(selectedItem.value);
}
</script>
<h2 class="white-text" style="font-size: 14px; color: #000;">born: {{ born }}</h2>
<h2 class="white-text" style="font-size: 14px; color: #000;">num: {{ num }}</h2>
<script type="text/javascript">
function printValue(selectedItem) {
$('#mySelectedValue').html(selectedItem.value.replace(/[{()}]/g, '').replace(/['"]+/g, '').replace(/[{,}]/g, ''));
console.log(selectedItem.value);
}
function process(selectedItem) {
$('#exampleModalCenter').modal('show')
document.getElementById('#exampleModalCenter')
const data = JSON.stringify({
"selectedItems": $('#sel').val()
});
$.ajax({
url: "/profile",
type: "POST",
contentType: "application/json",
data: data,
success: function (data) {
console.log(data);
},
});
}
function optionClick(selectedItem) {
printValue(selectedItem);
}
</script>
Per your code, you should use Javascript to update the born and num variable inside your Ajax success funtion:
$.ajax({
url: "/api/get_data",
type: "POST",
contentType: "application/json",
data: data,
success: function (data) {
h2 = document.querySelectorAll('.white-text')
h2[0].innerText = `born: ${data.born}`
h2[1].innerText = `num: ${data.num}`
},
});
You didn't put variable born, num in the render_template function, so you are not able to render it using {{ var }}
Related
I saw a similar question but the answer is rather vague. I created a function based view for updateItem. I am trying to get json data to load based on my request. but am getting the error -> object has no attribute 'data'
Views.py file:
def updateItem(request):
data = json.loads(request.data)
productId = data['productId']
action = data['action']
print("productID", productId, "action", action)
customer = request.user.customer
product = Product.objects.get(id=productId)
order, created = Order.objects.get_or_create(customer=customer,complete=False)
orderItem, created = OrderItem.objects.get_or_create(order=order, product=product)
if action == 'add':
orderItem.quantity = (orderItem.quantity + 1)
elif action == 'remove':
orderItem.quantity = (orderItem.quantity - 1)
orderItem.save()
if orderItem.quantity <= 0:
orderItem.delete()
return JsonResponse("Item was added!", safe=False)
JS File:
function updateUserOrder(productId, action) {
console.log('User is logged in...');
let url = '/update_item/';
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': csrftoken,
},
body: JSON.stringify({ productId: productId, action: action }),
})
.then((res) => {
return res.json();
})
.then((data) => {
console.log('data', data);
});
}
urls python file:
urlpatterns = [
path("",views.store,name="store"),
path("cart/",views.cart,name="cart"),
path("checkout/",views.checkout,name="checkout"),
path("update_item/",views.updateItem,name="update_item"),
]
The Error seems to also occur in my fetch function in the JS file. With my method POST. Can't find a solution, what am I doing wrong here?
The main problem is that you are trying to access 'request.data', there is no such attribute. What you want is to retrieve data from the POST request.
(Also, note that good practice is to have your views and variable names in snake_case form, whereas camelCase is used for classes):
def updateItem(request):
data = json.loads(request.POST.get('data'))
...
return JsonResponse("Item was added!", safe=False)
Although, to complete my answer, I must say that I had problems with your JS function, with the csrf token not being properly attached. My test solution:
views.py
from django.shortcuts import render
from django.http import JsonResponse
import json
def update_item(request):
return render(request, 'update_item.html', {})
def update_item_ajax(request):
data = json.loads(request.POST.get('data'))
print(data)
...
return JsonResponse({'message': '"Item was added!"'}, safe=False)
# output of update_item_ajax print
{'productId': 1, 'action': 'myaction'}
urls.py
from django.urls import path
from core import views
app_name = 'core'
urlpatterns = [
path('update/item/', views.update_item, name='update-item'),
path('update/item/ajax/', views.update_item_ajax, name='update-item-ajax'),
]
update_item.html
{% extends 'base.html' %}
{% block content %}
<button onclick="updateUserOrder(1, 'action')"> update item </button>
{% endblock %}
{% block script %}
<script>
function updateUserOrder(productId, action) {
console.log('User is logged in...');
let url = "{% url 'core:update-item-ajax' %}";
var payload = {
productId: productId,
action: action
};
var data = new FormData();
data.append( 'data' , JSON.stringify( payload ) );
data.append('csrfmiddlewaretoken', '{{ csrf_token }}');
fetch(url,
{
method: 'POST',
body: data,
})
.then(function(res){ return res.json(); })
.then(function(data){ console.log(data); });
}
</script>
{% endblock %}
Try:
data = json.loads(request.body)
Because the request doesn't have data, since you pass the data as body: JSON.stringify({ productId: productId, action: action }),
I'm setting a new server in Flask for an API. And a server to render the frontend in Flask also. Ok, so when i make a request to a determine API route i get this strange response 'This page was not found'. I it really seems to be every thing ok how can i debug this bug? Other Strange thing is that it allways give me status 200 OK. The error is in the route: #app.route('/v1.0/aluno/update/', methods=['POST'])
API SIDE
#app.route('/v1.0/aluno/<int:aluno_id>', methods=['GET'])
def aluno(aluno_id):
if request.method == 'GET':
cur = mysql.connection.cursor()
query = "SELECT NOME, NUMERO, PASSWORD FROM aluno WHERE NUMERO=%s"
cur.execute(query, (aluno_id,))
data = cur.fetchall()
if len(data) <= 0:
return Response(status=404)
else:
aluno = {
'nome': data[0][0],
'numero': data[0][1],
'password': data[0][2]
}
js = json.dumps(aluno)
resp = Response(js, status=200, mimetype='application/json')
resp.headers['Links'] = 'http://127.0.0.1/aluno'
return resp
#app.route('/v1.0/aluno/delete/<int:aluno_id>', methods=['POST'])
def aluno_delete(aluno_id):
if request.method == 'POST' and request.form['_method'] == 'delete':
query = "DELETE FROM aluno WHERE NUMERO = %s"
cur = mysql.connection.cursor()
cur.execute(query, (aluno_id,))
mysql.connection.commit()
cur.fetchall()
cur.close()
return Response(status=200)
#app.route('/v1.0/aluno/update/<int:aluno_id>', methods=['POST'])
def aluno_update(aluno_id):
form = AlunoForm(request.form)
if request.method == 'POST' and form.validate():
nome = request.form["nome"]
numero = request.form["numero"]
password = request.form["password"]
cur = mysql.connection.cursor()
query = "UPDATE aluno SET NOME=%s, NUMERO=%s, PASSWORD=%s WHERE NUMERO = %s"
cur.execute(query, (nome, numero, password, aluno_id))
mysql.connection.commit()
cur.execute(
"SELECT NOME, NUMERO FROM aluno WHERE NUMERO = %s", (aluno_id,))
data = cur.fetchall()
cur.close()
print(" * DATA ")
print(data)
aluno = {
'nome': data[0][0],
'numero': data[0][1]
}
js = json.dumps(aluno)
resp = Response(js, status=200, mimetype='application/json')
resp.headers['Links'] = 'http://127.0.0.1/aluno'
return resp
elif request.method == 'POST' and not form.validate():
resp = Response(status=400)
resp.headers['Links'] = 'http://127.0.0.1/aluno'
return resp
FRONT-END SIDE
{% endblock %}
<script type="text/javascript" src="{{url_for('static', filename='js/jquery-3.2.1.min.js') }}"></script>
<script type="text/javascript" src="{{url_for('static', filename = 'js/bootstrap.min.js')}}"></script>
<script>
function aluno_update(){
try{
let formElement = document.getElementById("aluno_update")
//let formData = formElement.
//console.log(formData)
$.ajax({
type: "POST",
url: "http://127.0.0.1:80/v1.0/aluno/update/{{aluno['numero']}}",
data: {'nome': 'João Luis','numero':'16172','password':'Password'},
//dataType: 'json',
success: function(data){
//location.href = "http://127.0.0.1:3000/v1.0/alunos/"
alert(data)
console.log(data)
},
error(jqXHR,JQueryXHR,errorThrown){
//console.log(formData)
alert(jqXHR)
alert(JQueryXHR)
alert(errorThrown)
console.log(jqXHR)
console.log(JQueryXHR)
console.log(errorThrown)
}
})
}catch(err){
alert(err)
}
}
</script>
I have tried using POSTMAN instead of the regular web browser. To make the request to the API. But i get the same response: 'This page was not found'
At least i was expecting some sort of 400 Bad Request or something like that.
https://github.com/joaogracio/SqlParser
Form validation fails and you get 400 according to the code below
elif request.method == 'POST' and not form.validate():
resp = Response(status=400)
resp.headers['Links'] = 'http://127.0.0.1/aluno'
return resp
Clicking on the submit button literally does nothing. Submitting a blank form will trigger the validation for the required fields, but filling out the form as required results in the form not submitting/submit button doing nothing. The template has the CSRF_Token, Submit Button is in the form tag, and the form tag has an action attribute pointing in the right direction. Chrome doesn't bark any errors so I'm stuck on how to proceed.
views.py
#blueprint.route("register/", methods=['GET', 'POST'])
def register():
"""Renders register page."""
form = RegisterForm()
if request.method == 'POST':
if not form.validate_on_submit():
return render_template('main/register.html', page_title="Service Registration",
form=form, form_success=False, media_types=current_app.config["ACCEPTED_"
"MEDIA_TYPE"])
company, err = get_company(form.organization.data)
if err:
company, err = create_company(form.organization.data)
if err:
return render_template('main/register.html', page_title="Service Registration",
form=form, form_success=False, message=err, media_types=current_app.config["ACCEPTED_"
"MEDIA_TYPE"])
customer, err = get_or_create_customer(
form.first_name.data + " " + form.last_name.data, form.email.data,
company_id, form.position.data, phone_number
)
if err:
return render_template('main/register.html', page_title="Service Registration",
form=form, form_success=False, message=err, media_types=current_app.config["ACCEPTED_"
"MEDIA_TYPE"])
if err:
return render_template('main/register.html', page_title="Service Registration",
form=form, form_success=False, message=err, media_types=current_app.config["ACCEPTED_"
"MEDIA_TYPE"])
else:
return render_template('main/register.html', page_title="Service Registration",
form=form, form_success=True, message=success_msg, media_types=current_app.config["ACCEPTED_"
"MEDIA_TYPE"])
return render_template('main/register.html', page_title="Service Registration",
form=form, media_types=current_app.config["ACCEPTED_"
"MEDIA_TYPE"])
#blueprint.route("register/", methods=['POST'])
def upload_register():
"""Handles file upload POSTs."""
first_name = request.form.get("first_name")
last_name = request.form.get("last_name")
name = request.form.get("first_name") + " " + request.form.get("last_name")
email = request.form.get("email")
filename = request.form.get("filename")
file_type = request.form.get("file_type")
if filename == '':
response = make_response("No selected file")
return response, 400
if check_file_type(file_type):
filename = clean_filename(filename)
filename = secure_filename(filename)
filename = unique_filename(filename)
response = generate_presigned_post(filename, file_type)
# CREATE DB REFERENCE
url = "http://nevcodocs.s3.amazonaws.com/Uploads/{}".format(filename)
instance = CustomerFileUpload.query.filter_by(url=url).first()
if not instance:
instance = CustomerFileUpload(url=url, email=email, name=name)
db.session.add(instance)
db.session.commit()
else:
instance.update(created_at=datetime.utcnow())
return response, 200
else:
response = make_response("Invalid file type")
return response, 500
javascript/jquery
// Enables/disables form submission and colors button accordingly
var enableSubmit = function(enabled) {
if (enabled) {
$('#submit_ticket').removeAttr('disabled');
$('#submit_ticket').removeAttr('style');
} else {
$('#submit_ticket').attr('disabled', 'disabled');
$('#submit_ticket').attr('style', 'background-color: rgba(244, 121, 32, 0.5) !important; border-color: rgba(244, 121, 32, 0.25) !important;');
}
};
$('#ticket-form').submit(function(event) {
enableSubmit(false);
showSpinner(true);
var validated = true;
var didSelectFile = true;
didSelectFile = validateField('#upload') && validated;
validated = didSelectFile && validated;
if (didSelectFile && !validateContentType()) {
$('invalid-upload-alert').show();
validated = false;
} else {
$('#invalid-upload-alert').hide();
}
if (validated) {
$('#filename').val($('#upload').val());
$('#file_type').val($('#upload').prop('files')[0].type);
$.ajax({
type: 'POST',
url: '/register/',
data: $('#ticket-form').serialize()
}).done(function(data) {
var formData = new FormData();
for (var key in data.data.fields) {
formData.append(key, data.data.fields[key]);
}
formData.append('file', $('#upload').prop('files')[0]);
var req = new XMLHttpRequest();
req.onload = function() {
showSpinner(false);
$('#ticket-form-failed').removeClass("support-form-show");
$('#ticket-form-failed').addClass("support-form-hide");
$('#ticket-form').removeClass("support-form-show");
$('#ticket-form').addClass("support-form-hide");
$('#ticket-form-success').removeClass("support-form-hide");
$('#ticket-form-success').addClass("support-form-show");
};
req.onerror = function() {
showSpinner(false);
$('#ticket-form-failed').removeClass("support-form-hide");
$('#ticket-form-failed').addClass("support-form-show");
};
req.open('POST', data.url);
req.send(formData);
}).fail(function(err) {
showSpinner(false);
$('#ticket-form-failed').removeClass("support-form-hide");
$('#ticket-form-failed').addClass("support-form-show");
});
} else {
showSpinner(false);
enableSubmit(true);
}
{% endif %}
if (!validated) {
event.preventDefault();
showSpinner(false);
enableSubmit(true);
}
});
What you have written looks really complicated, why not try something easy like-
#app.route("/connect",methods=['GET','POST'])
def connect():
if request.method=='GET':
return render_template('connect.html')
if request.method=="POST":
return render_template('Thankyou.html',name=request.form['name])
in you views.py and in your connect.html form just write-
<form name="connect" method="post" action="{{ url_for('connect') }}">
<input class="t1" type="text" id="email" name="email" placeholder="Your Email ID">
<input class="t2" type="text" id="name" name="name" placeholder="name">
<button class="btn btn-primary but" type="submit">Send</button>
</form>
the final page, Thankyou.html can look like this-
<p>Thanks for contacting me, {{ name }} </p>
I was working with flask and i want to use a jqGrid view, here is the code for loading data.
controller: {
loadData: function(filter) {
var d = $.Deferred();
$.ajax({
type: "GET",
url: "/dashboard",
data: filter,
dataType: "JSON"
}).done(function(result) {
d.resolve($.map(result, function(item) {
return $.extend(item.fields, { id: item.pk });
}));
});
return d.promise();
}},
Here is the .py File
#app.route("/dashboard")
#is_logged_in
def dashboard():
cur=mysql.connection.cursor()
result=cur.execute("SELECT * FROM articles")
articles=cur.fetchall()
name=json.dumps(articles)
if result>0:
return render_template("dashboard.html",articles=articles,name=name)
else:
msg="No Article Found"
return render_template("dashboard.html",msg=msg)
cur.close()
but the grid is empty, how could i accomplish this.
First, factor out your query.
def query_articles():
with mysql.connection.cursor() as cur:
query = "SELECT * FROM articles"
cur.execute(query)
articles = cur.fetchall()
return articles
Make a view function for an endpoint that returns articles as JSON.
#app.route("/api/articles", methods=['GET'])
def articles():
return jsonify(query_articles())
You can use this endpoint in your AJAX request.
controller: ...
url: "/api/articles",
Another way is to make a div node in your template to contain the serialized list of articles.
You can use this div in controller to make the grid.
main.py:
from flask import jsonify
from json import dumps
#app.route("/dashboard", methods=['GET'])
#is_logged_in
def dashboard():
articles = query_articles()
if len(articles) > 0:
return render_template(
"dashboard.html",
articles=articles
)
return render_template("dashboard.html", msg="No Article Found")
template.html:
...
...
script.js:
var articles = JSON.parse($('#dataSource').data('articles'));
var articles = articles.map(function(item) {
return Object.assign({}, item.fields, { id: item.pk });
});
controller: {
data: articles
},
I can make the simple button or default button work but as there is no option to custom css I need to use "Custom" stripe button. Following is the simple and custom form I am using where simple one works fine but don't know how to make custom work. Currently it is doing nothing when I click and enter information. But Default button works just fine.
View:
#app.route('/monthly', methods=['GET', 'POST'])
def monthly_charged():
if not user_authorized():
return redirect('/')
amount = 1495
# customer
key = stripe_keys['publishable_key']
print key
charge_all = stripe.Charge.list(limit=10000)
charge_dic = {}
charge_list = []
for charge_data in charge_all:
charge_dic['Amount'] = "$" + str(float(charge_data.amount) / 100) + " " + charge_data.currency.upper()
charge_dic['Description'] = charge_data.description
charge_dic['Name'] = charge_data.receipt_email
charge_dic['Date'] = str(datetime.datetime.fromtimestamp(charge_data.created))
charge_list.append(charge_dic)
charge_dic = {}
data = get_profile_data(session['auth_token'])
profile_data = data['StudentProfile']
student_id = profile_data.id
student = get_profile_data(session['auth_token'])['StudentProfile']
pkg = Package.query.filter_by(student_id=profile_data.id).first()
if pkg:
flash('You already have an active subscription.')
else:
stripe_token = request.form['stripeToken']
email = request.form['stripeEmail']
try:
customer = stripe.Customer.create(
email=email,
source=request.form['stripeToken']
)
subscription = stripe.Subscription.create(
customer=customer.id,
plan="monthly",
)
student_id = profile_data.id
student.stripe_customer_id = customer.id
student.stripe_subscription_id = subscription.id
package = Package(
student_id=student_id,
stripe_id = customer.id,
student_email=request.form['stripeEmail'],
is_active=True,
package_type='monthly',
subscription_id=subscription.id
)
dbase.session.add(package)
flash("You've successfylly subscribed for monthly package.")
dbase.session.commit()
except stripe.error.CardError as e:
# The card has been declined
body = e.json_body
err = body['error']
return redirect(url_for('packages', key=key, amount=amount))
Simple or Default Stripe Button:
<form action="/monthly" method="post" >
<div class="form-group">
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_YgHVTCLIMQLW4NV6ntnJPAXs"
data-description="Monthly Package"
data-name="Monthly"
data-amount="10000"
data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-locale="auto">
</script>
</div>
</form>
Custom Stripe Button:
<form action="/monthlycharged" method="post">
<script src="https://checkout.stripe.com/checkout.js"></script>
<button id="customButton">Enroll</button>
<style>
#customButton{
width:100px;
height:30px;
background-color:red;
color:white;
border:2px solid red;
}
</style>
<script>
var handler = StripeCheckout.configure({
key: 'pk_test_YgHVTCLIMQLW4NV6ntnJPAXs',
image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
locale: 'auto',
token: function(token) {
// You can access the token ID with `token.id`.
// Get the token ID to your server-side code for use.
}
});
document.getElementById('customButton').addEventListener('click', function(e) {
// Open Checkout with further options:
handler.open({
name: 'Monthly',
description: 'monthly',
amount: 10000
});
e.preventDefault();
});
// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
handler.close();
});
</script>
</form>
You need to submit your form in the token: function() {} of StripeCheckout.configure.
Here's an example of how to do that: https://jsfiddle.net/osrLsc8m/