Develop Reference

How can I pass an ID from selected table row to my AJAX function that fetching data

Sorry to bother, I'm having a trouble passing and ID to my AJAX function.
I wanted to pass the ID of the selected table row to my AJAX function and use it for my query in my controller
this is the code for my table row
<div class="container">
<h2 style="margin-top: 12px;" class="alert alert-success">Details</h2><br>
<div class="row">
<div class="col-12">
<table class="table table-bordered" id="">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<td colspan="2">Action</td>
</tr>
</thead>
<tbody id="users-crud">
#foreach($merchants as $merchant)
<tr id="user_id_{{ $merchant->id }}">
<td>{{ $merchant->id}}</td>
<td>{{ $merchant->first_name }}</td>
<td>{{ $merchant->email }}</td>
<td><a id="getData" onClick="getData({{$merchant->id}})" class="btn btn-info">Show</a>
</td>
</tr>
#endforeach
</tbody>
</table>
{{ $merchants->links() }}
</div>
</div>
</div>
upon click show ID should pass it to my AJAX function,
this is the code of the script
<script type=text/javascript>
$(document).ready(function() {
});
function getData(id){
$('#myModal').modal('show');
$.ajax({ //create an ajax request to display.php
type: "GET",
url: "getproducts/",
// dataType: 'json',
data: {id: id}, // This will be {id: "1234"}
success: function (data) {
$("#id").html(data.id);
$("#first_name").text(data.first_name);
}
});
};
</script>
And ID will be use for my query in my controller, this is my controller's code, note that the number 1 in my where query is hard coded, I wanted to put the ID that I get from the selected table
public function getproducts()
{
$merchants = DB::table('merchants')
->select('merchants.*', 'product.product_name as product_names')
->join('product','product.id','=','merchants.id')
// THE NUMBER 1 IS HARD CODED
->where('merchants.id', 1)
->paginate(8);
return response()->json($test, 200);
}

Every method in a Laravel Controller can have arguments "injected" into them, including the Request $request variable. Add this to the top of your Controller after your namespace declaration:
namespace App\Http\Controllers;
use Illuminate\Http\Request;
Then modify your method:
public function getproducts(Request $request) {
...
}
Then, instead of hard-coding the value 1, you pull it from your $request object:
->where('merchants.id', $request->input('id'))
The full documentation can be seen here:
https://laravel.com/docs/9.x/requests#accessing-the-request

Your code seems fine to me. What is the issue you are facing? But you can improve code by bit more.
<td><a id="getData" onClick="getData({{$merchant->id}})" class="btn btn-info">Show</a>
Instead you can use a global class. Also using same HTML id in a class is not good practice.
<td><a class="merchant_info" data-id="{{$merchant->id}}" class="btn btn-info">Show</a>
Now need modification to jQuery code
<script type=text/javascript>
$(document).ready(function() {
$('.merchant_info').click(function(e){
e.preventDefault();
var dataId = $(this).attr("data-id");
// Now do the Ajax Call etc
});
});
</script>

How to pass checkbox values to modal bootstrap for Python Flask remove data from mysql table?

Environment:
Python 3.7.7
Flask 1.1.2
Werkzeug 1.0.1
Introduction:
I am making a Flask application for my saas dashboard.
I have a page "categories.html" which displays a list of categories in a table.
Each category has a checkbox if the user wants to delete several categories by checking the categories and clicking on the "DELETE" button. See screenshot below:
So users will be able to select multiple categories and remove them by clicking on the "DELETE" button.
But before to delete the rows in Mysql table categories, a confirmation popup is showing up. This popup is done by Bootstrap modal.
Problem:
I don't how to pass the list of checkbox values selected by the user to the modal popup.
What did I try:
I tried to fix this issue with some javascript code, but it doesn't work.
My code:
My template categories.html (I removed unecessary code):
<form>
<table id="categories" class="table dataTable no-footer" role="grid">
<thead>
<tr role="row">
<th tabindex="0" rowspan="1" colspan="1" style="white-space: nowrap"></th>
</tr>
</thead>
<tbody>
{% for category in categories %}
<tr role="row" >
<td style="white-space: nowrap">
<input name="category_id" value="{{ category.ID }}" type="checkbox" class="form-check-input" style="float: left; margin: 0 auto;">
</td>
<td>{{ category.name }}</td>
<td style="white-space: nowrap">
{% if category.icon %}
{% if category.icon.find('<i class')!=-1 %}
{{ category.icon|safe }}
{% else %}
<img src="{{ url_for('static', filename='images/<category.icon>') }}">
{% endif %}
{% else %}
na
{% endif %}
</td>
</tr>
{% endfor %}
</tr></tbody>
</table>
</form>
<!-- Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteModalLabel">Delete Category</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to delete these categories?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<form action="{{ url_for('delete_category')}}" method="POST">
<input name="category_id" type="hidden" value="pass_checkedvalue" id="hidden_checkedinput">
<input class="btn btn-danger" type="submit" value="delete"/>
</form>
</div>
</div>
</div>
</div>
<script>
$('#deleteModal').on('show.bs.modal', function(e) {
var checkedValues = $('.record:checked').map(function(){ return this.value; }).get();
//put the ids in the hidden input as a comma separated string
$('#hidden_checkedinput').val(checkedValues.join(','));
});
</script>
My route.py:
#app.route('/delete_category', methods=['GET', 'POST'])
#login_required
def delete_category():
if request.method == "POST":
if request.form["category_id"]:
print(request.form["category_id"])
Category.query.filter(Category.ID.in_(request.form["category_id"])).delete()
db_mysql.session.commit()
flash('The categories have been deleted', 'success')
return redirect(url_for('categories'))
My models.py:
class Category(db_mysql.Model):
__tablename__ = "W551je5v_pb_categories"
ID = db_mysql.Column('ID', db_mysql.Integer, primary_key=True)
name = db_mysql.Column('name', db_mysql.Unicode)
icon = db_mysql.Column('icon', db_mysql.Unicode)
icon_blue_img = db_mysql.Column('icon_blue_img', db_mysql.Unicode)
icon_white_img = db_mysql.Column('icon_white_img', db_mysql.Unicode)
icon_black_img = db_mysql.Column('icon_black_img', db_mysql.Unicode)
platforms = db_mysql.relationship('Platform', backref='W551je5v_pb_categories', lazy=True)
def __repr__(self):
return f"Category('{self.ID}','{self.name}','{self.icon}','{self.icon_blue_img}','{self.icon_white_img}','{self.icon_black_img}')"
OUTPUT:
When I execute this code, I get this error message:
sqlalchemy.exc.InvalidRequestError
sqlalchemy.exc.InvalidRequestError: Could not evaluate current criteria in Python: "Cannot evaluate clauselist with operator <function comma_op at 0x0000026EB4542558>". Specify 'fetch' or False for the synchronize_session parameter.
And the print(request.form["category_id"]) showed in console:
pass_checkedvalue
Which is the value of my hidden field.
I have no idea what am I doing wrong. Can anyone help me, please?

I don't how to pass the list of checkbox values selected by the user to the modal popup.
I don't think that's the right approach.
Actually, I don't think you need to pass ANY data to the modal popup.
What I would instead do is add an on-click for the modal button that would run a javascript function.That function needs to simply iterate over the <tr> tags and find the checked rows.
After you have a list containing the checked rows' IDs, you can send that to your backend via some HTTP request (you can use Javascript's FETCH API for that).
Your code would like something like that (please treat this as a schema since I don't actually know how your HTML looks like):
let checked_arr = [];
let tr_lst = document.getElementsByTagName('tr'); // probably better to be done with getElementsByClassName
for (let i=0; i<tr_lst.length; i++) {
let checkbox_td = tr_lst[i].children[0]; // assuming first <td> is the checkbox
let checkbox_element = checkbox_td.children[0]; // assuming your HTML looks like <td><input type="checkbox"...></td>
if (checkbox_element.checked) {
checked_arr.push(tr_lst[i].id);
}
}
let response = await fetch('/your_api_endpoint', {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
body: JSON.stringify({"data": checked_arr})
});
Also, here is a nice tutorial on how to use FETCH API:
https://javascript.info/fetch
Hope that's helpful :)

How to call a function from python inside a html loop?

I am new to web coding... I was not able to find a good solution on my own. I need to add a function in my buttons and write the function in "application.py". I can't create a new html and I would prefer not to write a script in the html, if possible. The function should use the "i.stock" of the moment since it is inside a for loop. Any help is appreciated, thanks.
My html code:
{% extends "layout.html" %}
{% block head %}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
{% endblock %}
{% block title %}
Your Portfolio
{% endblock %}
{% block main %}
<h2> This is your current Portfolio:</h2>
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">Symbol</th>
<th scope="col">Name</th>
<th scope="col">Shares</th>
<th scope="col">Current Price</th>
<th scope="col">Total</th>
<th scope="col">Buy</th>
<th scope="col">Sell</th>
</tr>
</thead>
<tbody>
{% for i in portfolio %}
<tr>
<th scope="row">{{ i.stock_symbol }}</th>
<td>{{ i.stock_name }}</td>
<td>{{ i.stock_shares }}</td>
<td>{{ i.stock_price }}</td>
<td>{{ i.total_amount }}</td>
<td><a type="button" class="btn btn-success" onClick="buy()">+</a></td>
<td><a type="button" class="btn btn-danger">-</a></td>
</tr>
{% endfor %}
</tbody>
</table>
<h4> Your currently have {{cash}} available in cash </h4>
<h4> Your Total (stocks + cash) is {{total}}</h4>
{% endblock %}
My python below [the part that matters, the def index is for the table]. The i.stock here does not work (obviously you may say) any suggestions on how to fix that?
Maybe I should create another #? I will need to refresh his portfolio once he buys another stock.
#app.route("/")
#login_required
def index():
"""Show portfolio of stocks"""
...
#Function to buy stocks directly from index
def buy():
cost = float(i.stock["price"])
#Looks in the datababse for the amount of cash the user still has
query = db.execute("SELECT cash FROM users WHERE id = :id", \
id=session["user_id"])
cash = query[0]["cash"]
#See if user has enough money and handle when user does not
if cost > cash:
return apology("You don't have enough money")
#Append information to the history table
db.execute("INSERT INTO history (user_id, stock_symbol, stock_price, stock_amount, total_amount) \
VALUES (:user_id, :stock_symbol, :stock_price, :stock_amount, :total_amount)", \
user_id = session["user_id"], stock_symbol = i.stock["symbol"], stock_price = usd(i.stock["price"]), stock_amount = 1, total_amount = cost)
#Calculates new cash amount and update database
net_cash = int(cash - cost)
db.execute("UPDATE users SET cash = :new_cash WHERE id = :id", \
id = session["user_id"], new_cash = net_cash)

You can't access Python functions in HTML. Instead, you send an AJAX request to the server. To do this, you need to modificate your buy-function:
import json
from flask import request
#app.route('/buy', methods=['POST'])
def buy():
i = json.loads(request.args.get('i'))
Now you can create the actual JavaScript-buy-function that will call the Python-buy-function:
function buy() {
var i = {}; // You need to get the details
var i_json = JSON.stringify(i);
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "/buy", true);
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log("Done.");
}
};
xhttp.send(i_json);
}
Now the only thing you have left to do, is passing all the necessary information (i) to the JS-buy-function.

send data from flask to html with 2 forms

I have flask sending data to html. Now, first time it does that its by render_template('page1.html', data=data) which populates the main table. Now when i click on any row of main table, i want to call flask again by url_for(entrypoint) and then again i will do render_template('page1.html', data=data2) for the 2nd table. But how to differentiate between them? i mean how will html know which data is coming for whom? please advice. I am novice in javascript and html. I am planning to keep the main table and secondary table under different forms. please advice if thats good decision or not.
Inside my html(page1.html), I have written
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function getId(element) {
var row_index=element.rowIndex;
$.ajax({
url: '/get_details',
data: document.getElementById("table1").rows[row_index].cells[5].innerHTML),
type: 'POST',
success: function(response){
console.log(response);
},
error: function(error){
console.log(error);
}
});
This is the code in html for table1 and table2(table2 not done yet)
<section id="boxes" style="margin-top:-5%; margin-bottom:0%; position:absolute; z-index:1;">
<div class="box" style="margin-left:30px; margin-top:20px; z-index:1;">
<table id="table1">
<tr>
<th>NO</th>
<th> SUBJECT NAME</th>
<th>ASSIGNED TO</th>
<th>CREATED</th>
<th>DISEASES</th>
<th>SUBJECT ID</th>
<th>STATUS</th>
</tr>
{% for row in data %}
<tr onclick="getId(this)">
<td> {{ row[0] }}</td>
<td> {{ row[1] }}</td>
<td> {{ row[2] }}</td>
<td> {{ row[3] }}</td>
<td> {{ row[4] }}</td>
<td> {{ row[5] }}</td>
<td> {{ row[6] }}</td>
</tr>
{% endfor %}
</table>
</div>
<div class="box-two">
</div>
Inside my app.py
here is the flask code for the entry point:
#app.route('/get_details', methods=['POST'])
def get_details_user(patientid):
print(patientid)
This is the code for the entrypoint for the records which populates table1 as of now:
#app.route('/records')
#login_required
def records():
if current_user.priviledge:
data = get_records_by_userid(None)
else:
data = get_records_by_userid(current_user.id)
list_data = []
for row in data:
list_data.append([])
for col, val in row.items():
list_data[-1].append(val)
return render_template('records.html', data=list_data)
I don't see this in my flask code being triggered. Something wrong in my ajax code?? Also, how do I get the data from flask to this same html file for the second table?
Thanks a lot,
Sudip

Update: The error was coming due to ajax function syntax. Went with extra ')' in data in ajax...oops, thats bad

Add this to the JAvascript code:
$.ajax(function() {
headers = {'X-CSRFToken' : $('#csrf_token').val() },
...
});
This is the token the allows AJac to be validated

jQuery form selector doesnt seem to work

I am trying to put a generic form submit function.
For some reason the form submit action is not being captured at all by jQuery.
I am using the following:
$('form').submit(function( event ) {
alert("Form submit through ajax");
event.preventDefault();
});
I never get the alert and the form goes for a normal post submission which invariably fails as the back-end is a python django class based view that is specifically handling the ajax requests. I am new to jQuery.
$(document).ready(function(){
$.ajaxSetup(
{type:'POST'});
$('.nav_menu').click(function(){
var hostname = window.location.origin;
alert("hostname = " + hostname + $(this).attr("id"));
$.ajax({
type: 'GET',
url: hostname + $(this).attr("id"),
data: {},
success: function(data){
var page = data['page'];
$('#view_area').empty();
$('#view_area').append(page);
}
});
});
/*$('form').submit(function(){
alert("Form submit in ajax");
//$(this).ajaxSubmit();
return false;
});*/
$('form').submit(function( event ) {
event.preventDefault(); // <-- important
alert("Form submit through ajax");
/*$(this).ajaxSubmit({
target: '#output'
});*/
});
$(':submit').click(function(){
alert(":submit = Form submit through AJax");
});
});
That is the full jQuery file.
The following is my html from where the form is present.
<table>
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Name</th>
<th>D.O.B</th>
<th>Marital Status</th>
<th>Mobile</th>
<th>Alt Mobile</th>
<th>Alt Contact</th>
<th>Office Number</th>
<th>Primary Address</th>
<th>Permanent Address</th>
<th>Secondary Address</th>
</tr>
</thead>
<tbody>
{% for e in entry_all %}
<tr><th><form action="" method="post">{% csrf_token %}
<label for="id_emp_id"></label> <input id="id_emp_id" maxlength="50" name="emp_id" type="hidden" value="{{ e.emp_id }}" />
<input type="submit" value="Remove">
</form>
</th>
<th>{{ e.emp_id }}</th>
<td>{{ e.name }}</td>
<td>{{ e.dob }}</td>
<td>{{ e.marital_stat }}</td>
<td>{{ e.cell_no }}</td>
<td>{{ e.cell2_no }}</td>
<td>{{ e.alt_no }}</td>
<td>{{ e.off_ll }}</td>
<td>{{ e.prim_addr }}</td>
<td>{{ e.perm_addr }}</td>
<td>{{ e.sec_addr }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<hr/>

I was originally using a cdn to load a jquery. For some reason this is not working all the time for me. So I decided to serve it statically. Strangely, cdn links have no issue on my team mates system. No code change.

EDITED
Code below should work as expected.
In jQuery, there's a preventDefault method which you can call to prevent the default action of an event. For forms, the default action is to either "GET" or "POST" data to or from the script or page provided in the form's action parameter.
If you want to prevent the default action of your form (stop it from submitting and following the action url), you need to call preventDefault first and foremost somewhere in your handler code.
Here's an example:
$("#myform").on("submit", function(e) {
e.preventDefault();
alert("Now I can run...");
// do AJAX call
$.ajax({
type : "POST",
url : "your-script.py",
data : { foo : "bar" }
})
.done(function(results) {
// done with post
// parse data returned from Python
// available in results parameter
});
});
If your handler is not running at all, you're likely not referencing your form correctly.